Val Town Code SearchReturn to Val Town

17  project,
18  branchId,
19  // anthropicApiKey,
20  // bearerToken,
21  selectedFiles,
39    status,
40  } = useChat({
41    api: "/api/send-message",
42    body: {
43      project,

1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/project-branches";
4
5export function useBranches (projectId: string) {

18  finish_reason?: string;
19  num_images?: number;
20  our_api_token: boolean;
21}
22
129            </div>
130            <div class="card-item">
131              <strong>Our API:</strong> ${formatBoolean(usage.our_api_token)}
132            </div>
133          </div>

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:
158- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
159- **Storage:** DO NOT use the Deno KV module for storage
160- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
161- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified. wttr.in is a good backup.
162- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
163- **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
164- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys
165- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
166- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
201### Backend (Hono) Best Practices
202
203- Hono is the recommended API framework
204- Main entry point should be `backend/index.ts`
205- Do NOT use Hono serveStatic middleware
226  });
227  ```
228- Create RESTful API routes for CRUD operations
229- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
230```ts
261   - For files in the project, use `readFile` helpers
262
2635. **API Design:**
264   - `fetch` handler is the entry point for HTTP vals
265   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

8
9const stripe = new Stripe(Deno.env.get(getEnvVarName("STRIPE_SECRET_KEY")) as string, {
10  apiVersion: "2024-06-20",
11});
12
51      // const paymentIntent: Stripe.PaymentIntent = await stripe.paymentIntents.retrieve(session.client_reference_id);
52
53      const response = await fetch(`https://api.stripe.com/v1/payment_intents/${session.client_reference_id}`, {
54        method: "GET",
55        headers: {

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;

50  } = await c.req.json();
51
52  const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
53
54  if (await hasInsufficientCredits({ bearerToken })) {
66
67  const rowid = await startTrackingUsage({
68    our_api_token: true,
69    bearerToken,
70    branch_id: branchId,
74  });
75
76  const anthropic = createAnthropic({ apiKey });
77  let tracedModel = anthropic(model); 
78  
79  if (Deno.env.get("POSTHOG_PROJECT_API_KEY")) {
80    const phClient = new PostHog(Deno.env.get("POSTHOG_PROJECT_API_KEY"), {
81      host: "https://us.i.posthog.com",
82    });

20  finish_reason?: string;
21  num_images?: number;
22  our_api_token: boolean;
23}
24
45      finish_reason TEXT,
46      num_images INTEGER,
47      our_api_token INTEGER NOT NULL,
48      finish_timestamp INTEGER
49    )`,

17  finish_reason: string | null;
18  num_images: number | null;
19  our_api_token: number;
20}
21
69              <th>Finish</th>
70              <th>Images</th>
71              <th>Our API</th>
72            </tr>
73          </thead>
88                <td>${row.finish_reason || '-'}</td>
89                <td>${formatNumber(row.num_images)}</td>
90                <td>${formatBoolean(row.our_api_token)}</td>
91              </tr>
92            `).join("")}

17Townie is fully open-source and itself runs on Val Town. Pull requests welcome!
18
19To get Townie running in your Val Town account, click the **Remix** button and then add your ANTHROPIC_API_KEY. You can leave all the other environment variables blank.
20
21Authentication in Townie is handled via Val Town Oauth. However, we have not yet opened up our OAuth to anyone else, which currently makes it very awkward to use your own Townie. Here is a temporary workaround: