`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","01a081d2-72e5-73cc-8bce-f6ab7a7a00ec",["D",1788884447838],"branchVersion","label",[159,160,69],"frontend","components","pulls","branches","forks","envVars",{"_168":26,"_170":26},"connections",{"_168":26,"_169":26},"count","unfilledCount","emptyCount",{"_32":243,"_13":159,"_67":208,"_42":-5,"_34":35,"_156":39,"_183":89,"_36":244,"_38":26,"_70":240,"_152":-5,"_72":24,"_157":-5,"_188":245,"_17":246},{"_32":238,"_13":160,"_67":154,"_42":208,"_34":35,"_156":39,"_183":89,"_36":239,"_38":26,"_70":240,"_152":-5,"_72":24,"_157":-5,"_188":241,"_17":242},{"_32":230,"_13":231,"_67":232,"_42":154,"_34":35,"_156":233,"_183":89,"_36":234,"_38":39,"_70":71,"_152":235,"_72":24,"_157":-5,"_188":236,"_17":237},{"_32":151,"_13":69,"_67":68,"_42":154,"_34":35,"_156":39,"_183":89,"_36":227,"_38":26,"_70":71,"_152":153,"_72":24,"_157":-5,"_188":228,"_17":229},{"_32":220,"_13":221,"_67":222,"_42":208,"_34":35,"_156":39,"_183":89,"_36":223,"_38":26,"_70":21,"_152":224,"_72":24,"_157":-5,"_188":225,"_17":226},{"_32":213,"_13":214,"_67":215,"_42":208,"_34":35,"_156":39,"_183":89,"_36":216,"_38":26,"_70":71,"_152":217,"_72":24,"_157":-5,"_188":218,"_17":219},{"_32":205,"_13":206,"_67":207,"_42":208,"_34":35,"_156":185,"_183":89,"_36":209,"_38":39,"_70":71,"_152":210,"_72":24,"_157":-5,"_188":211,"_17":212},{"_32":198,"_13":199,"_67":200,"_42":-5,"_34":35,"_156":39,"_183":89,"_36":201,"_38":26,"_70":21,"_152":202,"_72":24,"_157":-5,"_188":203,"_17":204},{"_32":191,"_13":192,"_67":193,"_42":-5,"_34":35,"_156":39,"_183":89,"_36":194,"_38":26,"_70":21,"_152":195,"_72":24,"_157":-5,"_188":196,"_17":197},{"_32":181,"_13":182,"_67":87,"_42":-5,"_34":35,"_156":115,"_183":89,"_36":184,"_38":185,"_70":186,"_152":187,"_72":24,"_157":-5,"_188":189,"_17":190},"7e7670bc-1248-41df-a841-5d118106fbdf","index.ts","latest",["D",1788886471047],4,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\nconst DEFAULT_MODEL = \"gpt-5.6-luna\";\nconst MAX_CONTEXT_MESSAGES = 80;\n\ntype ChatMessage = { role: \"user\" | \"assistant\" | \"system\"; content: string };\n\nfunction inferMode(messages: ChatMessage[]): string {\n const text = messages.filter((m) => m.role === \"user\").slice(-3).map((m) => m.content).join(\" \").toLowerCase();\n if (/\\b(teach|learn|explain|lesson|study)\\b/.test(text)) return \"TM\";\n if (/\\b(research|latest|current|sources|paper|compare)\\b/.test(text)) return \"RM\";\n if (/\\b(build|create|make|app|website|api|code|program)\\b/.test(text)) return \"BM\";\n if (/\\b(calculate|equation|integral|derivative|math|solve)\\b/.test(text)) return \"EM\";\n if (/\\b(quick|short|brief|just answer)\\b/.test(text)) return \"FM\";\n if (/\\b(mission|goal|project|plan and execute)\\b/.test(text)) return \"MM\";\n if (/\\b(listen|don't act|dont act)\\b/.test(text)) return \"LM\";\n if (/\\b(private|discreet)\\b/.test(text)) return \"SM\";\n return \"AUTO\";\n}\n\nfunction systemInstructions(mode: string) {\n return `You are NICKO, a capable personal AI assistant and engineering workspace.\\nMode: ${mode}.\\nCore behavior: understand first, reason appropriately, verify important claims, then answer clearly. Never claim an action was completed unless it was actually completed. Distinguish known facts, calculations, inferences, and uncertainty when useful.\\nAUTO behavior: listen to the user's complete request, choose the appropriate mode, answer steadily and naturally, adapt depth to the user's needs, and pause/adapt when the user adds information. Do not expose private chain-of-thought; provide concise reasoning summaries when useful.\\nFor coding/building requests, produce practical implementation plans and code when asked. For math, calculate carefully and verify results. For current facts, use available tools when enabled rather than pretending to have live knowledge.`;\n}\n\nfunction normalizeMessages(value: unknown): ChatMessage[] {\n if (!Array.isArray(value)) return [];\n return value.filter((m): m is ChatMessage =>\n !!m && typeof m === \"object\" &&\n [\"user\", \"assistant\", \"system\"].includes((m as any).role) &&\n typeof (m as any).content === \"string\" && (m as any).content.trim().length > 0\n ).map((m) => ({ role: m.role, content: m.content.trim().slice(0, 30000) }));\n}\n\nfunction sse(data: unknown) {\n return `data: ${JSON.stringify(data)}\\n\\n`;\n}\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/health\", (c) => c.json({\n ok: true,\n name: \"NICKO\",\n version: \"0.3.0\",\n capabilities: [\"chat\", \"auto-mode\", \"memory\", \"streaming\", \"tools-ready\", \"multimodal-ready\", \"agents-ready\"],\n provider: \"OpenAI Responses API\",\n defaultModel: DEFAULT_MODEL,\n}));\n\napp.options(\"/api/respond\", (c) => c.body(null, 204));\napp.options(\"/api/chat\", (c) => c.body(null, 204));\n\napp.post(\"/api/respond\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const messages = normalizeMessages(body.messages);\n if (!messages.length) return c.json({ ok: false, error: \"messages are required\" }, 400);\n\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n if (!apiKey) return c.json({ ok: false, error: \"NICKO AI provider is not configured yet.\", setup: \"Add the server-side OPENAI_API_KEY environment variable in Val Town.\" }, 503);\n\n const model = typeof body.model === \"string\" && body.model.trim() ? body.model.trim() : DEFAULT_MODEL;\n const mode = typeof body.mode === \"string\" && body.mode.trim() ? body.mode.trim().toUpperCase() : inferMode(messages);\n const context = messages.slice(-MAX_CONTEXT_MESSAGES);\n const input = [{ role: \"system\", content: systemInstructions(mode) }, ...context];\n const wantsStream = body.stream !== false;\n\n const response = await fetch(\"https://api.openai.com/v1/responses\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", \"Authorization\": `Bearer ${apiKey}` },\n body: JSON.stringify({ model, input, stream: wantsStream }),\n });\n\n if (!response.ok) {\n const data = await response.json().catch(() => ({}));\n return c.json({ ok: false, error: data?.error?.message ?? \"AI provider request failed.\" }, response.status as any);\n }\n\n if (!wantsStream) {\n const data = await response.json();\n return c.json({ ok: true, reply: data?.output_text ?? \"\", model, mode });\n }\n\n if (!response.body) return c.json({ ok: false, error: \"AI provider returned no stream.\" }, 502);\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n const encoder = new TextEncoder();\n let buffer = \"\";\n\n const stream = new ReadableStream({\n async pull(controller) {\n try {\n const { value, done } = await reader.read();\n if (done) {\n if (buffer.trim()) controller.enqueue(encoder.encode(sse({ raw: buffer })));\n controller.enqueue(encoder.encode(sse({ done: true, model, mode })));\n controller.close();\n return;\n }\n buffer += decoder.decode(value, { stream: true });\n const chunks = buffer.split(\"\\n\\n\");\n buffer = chunks.pop() ?? \"\";\n for (const chunk of chunks) {\n for (const line of chunk.split(\"\\n\")) {\n if (!line.startsWith(\"data: \")) continue;\n const raw = line.slice(6).trim();\n if (!raw || raw === \"[DONE]\") continue;\n try {\n const event = JSON.parse(raw);\n if (event.type === \"response.output_text.delta\" && typeof event.delta === \"string\") {\n controller.enqueue(encoder.encode(sse({ delta: event.delta })));\n } else if (event.type === \"response.failed\") {\n controller.enqueue(encoder.encode(sse({ error: event.response?.error?.message ?? \"Response failed.\" })));\n }\n } catch { /* ignore non-JSON provider lines */ }\n }\n }\n } catch (error) {\n controller.enqueue(encoder.encode(sse({ error: error instanceof Error ? error.message : \"Stream error.\" })));\n controller.close();\n }\n },\n cancel() { reader.cancel(); },\n });\n\n return new Response(stream, { headers: { \"Content-Type\": \"text/event-stream; charset=utf-8\", \"Cache-Control\": \"no-cache\", \"Connection\": \"keep-alive\" } });\n});\n\napp.post(\"/api/chat\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const message = typeof body.message === \"string\" ? body.message.trim() : \"\";\n if (!message) return c.json({ error: \"message is required\" }, 400);\n const messages: ChatMessage[] = [{ role: \"user\", content: message }];\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n if (!apiKey) return c.json({ ok: false, error: \"NICKO AI provider is not configured yet.\", setup: \"Add the server-side OPENAI_API_KEY environment variable in Val Town.\" }, 503);\n const model = typeof body.model === \"string\" && body.model.trim() ? body.model.trim() : DEFAULT_MODEL;\n const mode = inferMode(messages);\n const response = await fetch(\"https://api.openai.com/v1/responses\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\", \"Authorization\": `Bearer ${apiKey}` },\n body: JSON.stringify({ model, input: [{ role: \"system\", content: systemInstructions(mode) }, ...messages] }),\n });\n const data = await response.json();\n if (!response.ok) return c.json({ ok: false, error: data?.error?.message ?? \"AI provider request failed.\" }, response.status as any);\n return c.json({ ok: true, reply: data?.output_text ?? \"\", model, mode, conversationId: body.conversationId ?? crypto.randomUUID() });\n});\n\napp.onError((err) => {\n console.error(err);\n return new Response(JSON.stringify({ ok: false, error: \"NICKO server error.\" }), { status: 500, headers: { \"Content-Type\": \"application/json\" } });\n});\n\nexport default app.fetch;\n","children",[],[182],"60a00836-e676-4344-86ab-4a678a6a3778","README.md","01a081d2-72e5-73cc-8bcf-0e488ac78dc9",["D",1788884447838],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[192],"010ba10b-ae88-40a7-96c3-8f54d2819a21","CHANGELOG.md","01a081d2-72e5-73cc-8bcf-09ba554c75c9",["D",1788884447838],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

History · Counter.tsx