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
24 user_id = ?
25 AND timestamp > ?
26 AND our_api_token = 1
27 `,
28 [userId, new Date().getTime() - 24 * 60 * 60 * 1000],
113 branch_id,
114 model,
115 our_api_token,
116 num_images,
117}: {
120 branch_id: string;
121 model: string;
122 our_api_token: boolean;
123 num_images: number;
124}) {
132 branch_id,
133 model,
134 our_api_token,
135 num_images
136 ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
143 branch_id,
144 model,
145 our_api_token ? 1 : 0,
146 num_images,
147 ],
41);
42
43// token middleware for API requests
44app.all("/api/*", async (c, next) => {
45 const sessionCookie = getCookie(c, "_session");
46 if (!sessionCookie) {
52});
53
54app.route("/api", backend);
55
56app.get("/frontend/*", (c) => {
