\n \n \n \n\n",[121,112],"c2016ad55895c73fe5e82b9eb62956c9fdf8282bdbe3c2173c198953e937311f","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",[121,112],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":145,"_13":135,"_81":146,"_83":147,"_84":33,"_85":148,"_87":26,"_34":149,"_40":150,"_90":140,"_92":151,"_66":48,"_94":-5,"_96":-7,"_74":152,"_98":153},{"_32":134,"_13":135,"_81":136,"_83":137,"_84":58,"_85":57,"_87":26,"_34":138,"_40":139,"_90":140,"_92":141,"_66":48,"_94":-5,"_96":-7,"_74":142,"_98":143},"6ed99442-4335-44eb-8701-bf67da1554fd","App.tsx","019fa93f-136f-70f6-aad9-d5fddc17eb27","019fa93f-136f-70f6-aad9-de5da1ff8d67",["D",1785252946151],9,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { 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 completionTokens: number;\n promptTokens: 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 summary?: Summary;\n error?: string;\n}\n\nexport type FeedItem =\n | { kind: \"user\"; text: string }\n | GenerationRun;\n\nexport function App() {\n const [feed, setFeed] = useState([]);\n // Follow-ups extend the running spec and regenerate the full page — at\n // ~460 tok/s a full regeneration is fast enough to feel like an edit.\n const [instructions, setInstructions] = useState([]);\n const [code, setCode] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const previewRef = useRef(null);\n\n async function send(instruction: string) {\n if (loading) 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 },\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 }),\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",[121,144,135],"81568b90f650f6548107712dd0b0b60d25296c276d43a946afc12c956037b8a7","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",[121,144,135],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":164,"_13":154,"_81":165,"_83":-5,"_84":33,"_85":60,"_87":48,"_34":166,"_40":167,"_90":117,"_92":168,"_66":48,"_94":-5,"_96":-7,"_74":169,"_98":170},{"_32":157,"_13":154,"_81":158,"_83":-5,"_84":58,"_85":159,"_87":26,"_34":160,"_40":89,"_90":117,"_92":161,"_66":48,"_94":-5,"_96":-7,"_74":162,"_98":163},"929230ee-2263-4af2-9c09-0c6c535382cd","019fa93f-136f-70f6-aad9-f117d288aa07",10,["D",1785251074555],"# Kimi Coder\n\nWatch [Kimi K3](https://modal.com/blog/kimi-k3-by-moonshot-now-available-on-modal) code a\nweb page live at ~460 tokens/second, served by Modal.\n\nDescribe a page, watch the HTML stream in on the left and render live on the right.\nEach follow-up message extends the spec and regenerates the whole page — at this speed\na full regeneration feels like an edit.\n\n## How it works\n\n- `index.ts` — Hono server: serves the frontend and streams `/api/generate` as server-sent events\n- `kimi.ts` — one streaming chat completion against Modal's OpenAI-compatible Kimi K3 endpoint, with reasoning disabled (`chat_template_kwargs: { thinking: false }`) since the demo is about raw codegen speed\n- `frontend/` — React chat + code stream + live preview, with measured tok/s per generation\n\n## Remix it\n\n1. [Remix this val](https://www.val.town/x/stevekrouse/kimi-coder)\n2. Create a Kimi K3 endpoint at [modal.com](https://modal.com/library/moonshot/kimi-k3) and a proxy-auth token, then set the endpoint URL in `kimi.ts` and:\n\n👉 Add MODAL_KEY here: https://www.val.town/x/stevekrouse/kimi-coder/environment-variables?key=MODAL_KEY\n👉 Add MODAL_SECRET here: https://www.val.town/x/stevekrouse/kimi-coder/environment-variables?key=MODAL_SECRET\n",[154],"2a5709e45136980244ef5a84da8afbae5b08b5f35f0639c3792da508c892a4c0","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",[154],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":172,"_76":173,"_78":-7},"frontend/components/Counter.tsx",{"_32":174,"_13":175,"_81":176,"_83":147,"_84":33,"_85":177,"_87":26,"_34":178,"_40":179,"_90":140,"_92":180,"_66":48,"_94":-5,"_96":-7,"_74":181,"_98":182},"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",[121,144,175],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":217,"_76":-7,"_78":218},{"_74":207,"_76":-7,"_78":208},{"_74":197,"_76":-7,"_78":198},{"_74":187,"_76":-7,"_78":188},"kimi.ts",{"_32":189,"_13":187,"_81":190,"_83":-5,"_84":58,"_85":191,"_87":26,"_34":192,"_40":193,"_90":140,"_92":194,"_66":48,"_94":-5,"_96":-7,"_74":195,"_98":196},"c87280ed-d375-455d-9cf3-f086a62d9d91","6d6fb6b8-8a95-11f1-89d4-1607ee4eb77e",18,["D",1785252829763],6,"const ENDPOINT =\n \"https://steve-88677--ep-kimi-k3-server.us-west.modal.direct/v1/chat/completions\";\nconst MODEL = \"moonshotai/Kimi-K3\";\nconst MAX_TOKENS = 8192;\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+15-56

frontend/components/App.tsx+147-7

frontend/index.html+23-6

Hindex.ts+44-4

frontend/components/ChatPanel.tsx+156-0

frontend/components/CodePanel.tsx+67-0

frontend/components/PreviewPanel.tsx+71-0

kimi.ts+164-0

frontend/components/Counter.tsx+0-18