Val Town Code SearchReturn to Val Town

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

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

8  const fetchBalance = async () => {
9    try {
10      const response = await fetch("/api/credit-balance");
11      if (response.ok) {
12        const data = await response.json();

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

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
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`

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