\n \n \n \n\n",[119,109],"ae7e6980c96d404736f1fdbb46f9bc200f3ac08c4f30d0fd7e7cb9071acacf75","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[119,109],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":143,"_13":133,"_81":144,"_83":145,"_84":33,"_85":146,"_87":26,"_34":147,"_40":148,"_89":138,"_91":149,"_66":48,"_93":-5,"_94":-7,"_74":150,"_96":151},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":20,"_87":26,"_34":136,"_40":137,"_89":138,"_91":139,"_66":48,"_93":-5,"_94":-7,"_74":140,"_96":141},"57517c28-1ac2-47bb-b8af-76bae89ba6e1","App.tsx","019fa953-1906-7388-b79f-0b9be7e35aa2","019fa953-1906-7388-b79f-12a297603701",["D",1785252901601],7,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { ChatPanel } from \"./ChatPanel.tsx\";\nimport { CodePanel } from \"./CodePanel.tsx\";\nimport { PreviewPanel } from \"./PreviewPanel.tsx\";\nimport type { PreviewStream } from \"./PreviewPanel.tsx\";\n\nexport interface Summary {\n model: string;\n provider: string;\n completionTokens: number;\n promptTokens: number;\n cost: number;\n ttftMs: number;\n totalMs: number;\n tokensPerSecond: number;\n roundTripMs: number;\n}\n\nexport interface GenerationRun {\n kind: \"run\";\n id: string;\n model: string;\n summary?: Summary;\n error?: string;\n}\n\nexport type FeedItem =\n | { kind: \"user\"; text: string }\n | GenerationRun;\n\nexport interface ModelOption {\n id: string;\n name: string;\n}\n\nexport function App() {\n const [feed, setFeed] = useState([]);\n // Follow-ups extend the running spec and regenerate the full page.\n const [instructions, setInstructions] = useState([]);\n const [model, setModel] = useState(\"\");\n const [defaults, setDefaults] = useState([]);\n const [models, setModels] = useState([]);\n const [code, setCode] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const previewRef = useRef(null);\n\n useEffect(() => {\n fetch(\"/api/models\")\n .then((r) => r.json())\n .then((d) => {\n setDefaults(d.defaults ?? []);\n setModels(d.models ?? []);\n setModel((current) => current || d.defaults?.[0] || \"\");\n })\n .catch(() => {});\n }, []);\n\n async function send(instruction: string) {\n if (loading || !model.trim()) return;\n const next = [...instructions, instruction];\n const runId = crypto.randomUUID();\n\n setLoading(true);\n setInstructions(next);\n setCode(\"\");\n setFeed((prev) => [\n ...prev,\n { kind: \"user\", text: instruction },\n { kind: \"run\", id: runId, model: model.trim() },\n ]);\n\n const updateRun = (update: (run: GenerationRun) => GenerationRun) => {\n setFeed((prev) => prev.map((item) => item.kind === \"run\" && item.id === runId ? update(item) : item));\n };\n const startedAt = performance.now();\n // The preview streams into the iframe via document.write — no refreshes.\n // Hold back an opening code fence so it never renders as page text.\n let acc = \"\";\n let pending = \"\";\n let previewStarted = false;\n\n const pushPreview = (text: string) => {\n pending += text;\n if (!previewStarted) {\n if (pending.startsWith(\"`\")) {\n const nl = pending.indexOf(\"\\n\");\n if (nl === -1) return; // fence line still incomplete\n pending = pending.slice(nl + 1);\n }\n previewRef.current?.start();\n previewStarted = true;\n }\n previewRef.current?.write(pending);\n pending = \"\";\n };\n\n try {\n const res = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ instructions: next, model: model.trim() }),\n });\n\n if (!res.ok || !res.body) {\n const err = await res.json().catch(() => ({}));\n throw new Error(err?.error ?? `Request failed (${res.status})`);\n }\n\n const reader = res.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n\n const frames = buffer.split(\"\\n\\n\");\n buffer = frames.pop() ?? \"\";\n\n for (const frame of frames) {\n const line = frame.split(\"\\n\").find((l) => l.startsWith(\"data:\"));\n if (!line) continue;\n const event = JSON.parse(line.slice(5).trim());\n\n switch (event.type) {\n case \"delta\": {\n acc += event.text;\n setCode(acc);\n pushPreview(event.text);\n break;\n }\n\n case \"done\": {\n const roundTripMs = performance.now() - startedAt;\n setCode(event.html);\n if (!previewStarted) {\n previewRef.current?.start();\n previewRef.current?.write(event.html);\n }\n previewRef.current?.finish();\n updateRun((run) => ({ ...run, summary: { ...event.stats, roundTripMs } }));\n break;\n }\n\n case \"error\":\n throw new Error(event.message);\n }\n }\n }\n } catch (err) {\n const message = err instanceof Error ? err.message : String(err);\n updateRun((run) => ({ ...run, error: message }));\n setInstructions(instructions);\n } finally {\n setLoading(false);\n }\n }\n\n function reset() {\n setFeed([]);\n setInstructions([]);\n setCode(\"\");\n previewRef.current?.start();\n previewRef.current?.finish();\n }\n\n return (\n

