Val Town Code SearchReturn to Val Town

7// Initialize Notion client
8const notion = new Client({
9  auth: Deno.env.get("NOTION_API_KEY"),
10});
11

7// Initialize Notion client
8const notion = new Client({
9  auth: Deno.env.get("NOTION_API_KEY"),
10});
11

7// Initialize Notion client
8const notion = new Client({
9  auth: Deno.env.get("NOTION_API_KEY"),
10});
11

1export default async (c, next) => {
2  const secret = c.req.header("x-api-key");
3  if (secret !== Deno.env.get("X_API_KEY")) {
4    return c.text("Unauthorized", 401);
5  }

5// Initialize Notion client
6const notion = new Client({
7  auth: Deno.env.get("NOTION_API_KEY"),
8});
9

1export default async function(req: Request) {
2  try {
3    const apiKey = Deno.env.get("VALTOWN_API_TOKEN");
4
5    if (!apiKey) {
6      return new Response(
7        JSON.stringify({ error: "VALTOWN_API_TOKEN not found" }, null, 2),
8        { status: 400, headers: { "Content-Type": "application/json" } },
9      );
11
12    // Get my vals using the authenticated /me/vals endpoint
13    const valsResponse = await fetch("https://api.val.town/v2/me/vals", {
14      headers: {
15        "Authorization": `Bearer ${apiKey}`,
16        "Content-Type": "application/json",
17      },
20    if (!valsResponse.ok) {
21      const errorText = await valsResponse.text();
22      console.log("API Error response:", errorText);
23      throw new Error(
24        `Failed to fetch vals: ${valsResponse.status} ${valsResponse.statusText}. Response: ${errorText}`,
42    for (const val of vals) {
43      try {
44        // Use the files API to get the actual file structure
45        const filesResponse = await fetch(
46          `https://api.val.town/v2/vals/${val.id}/files?path=&recursive=true&limit=100`,
47          {
48            headers: {
49              "Authorization": `Bearer ${apiKey}`,
50              "Content-Type": "application/json",
51            },

57      
58      // Get location first
59      const locationResponse = await fetch("/api/location");
60      const locationData = await locationResponse.json();
61      setLocation(locationData);
71
72  const fetchWeatherData = async (lat: number, lon: number) => {
73    const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);
74    const data = await response.json();
75    

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import { ApiKeyInput } from "./ApiKeyInput.tsx";
4import { ChatInterface } from "./ChatInterface.tsx";
5import { MCPClient } from "./MCPClient.tsx";
23
24export function App() {
25  const [apiKey, setApiKey] = useState<string>("");
26  const [messages, setMessages] = useState<Message[]>([]);
27  const [isLoading, setIsLoading] = useState(false);
29  const [availableTools, setAvailableTools] = useState<any[]>([]);
30
31  // Initialize MCP client and load API key from localStorage
32  useEffect(() => {
33    const savedApiKey = localStorage.getItem("anthropic_api_key");
34    if (savedApiKey) {
35      setApiKey(savedApiKey);
36    }
37
53      role: "system",
54      content:
55        "Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.",
56      timestamp: new Date(),
57    }]);
58  }, []);
59
60  const handleApiKeyChange = (key: string) => {
61    setApiKey(key);
62    localStorage.setItem("anthropic_api_key", key);
63  };
64
65  const sendMessage = async (content: string) => {
66    if (!apiKey.trim()) {
67      alert("Please enter your Anthropic API key first");
68      return;
69    }
93When you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;
94
95      // Call Anthropic API
96      const response = await fetch("https://api.anthropic.com/v1/messages", {
97        method: "POST",
98        headers: {
99          "Content-Type": "application/json",
100          "x-api-key": apiKey,
101          "anthropic-version": "2023-06-01",
102          "anthropic-dangerous-direct-browser-access": "true",
125      if (!response.ok) {
126        const errorData = await response.json();
127        throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);
128      }
129
208
209        <div className="grid gap-6">
210          <ApiKeyInput
211            apiKey={apiKey}
212            onApiKeyChange={handleApiKeyChange}
213          />
214

2import React, { useState } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3
4interface ApiKeyInputProps {
5  apiKey: string;
6  onApiKeyChange: (key: string) => void;
7}
8
9export function ApiKeyInput({ apiKey, onApiKeyChange }: ApiKeyInputProps) {
10  const [isVisible, setIsVisible] = useState(false);
11  const [tempKey, setTempKey] = useState(apiKey);
12
13  const handleSave = () => {
14    onApiKeyChange(tempKey);
15  };
16
17  const handleClear = () => {
18    setTempKey('');
19    onApiKeyChange('');
20    localStorage.removeItem('anthropic_api_key');
21  };
22
23  return (
24    <div className="bg-white rounded-lg shadow-md p-6">
25      <h2 className="text-2xl font-semibold text-gray-800 mb-4">🔑 Anthropic API Key</h2>
26      
27      <div className="space-y-4">
28        <div>
29          <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700 mb-2">
30            Enter your Anthropic API Key
31          </label>
32          <div className="flex gap-2">
33            <div className="flex-1 relative">
34              <input
35                id="apiKey"
36                type={isVisible ? "text" : "password"}
37                value={tempKey}
38                onChange={(e) => setTempKey(e.target.value)}
39                placeholder="sk-ant-api03-..."
40                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
41              />
67          <p className="mb-2">
68            <strong>Status:</strong>{' '}
69            <span className={apiKey ? 'text-green-600' : 'text-red-600'}>
70              {apiKey ? '✅ API key configured' : '❌ No API key set'}
71            </span>
72          </p>
73          <p className="mb-2">
74            Your API key is stored locally in your browser and sent directly to Anthropic's API.
75          </p>
76          <p>
77            Get your API key from{' '}
78            <a 
79              href="https://console.anthropic.com/account/keys" 

125              <div className="flex items-center gap-2">
126                <span>{getMessageIcon(message.role)}</span>
127                <span className="font-semibold capitalize">{message.role}</span>
128              </div>
129              <span className="text-xs text-gray-500">