Val Town Code SearchReturn to Val Town

13- Generate code in TypeScript or TSX
14- Add appropriate TypeScript types and interfaces for all data structures
15- Prefer official SDKs or libraries than writing API calls directly
16- Ask the user to supply API or library documentation if you are at all unsure about it
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
23### 1. HTTP Trigger
24
25- Create web APIs and endpoints
26- Handle HTTP requests and responses
27- Example structure:
167However, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.
168If you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page
169or by making an API request for it.
170
171## Val Town Platform Specifics
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
178- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
179- **View Source:** Add a view source link by importing & using `import.meta.url.replace("ems.sh", "val.town)"` (or passing this data to the client) and include `target="_top"` attribute
180- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
181- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context
182- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys
183- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
184- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
218### Backend (Hono) Best Practices
219
220- Hono is the recommended API framework
221- Main entry point should be `backend/index.ts`
222- **Static asset serving:** Use the utility functions to read and serve project files:
242  });
243  ```
244- Create RESTful API routes for CRUD operations
245- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
246  ```ts
279   - For files in the project, use `readFile` helpers
280
2815. **API Design:**
282   - `fetch` handler is the entry point for HTTP vals
283   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

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

9- **File Browser**: Select specific files to include in the context window for more focused AI assistance
10- **Branch Management**: View, select, and create branches without leaving the app
11- **Cost Tracking**: See estimated API usage costs for each interaction
12- **Sound Notifications**: Get alerted when Claude finishes responding
13- **Mobile-Friendly**: Works on both desktop and mobile devices
15## How It Works
16
171. **Login**: Authenticate with your Val Town API token and Anthropic API key
182. **Select a Project**: Choose which Val Town project you want to work on
193. **Select Files**: Browse your project files and select which ones to include in the context window
25### Prerequisites
26
27- A Val Town account with API access
28- An Anthropic API key (Claude 3.7 Sonnet)
29
30### Setup
31
321. Visit the OpenTownie app
332. Enter your Val Town API token (with `projects:write` and `users:read` permissions)
343. Enter your Anthropic API key
354. Click "Login" to access your projects
36
47OpenTownie is built with:
48- React frontend with TypeScript
49- Hono API server backend
50- Tailwind CSS for styling
51- Web Audio API for sound notifications
52- AI SDK for Claude integration
53
54The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
55
56## Privacy & Security
57
58- Your Val Town API token and Anthropic API key are stored locally in your browser
59- No data is stored on our servers
60- All communication with the APIs is done directly from your browser

10
11async function loader({ bearerToken }: { bearerToken: string }) {
12  const data = await (await fetch("/api/projects-loader", {
13    headers: {
14      "Authorization": "Bearer " + bearerToken,

125              onChange={handlePathChange}
126              className="px-2 py-1 text-sm w-32 md:w-40"
127              placeholder="Path (e.g., /api/data)"
128            />
129            <button

4export function Login() {
5  const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
6  const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
7
8  return (
11        <div className="text-center mb-8">
12          <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2 tracking-tight">Login to OpenTownie</h2>
13          <p className="text-sm sm:text-base text-gray-600 mb-4">Enter your API keys to get started</p>
14        </div>
15
20                <a
21                  target="_blank"
22                  href="https://www.val.town/settings/api"
23                  className="text-indigo-600 hover:text-indigo-800 font-medium flex items-center transition-colors duration-200"
24                >
25                  Val Town API Token
26                  <svg
27                    xmlns="http://www.w3.org/2000/svg"
78            <label className="block text-sm font-medium text-gray-700">
79              <div className="flex items-center mb-1">
80                <span>Anthropic API Key</span>
81                <a
82                  href="https://console.anthropic.com/settings/keys"
91              <input
92                type="password"
93                value={anthropicApiKey}
94                onChange={(e: any) => setAnthropicApiKey(e.target.value)}
95                placeholder="sk-ant-xxxxx"
96                autoComplete="off"
124
125          <div className="text-center text-xs text-gray-500 mt-6 bg-gray-50 p-3 rounded-lg">
126            Your API keys are stored locally in your browser and never stored on our servers.
127          </div>
128        </div>

10app.get("*", async (c, next) => {
11  const path = c.req.path;
12  if (path.startsWith("/api/") || c.req.header("Accept")?.includes("application/json")) {
13    return next();
14  }
20});
21
22app.route("/api", backend);
23app.get("/frontend/*", c => {
24  return serveFile(c.req.path, import.meta.url);

41                </h2>
42                <ol className="list-decimal pl-5 space-y-2 text-gray-700">
43                  <li>Login with your Val Town API token</li>
44                  <li>Add your Anthropic API key</li>
45                  <li>Select a project to work on</li>
46                  <li>Chat with Claude about your code</li>
90              </div>
91              <h3 className="font-medium text-gray-800 mb-1">Cost Tracking</h3>
92              <p className="text-sm text-gray-600">See estimated API usage costs for each interaction</p>
93            </div>
94          </div>
124        <ul className="list-disc pl-5 space-y-1 text-gray-700 mb-4">
125          <li>React frontend with TypeScript</li>
126          <li>Hono API server backend</li>
127          <li>Tailwind CSS for styling</li>
128          <li>Web Audio API for sound notifications</li>
129          <li>AI SDK for Claude integration</li>
130        </ul>
131        <p className="text-gray-700">
132          The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
133        </p>
134      </div>

236    ];
237
238    // Capitalize first letter
239    if (num >= 0 && num <= 10) {
240      const word = words[num];