Val Town Code SearchReturn to Val Town

1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/projects-loader";
4
5export function useProjects() {

1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/create-project";
4
5export function useCreateProject() {

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("")}