4
5/**
6 * Plays a bell sound notification using the Web Audio API
7 * @returns A Promise that resolves when the sound has started playing
8 */
13 const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
14 if (!AudioContext) {
15 console.warn("Web Audio API not supported in this browser");
16 resolve();
17 return;
65
66/**
67 * Plays a simple notification sound using the Web Audio API
68 * This is a simpler, shorter bell sound
69 * @returns A Promise that resolves when the sound has started playing
75 const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
76 if (!AudioContext) {
77 console.warn("Web Audio API not supported in this browser");
78 resolve();
79 return;
19 }
20
21 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
22 console.log("Original messages:", JSON.stringify(messages, null, 2));
23 console.log("Images received:", JSON.stringify(images, null, 2));
24
25 // Check if API key is available
26 if (!anthropicApiKey) {
27 return Response.json({
28 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
29 }, { status: 400 });
30 }
31
32 let apiKey;
33 if (!anthropicApiKey) {
34 return Response.json({
35 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
36 }, { status: 400 });
37 } else if (anthropicApiKey === Deno.env.get("PASSWORD")) {
38 apiKey = Deno.env.get("PROVIDED_ANTHROPIC_API_KEY");
39 } else {
40 apiKey = anthropicApiKey;
41 }
42
43 const anthropic = createAnthropic({
44 apiKey,
45 });
46
90 value={customPath}
91 onChange={handlePathChange}
92 placeholder="Path (e.g., /api/data)"
93 />
94 </div>
8 const { isAuthenticated, authenticate, error } = useAuth();
9 const [tokenValue, setTokenValue] = useState("");
10 const [apiKey, setApiKey] = useState("");
11 // const [invalid, setInvalid] = useState(""); // TODO
12
13 const handleSubmit = (e) => {
14 e.preventDefault();
15 authenticate(tokenValue, apiKey);
16 }
17
36 >
37 <div>
38 <label htmlFor="valtown-token" className="label">Val Town API Token</label>
39 <input
40 type="password"
48 </div>
49 <div>
50 <label htmlFor="anthropic-api-key" className="label">Anthropic API Key</label>
51 <input
52 type="password"
53 id="anthropic-api-key"
54 name="anthropic-key"
55 value={apiKey}
56 onChange={e => {
57 setApiKey(e.target.value);
58 }}
59 />
11app.get("*", async (c, next) => {
12 const path = c.req.path;
13 if (path.startsWith("/api/") || c.req.header("Accept")?.includes("application/json")) {
14 return next();
15 }
21});
22
23app.route("/api", backend);
24app.get("/frontend/*", c => {
25 return serveFile(c.req.path, import.meta.url);
48 </h2>
49 <ol>
50 <li>Login with your Val Town API token</li>
51 <li>Add your Anthropic API key</li>
52 <li>Select a project to work on</li>
53 <li>Chat with Claude about your code</li>
86 </div>
87 <h3>Cost Tracking</h3>
88 <p>See estimated API usage costs for each interaction</p>
89 </div>
90 </section>
99 <ul>
100 <li>React frontend with TypeScript</li>
101 <li>Hono API server backend</li>
102 <li>Web Audio API for sound notifications</li>
103 <li>AI SDK for Claude integration</li>
104 </ul>
105 <p >
106 The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
107 </p>
108 <div >
63 refetch: () => void;
64}) {
65 const { token, anthropicApiKey } = useAuth();
66 const [images, setImages] = useState<(string|null)[]>([]);
67 const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
81 project,
82 branchId,
83 anthropicApiKey,
84 bearerToken: token,
85 selectedFiles,
12app.get("/frontend/**/*", c => serveFile(c.req.path, import.meta.url));
13
14// Add your API routes here
15// app.get("/api/data", c => c.json({ hello: "world" }));
16
17// Unwrap and rethrow Hono errors as the original error
83We didn't. We left them where they are, and proxy to them.
84
85Writing a proxy in Val Town (or any functions platform with the ['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/)) is a delight:
86
87```ts
82 // if we wanted to create a /lastUpdatedAt route,
83 // which would let us pass a val town bearer token, we could do that here
84 // gives us 10k API requests per minute instead of 1k
85 // and would work with private projects
86
