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- Do NOT use Hono serveStatic middleware
243  });
244  ```
245- Create RESTful API routes for CRUD operations
246- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
247  ```ts
280   - For files in the project, use `readFile` helpers
281
2825. **API Design:**
283   - `fetch` handler is the entry point for HTTP vals
284   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3const ENDPOINT = "/api/project-branches";
4
5export function useBranches (projectId: string) {

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3const PROJECT_ENDPOINT = "/api/project";
4const FILES_ENDPOINT = "/api/project-files";
5
6export function useProject (projectId: string, branchId?: string) {

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3const ENDPOINT = "/api/projects-loader";
4
5export function useProjects () {

20      SUM(num_images) as total_images
21    FROM ${USAGE_TABLE}
22    WHERE our_api_token = 1
23    GROUP BY user_id, username
24    ORDER BY total_price DESC

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3const ENDPOINT = "/api/create-project";
4
5export function useCreateProject () {

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3const ENDPOINT = "/api/create-branch";
4
5export function useCreateBranch (projectId: string) {

14  project,
15  branchId,
16  // anthropicApiKey,
17  // bearerToken,
18  selectedFiles,
33    status,
34  } = useChat({
35    api: "/api/send-message",
36    body: {
37      project,

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;

26  }
27
28  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
29
30  // do we want to allow user-provided tokens still
31  const apiKey = anthropicApiKey || Deno.env.get("ANTHROPIC_API_KEY");
32  const our_api_token = apiKey === Deno.env.get("ANTHROPIC_API_KEY");
33
34  if (our_api_token) {
35    if (await overLimit(bearerToken)) {
36      return Response.json("You have reached the limit of Townie in a 24 hour period.", { status: 403 });
41
42  const rowid = await startTrackingUsage({
43    our_api_token,
44    bearerToken, // will look up the userId from this
45    branch_id: branchId,
50
51  const anthropic = createAnthropic({
52    apiKey,
53  });
54