Val Town Code SearchReturn to Val Town

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **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
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

28      `# Weather Forecast for Bülach - ${currentDate}\n\n![Weather Forecast](data:image/png;base64,${base64Image})`;
29
30    // Send to Capacities API with JSON
31    const capacitiesResponse = await fetch("https://api.capacities.io/save-to-daily-note", {
32      method: "POST",
33      headers: {
43    if (!capacitiesResponse.ok) {
44      const errorText = await capacitiesResponse.text();
45      console.error("Capacities API error:", errorText);
46      return new Response(`Error saving to Capacities: ${capacitiesResponse.status} - ${errorText}`, { status: 500 });
47    }
48
49    const responseText = await capacitiesResponse.text();
50    console.log("Capacities API response:", responseText);
51
52    return new Response("Weather forecast saved to Capacities successfully", { status: 200 });

1const baseUrl = "/neynar-proxy?path=";
2// const baseUrl = "https://api.neynar.com/v2/farcaster/";
3
4export async function fetchNeynarGet(path: string) {
8      "Content-Type": "application/json",
9      "x-neynar-experimental": "true",
10      "x-api-key": "NEYNAR_API_DOCS",
11    },
12  });

1const NEYNAR_API_KEY = Deno.env.get("NEYNAR_API_KEY") || "NEYNAR_API_DOCS";
2const headers = {
3  "Content-Type": "application/json",
4  "x-api-key": NEYNAR_API_KEY,
5};
6
7export const fetchGet = async (path: string) => {
8  return await fetch("https://api.neynar.com/v2/farcaster/" + path, {
9    method: "GET",
10    headers: headers,
13
14export const fetchPost = async (path: string, body: any) => {
15  return await fetch("https://api.neynar.com/v2/farcaster/" + path, {
16    method: "POST",
17    headers: headers,

18  }));
19
20app.get("/api/miniapps", async (c) => {
21  const response = await fetch(`https://client.warpcast.com/v1/top-frameapps?limit=100`).then(r => r.json()).then(r =>
22    r?.result?.frames

91
92const loadEmoji = (code) => {
93  // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`
94  const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`;
95  return fetch(api).then((r) => r.text());
96};
97

38function MiniApps() {
39  const { data: miniapps } = useQuery(["miniapps"], async () => {
40    // return await fetch(`/api/miniapps`).then(r => r.json()).then(r => r);
41    // return await fetchNeynarGet(`frame/catalog?limit=100`).then(r => r.frames);
42    return await fetchNeynarGetPages(`frame/catalog?limit=100`, 4, "frames").then(r => r.frames);
98          onChange={e => setSearch(e.target.value)}
99          placeholder="Search..."
100          autoCapitalize="on"
101          autoCorrect="on"
102          type="text"

89
90async function sendFarcasterNotification(payload: any) {
91  return await fetch("https://api.warpcast.com/v1/frame-notifications", {
92    method: "POST",
93    headers: { "Content-Type": "application/json" },

53You'll need to set up some environment variables to make it run.
54
55- `ANTHROPIC_API_KEY` for LLM calls
56- You'll need to follow [these instructions](https://docs.val.town/integrations/telegram/) to make a telegram bot, and set `TELEGRAM_TOKEN`. You'll also need to get a `TELEGRAM_CHAT_ID` in order to have the bot remember chat contents.
57- For the Google Calendar integration you'll need `GOOGLE_CALENDAR_ACCOUNT_ID` and `GOOGLE_CALENDAR_CALENDAR_ID`. See [these instuctions](https://www.val.town/v/stevekrouse/pipedream) for details.