Val Town Code SearchReturn to Val Town

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

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) {

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
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
200### Backend (Hono) Best Practices
201
202- Hono is the recommended API framework
203- Main entry point should be `backend/index.ts`
204- Do NOT use Hono serveStatic middleware
225  });
226  ```
227- Create RESTful API routes for CRUD operations
228- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
229  ```ts
262   - For files in the project, use `readFile` helpers
263
2645. **API Design:**
265   - `fetch` handler is the entry point for HTTP vals
266   - 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;

28  }
29
30  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
31
32  // do we want to allow user-provided tokens still
33  const apiKey = anthropicApiKey || Deno.env.get("ANTHROPIC_API_KEY");
34  const our_api_token = apiKey === Deno.env.get("ANTHROPIC_API_KEY");
35
36  if (our_api_token) {
37    if (await overLimit(bearerToken)) {
38      const user = await getUser(bearerToken);
59
60  const rowid = await startTrackingUsage({
61    our_api_token,
62    bearerToken, // will look up the userId from this
63    branch_id: branchId,
68
69  // Initialize PostHog client
70  const projectApiKey = Deno.env.get("POSTHOG_PROJECT_API_KEY");
71  
72  let tracedModel;
73  
74  if (projectApiKey) {
75    const phClient = new PostHog(projectApiKey, { 
76      host: "https://us.i.posthog.com" 
77    });
84    const traceId = `townie_${rowid}_${Date.now()}`;
85
86    const anthropic = createAnthropic({ apiKey });
87    
88    // Wrap the Anthropic model with PostHog tracing
94        townie_branch_id: branchId,
95        townie_usage_id: rowid,
96        townie_our_api_token: our_api_token,
97        townie_num_images: images?.length || 0,
98        townie_selected_files_count: selectedFiles?.length || 0,
107  } else {
108    // Fallback to regular Anthropic call if PostHog is not configured
109    const anthropic = createAnthropic({ apiKey });
110    tracedModel = anthropic(model);
111  }

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

17  finish_reason: string | null;
18  num_images: number | null;
19  our_api_token: number;
20}
21
57        
58        // Fetch the inference calls data
59        fetch('/api/inference-calls?usage_id=' + usageId)
60          .then(response => response.json())
61          .then(data => {
192              <th>Finish</th>
193              <th>Images</th>
194              <th>Our API</th>
195            </tr>
196          </thead>
216                <td>${row.finish_reason || '-'}</td>
217                <td>${formatNumber(row.num_images)}</td>
218                <td>${formatBoolean(row.our_api_token)}</td>
219              </tr>
220            `).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:

1# Usage Dashboard
2
3A dashboard for monitoring API usage and inference calls.
4
5## Features
20  index.ts                 # Main entry point and routing
21  auth.ts                  # Authentication logic
22  /api/
23    index.ts              # API request handler
24    requests.ts           # API endpoints for requests data
25    inference-calls.ts    # API endpoints for inference calls
26    user-summary.ts       # API endpoints for user summary data
27  /views/
28    layout.ts             # Common layout template
54   - Links back to the associated request
55
56### API Endpoints
57
58- `/api/requests` - Get paginated requests
59- `/api/requests?usage_id=123` - Get a specific request
60- `/api/inference-calls` - Get paginated inference calls
61- `/api/inference-calls?usage_id=123` - Get inference calls for a specific request
62- `/api/user-summary` - Get user summary data
63
64## Debugging