Val Town Code SearchReturn to Val Town

12## Structure
13
14- `backend/index.ts` - Main Hono server with API routes
15- `frontend/index.html` - Main web interface
16- `frontend/index.tsx` - React frontend application
19## Setup
20
211. **Get your Val Town API token:**
22   - Go to [Val Town Settings](https://www.val.town/settings/api)
23   - Create a new API token
24   - Copy the token
25
262. **Set the environment variable:**
27   - In your Val Town environment, set `VALTOWN_API_TOKEN` to your API token
28   - The app will automatically fetch and display your vals
29

3
4const anthropic = new Anthropic({
5  apiKey: Deno.env.get("ANTHROPIC_API_KEY"),
6});
7

11  /* 1 ▸ Crypto with 7-day sparkline ------------------------------- */
12  const ids = crypto.join(",");
13  const url = `https://api.coingecko.com/api/v3/coins/markets`
14    + `?vs_currency=aud&ids=${ids}&sparkline=true`;
15  const coins = await fetch(url, { headers: { "x-cg-demo-api-key": CG } }).then(r => r.json());
16
17  coins.forEach((c: any) => {

7
8  for (const id of crypto) {
9    const url = `https://api.coingecko.com/api/v3/coins/${id}`
10      + `/market_chart?vs_currency=aud&days=365&interval=daily`;
11

46app.post("/mcp", async (c) => {
47  try {
48    // Extract API token from headers
49    const apiToken = c.req.header("X-Val-Town-Token") ||
50      c.req.header("Authorization")?.replace("Bearer ", "")
51
52    if (!apiToken) {
53      return c.json({
54        jsonrpc: "2.0",
55        error: {code: -32000, message: "Missing API token in X-Val-Town-Token header or Authorization header"},
56        id: null
57      }, 401)
60    // Load remote configuration
61    const config = await loadConfig(true)
62    config.apiToken = apiToken
63
64    console.log({apiToken})
65    // Convert Hono request to Node.js-style req/res
66    const {req, res} = toReqRes(c.req.raw)

12
13      // check the boolean to see if a Glancer has enabled the link to start a cobrowsing session
14      const resp = await fetch("/api/cobrowse/" + window.__DEMO_ID__, {
15        method: "GET",
16        headers: {

104- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
105- **Storage:** DO NOT use the Deno KV module for storage
106- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
107- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
108- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
109- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
110- **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
111- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
112- **Imports:** Use JSR.io, NPM and ESM imports in that order to ensure the latest and stable versions are available to use from official providers.
113- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
194
195### Backend (Hono) Best Practices
196- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
197- Main entry point should be `backend/index.ts`
198- **Static asset serving:** Use the utility functions to read and serve project files:
215  });
216  ```
217- Create RESTful API routes for CRUD operations
218- Be careful with error handling as Hono tends to swallow errors
219- Consider re-throwing errors to see full stack traces:
232- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
233- Follow the React component pattern from the example project
234- Handle API calls properly with proper error catching
235
236### Database Patterns
263   - For files in the project, use `readFile` helpers
264
2655. **API Design:**
266   - `fetch` handler is the entry point for HTTP vals
267   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

16build
17taskNotes
18valTownApi.json
19valtownAPIv2.json
20val-town-mcp-server
21.claude

7- Generate code in TypeScript or TSX
8- Add appropriate TypeScript types and interfaces for all data structures
9- Prefer official SDKs or libraries than writing API calls directly
10- **Never bake in secrets into the code** - always use environment variables
11- Include comments explaining complex logic (avoid commenting obvious operations)
16### 1. HTTP Trigger
17
18- Create web APIs and endpoints
19- Handle HTTP requests and responses
20- Example structure:
164However, it's *extremely important* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.
165If 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
166or by making an API request for it.
167
168## Val Town Platform Specifics
172- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
173- **Storage:** DO NOT use the Deno KV module for storage
174- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
175- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
176- **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
177- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
178- **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
179- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys
180- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
181- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
215### Backend (Hono) Best Practices
216
217- Hono is the recommended API framework
218- Main entry point should be `backend/index.ts`
219- **Static asset serving:** Use the utility functions to read and serve project files:
239  });
240  ```
241- Create RESTful API routes for CRUD operations
242- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
243  ```ts
276   - For files in the project, use `readFile` helpers
277
2785. **API Design:**
279   - `fetch` handler is the entry point for HTTP vals
280   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

26  * DO NOT use the alert(), prompt(), or confirm() methods.
27
28  * If the user's app needs weather data, use open-meteo unless otherwise specified because it doesn't require any API keys.
29
30  * Tastefully add a view source link back to the user's val if there's a natural spot for it. Generate the val source url via `import.meta.url.replace("esm.town", "val.town")`. This link element should include a target="_top" attribute.
38    Val Town's client-side catch script automatically catches client-side errors to aid in debugging.
39
40  * Don't use any environment variables unless strictly necessary. For example use APIs that don't require a key.
41    If you need environment variables use `Deno.env.get('keyname')`
42