\n \n \n \n

\n );\n}\n",[119,142,133],"04e7f768c27b5ac038bb03bb47e9e6741add51689a535b3c0b17712aae47c6af","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[119,142,133],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":162,"_13":152,"_81":163,"_83":-5,"_84":33,"_85":60,"_87":48,"_34":164,"_40":165,"_89":115,"_91":166,"_66":48,"_93":-5,"_94":-7,"_74":167,"_96":168},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_87":26,"_34":158,"_40":114,"_89":115,"_91":159,"_66":48,"_93":-5,"_94":-7,"_74":160,"_96":161},"ace9e6b2-df29-4893-b9d5-1a3dd54e24a0","019fa953-1907-764b-93b8-939e3947808c",10,["D",1785252359460],"# OpenRouter Coder\n\nPick any model on [OpenRouter](https://openrouter.ai/models) and watch it code a\nweb page live — with measured tokens/second, time-to-first-token, and exact cost\nper generation.\n\nSibling of [kimi-coder](https://www.val.town/x/stevekrouse/kimi-coder), which is\npinned to Kimi K3 on Modal.\n\n## How it works\n\n- `index.ts` — Hono server: streams `/api/generate` as server-sent events; `/api/models` proxies OpenRouter's model catalog (cached) to power the typeahead\n- `openrouter.ts` — one streaming chat completion with `provider: {sort: \"throughput\"}` (fastest host) and `reasoning: {enabled: false}` (raw codegen speed, no thinking)\n- `frontend/` — React chat + model picker (native datalist typeahead over all ~340 models) + code stream + live preview\n\n## Remix it\n\n1. [Remix this val](https://www.val.town/x/stevekrouse/openrouter-coder)\n2. Get an API key at [openrouter.ai/keys](https://openrouter.ai/settings/keys), then:\n\n👉 Add OPENROUTER_API_KEY here: https://www.val.town/x/stevekrouse/openrouter-coder/environment-variables?key=OPENROUTER_API_KEY\n",[152],"fc134b81945298e8a57d99afc792a6c629fcac3bd8f9daa2d9fb018246ba2184","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# 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[\"index.html\"]\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 index.html ← HTML shell (loads Twind + React)\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/index.html`** loads Twind and the 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",[152],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":170,"_76":171,"_78":-7},"frontend/components/Counter.tsx",{"_32":172,"_13":173,"_81":174,"_83":145,"_84":33,"_85":175,"_87":26,"_34":176,"_40":177,"_89":138,"_91":178,"_66":48,"_93":-5,"_94":-7,"_74":179,"_96":180},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\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",[119,142,173],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":213,"_76":-7,"_78":214},{"_74":204,"_76":-7,"_78":205},{"_74":194,"_76":-7,"_78":195},{"_74":185,"_76":-7,"_78":186},"openrouter.ts",{"_32":187,"_13":185,"_81":188,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":189,"_40":190,"_89":138,"_91":191,"_66":48,"_93":-5,"_94":-7,"_74":192,"_96":193},"21b45bfd-de0d-4949-bcd5-e6236f0d0a4e","62f97856-8a98-11f1-ae20-1607ee4eb77e",["D",1785253391115],6,"const ENDPOINT = \"https://openrouter.ai/api/v1/chat/completions\";\nconst MAX_TOKENS = 8192;\n\n// Shown as one-click defaults in the UI; any OpenRouter slug works, with an\n// optional \"@provider-tag\" suffix to pin a specific serving endpoint.\nexport const DEFAULT_MODELS = [\n \"moonshotai/kimi-k3@fireworks/fast\",\n \"anthropic/claude-opus-5-fast\",\n \"openai/gpt-5.6-luna\",\n \"google/gemini-3.6-flash\",\n \"z-ai/glm-5.2\",\n \"x-ai/grok-4.5\",\n];\n\nconst SYSTEM = `You write one complete HTML document, streamed top-to-bottom into a live browser.\n- Output raw HTML only: no prose, no code fences, no explanation.\n- Start with and end with , then stop.\n- In , include exactly this stylesheet setup: \n- Style everything with Tailwind utility classes (arbitrary values like h-[40%] are fine). No

Compare

Mergestevekrouse/mainintotemplates/main

README.md+14-56

frontend/components/App.tsx+178-7

frontend/index.html+23-6

Hindex.ts+73-4

frontend/components/ChatPanel.tsx+244-0

frontend/components/CodePanel.tsx+67-0

frontend/components/PreviewPanel.tsx+71-0

openrouter.ts+217-0

frontend/components/Counter.tsx+0-18