\n \n

No val loaded

\n Log in in the sidebar, click Start talking, and tell\n the AI to \"open my X\" or \"create a new val that does Y\".\n You can also seed it via ?val=handle/name.\n

\n \n

No val loaded

\n Log in in the sidebar, click Start talking, and tell\n the AI to \"open my X\" or \"create a new val that does Y\".\n You can also seed it via ?val=handle/name.\n

| Response,\n>(\n handler: H,\n opts: VoiceEditOptions = {},\n): (req: Request) => Promise {\n return async (req: Request) => {\n const resp = await handler(req);\n return maybeInject(resp, opts);\n };\n}\n\nexport default voiceEdit;\n","label",[149],"650f079c-53c4-11f1-9542-ee650bb23af1","oauth-test.tsx","019e4201-4376-74f8-ae4a-71a9fe9f9fbe",["D",1779223839498],"http","/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n\n return c.html(\n \n \n {session?.user\n ?

Logged in as {session.user.username}

\n : Log in}\n \n ,\n );\n});\n\nexport default oauthMiddleware(app.fetch);\n",[160],"86b7d31a-53c4-11f1-8cfa-ee650bb23af1","main.tsx",2,["D",1779223896398],"import { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport rtc from \"./routes/rtc.ts\";\nimport observer from \"./routes/observer.ts\";\nimport api from \"./routes/api.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\")).links.self.val;\n\nconst app = new Hono();\n\napp.route(\"/rtc\", rtc);\napp.route(\"/observer\", observer);\napp.route(\"/api\", api);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\napp.get(\"/me\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) return c.json({ loggedIn: false });\n return c.json({\n loggedIn: true,\n username: session.user.username,\n profileImageUrl: session.user.links.profileImageUrl,\n });\n});\n\n// Token handoff — included for completeness but the studio is top-level\n// same-origin so cookies work and Bearer is rarely needed.\napp.get(\"/auth/token\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) return c.json({ loggedIn: false }, 401);\n return c.json({\n loggedIn: true,\n username: session.user.username,\n accessToken: session.accessToken,\n });\n});\n\napp.get(\"/\", () => serveFile(\"/frontend/studio.html\", import.meta.url));\napp.get(\"/favicon.ico\", async (c) => {\n const entry = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\"));\n const file = await blob.get(`${entry.name}/favicon.ico`);\n if (!file) return c.text(\"favicon not found\", 404);\n return new Response(file.body, {\n headers: {\n \"Content-Type\": \"image/x-icon\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default oauthMiddleware(\n {\n scopes: [\n \"openid\",\n \"offline_access\",\n \"profile\",\n \"user_r\",\n \"val_rw\",\n \"project_rw\",\n \"blob_rw\",\n \"sqlite_rw\",\n \"telemetry_rw\",\n ],\n },\n app.fetch,\n);\n","talk",[167],"650ee564-53c4-11f1-9542-ee650bb23af1","README.md","019e4201-4376-74f8-ae4a-6b7660c5976c",["D",1779223839498],"# hello-realtime\n\n**Hello Realtime** is a OpenAI Realtime app that supports both WebRTC and SIP\n(telephone) users. You can access the app via WebRTC at\n[hello-realtime.val.run](https://hello-realtime.val.run), or via SIP by calling\n425-800-0042.\n\nThis demo shows off the new SIP API, the new all-in-one WebRTC API, and the new\nserver-side websocket interface.\n\nIf you remix the app, you'll just need to pop in your own `OPENAI_API_KEY` (from\n[platform.openai.com](https://platform.openai.com)), and if you want SIP, the\n`OPENAI_SIGNING_SECRET`.\n\n## Architecture\n\n1. **WebRTC Flow**:\n - Browser connects to frontend\n - creates WebRTC offer\n - `/rtc` endpoint handles SDP negotiation with OpenAI\n - observer established to monitor session\n2. **SIP Flow**:\n - Phone calls triggers webhook\n - `/sip` endpoint verifies webhook and accepts call\n - observer established to monitor session\n\n## API Endpoints\n\n- `GET /` - serves the WebRTC-based app\n- `POST /rtc` - creates a new WebRTC-based Realtime API session\n - Supports optional `model` URL parameter to override the default model\n - Example: `POST /rtc?model=gpt-4o-realtime-preview`\n- `POST /sip` - handles an incoming Realtime API SIP call\n- `POST /observer` - internal endpoint to establish a Realtime API websocket for\n session control\n\n## Project Structure\n\n```\n├── frontend/ \n│ └── index.html # HTML/JS application for WebRTC\n├── main.tsx # Main entrypoint for the val.town app\n└── routes/\n |\n ├── agent.ts # Realtime API session configuration and tools\n ├── observer.ts # Server-side session control for SIP & WebRTC\n ├── rtc.ts # WebRTC session setup\n ├── sip.ts # SIP webhook handling and session setup\n └── utils.ts # Various HTTP helpers\n```\n\n## File Links\n\n- [`frontend/index.html`](./frontend/index.html)\n- [`main.tsx`](./main.tsx)\n- [`routes/agent.ts`](./routes/agent.ts)\n- [`routes/observer.ts`](./routes/observer.ts)\n- [`routes/rtc.ts`](./routes/rtc.ts)\n- [`routes/sip.ts`](./routes/sip.ts)\n- [`routes/utils.ts`](./routes/utils.ts)",[174],"650ee3e8-53c4-11f1-9542-ee650bb23af1","routes","019e4201-4376-74f8-ae4a-64add1b7cf5c",["D",1779223839498],"directory",[180],"64e1839e-53c4-11f1-9542-ee650bb23af1","frontend","019e4201-4376-74f8-ae4a-4d0ad753bc42",["D",1779223839498],[186],"pulls","branches","forks","envVars",{"_197":168,"_199":152},"connections",{"_197":63,"_198":63},"count","unfilledCount","emptyCount",{"_43":185,"_32":186,"_30":187,"_151":-5,"_41":42,"_40":152,"_153":59,"_38":305,"_13":63,"_34":183,"_35":-5,"_24":25,"_157":-5,"_217":306,"_27":307},{"_43":298,"_32":299,"_30":300,"_151":187,"_41":42,"_40":152,"_153":59,"_38":301,"_13":63,"_34":20,"_35":302,"_24":25,"_157":-5,"_217":303,"_27":304},{"_43":291,"_32":292,"_30":293,"_151":187,"_41":42,"_40":152,"_153":59,"_38":294,"_13":63,"_34":155,"_35":295,"_24":25,"_157":-5,"_217":296,"_27":297},{"_43":286,"_32":33,"_30":31,"_151":187,"_41":42,"_40":14,"_153":25,"_38":287,"_13":288,"_34":20,"_35":37,"_24":25,"_157":-5,"_217":289,"_27":290},{"_43":279,"_32":280,"_30":281,"_151":187,"_41":42,"_40":152,"_153":59,"_38":282,"_13":63,"_34":20,"_35":283,"_24":25,"_157":-5,"_217":284,"_27":285},{"_43":179,"_32":180,"_30":181,"_151":-5,"_41":42,"_40":152,"_153":59,"_38":276,"_13":63,"_34":183,"_35":-5,"_24":25,"_157":-5,"_217":277,"_27":278},{"_43":267,"_32":268,"_30":269,"_151":181,"_41":42,"_40":270,"_153":25,"_38":271,"_13":272,"_34":155,"_35":273,"_24":25,"_157":-5,"_217":274,"_27":275},{"_43":258,"_32":259,"_30":260,"_151":181,"_41":42,"_40":261,"_153":25,"_38":262,"_13":263,"_34":155,"_35":264,"_24":25,"_157":-5,"_217":265,"_27":266},{"_43":251,"_32":252,"_30":253,"_151":181,"_41":42,"_40":152,"_153":59,"_38":254,"_13":63,"_34":155,"_35":255,"_24":25,"_157":-5,"_217":256,"_27":257},{"_43":243,"_32":244,"_30":245,"_151":181,"_41":42,"_40":246,"_153":25,"_38":247,"_13":168,"_34":155,"_35":248,"_24":25,"_157":-5,"_217":249,"_27":250},{"_43":236,"_32":237,"_30":238,"_151":181,"_41":42,"_40":152,"_153":59,"_38":239,"_13":63,"_34":155,"_35":240,"_24":25,"_157":-5,"_217":241,"_27":242},{"_43":229,"_32":230,"_30":231,"_151":181,"_41":42,"_40":152,"_153":25,"_38":232,"_13":63,"_34":155,"_35":233,"_24":25,"_157":-5,"_217":234,"_27":235},{"_43":173,"_32":174,"_30":175,"_151":-5,"_41":42,"_40":152,"_153":25,"_38":226,"_13":63,"_34":20,"_35":177,"_24":25,"_157":-5,"_217":227,"_27":228},{"_43":166,"_32":167,"_30":57,"_151":-5,"_41":42,"_40":168,"_153":59,"_38":223,"_13":152,"_34":163,"_35":170,"_24":25,"_157":171,"_217":224,"_27":225},{"_43":159,"_32":160,"_30":161,"_151":-5,"_41":42,"_40":152,"_153":59,"_38":220,"_13":63,"_34":163,"_35":164,"_24":25,"_157":-5,"_217":221,"_27":222},{"_43":148,"_32":149,"_30":150,"_151":-5,"_41":42,"_40":152,"_153":59,"_38":216,"_13":63,"_34":155,"_35":156,"_24":25,"_157":-5,"_217":218,"_27":219},["D",1779223839498],"children",[],[149],["D",1779223839498],[],[160],["D",1779223896398],[],[167],["D",1779223839498],[],[174],"650eda38-53c4-11f1-9542-ee650bb23af1","utils.ts","019e4201-4376-74f8-ae4a-601e8e7c7198",["D",1779223839498],"const REALTIME_BASE_URL = \"https://api.openai.com/v1/realtime\";\nconst OPENAI_API_KEY = Deno.env.get(\"OPENAI_API_KEY\");\nif (!OPENAI_API_KEY) {\n throw new Error(\"🔴 OpenAI API key not configured\");\n}\n\n// Builds the URL for a Realtime API endpoint.\nexport function makeUrl(callId?: string, action?: string) {\n let url = REALTIME_BASE_URL;\n if (!callId) {\n // start call (POST)\n url += \"/calls\";\n } else if (action) {\n // accept, reject, hangup (POST)\n url += `/calls/${callId}/${action}`;\n } else {\n // observer (web socket)\n url += `?call_id=${callId}`;\n }\n return url;\n}\n\n// Builds the headers for a Realtime API endpoint.\nexport function makeHeaders(contentType?: string) {\n const obj: Record = {\n Authorization: `Bearer ${OPENAI_API_KEY}`,\n };\n if (contentType) obj[\"Content-Type\"] = contentType;\n return obj;\n}\n\n// Debug helper for printing Realtime API errors.\nexport async function getErrorText(resp: Response) {\n const errBody = await resp.text().catch(() => \"\");\n return `${resp.status} ${resp.statusText}: ${errBody}`;\n}",[],[180,230],"64e1bd14-53c4-11f1-9542-ee650bb23af1","sip.ts","019e4201-4376-74f8-ae4a-5d848c890de0",["D",1779223839498],"import { Hono } from \"npm:hono\";\nimport { Webhook } from \"npm:svix\";\nimport { makeSession } from \"./agent.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst sip = new Hono();\n\n// POST /sip : webhook endpoint\nsip.post(\"/\", async (c) => {\n // Verify the webhook.\n const OPENAI_SIGNING_SECRET = Deno.env.get(\"OPENAI_SIGNING_SECRET\");\n if (!OPENAI_SIGNING_SECRET) {\n console.error(\"🔴 webhook secret not configured\");\n return c.text(\"Internal error\", 500);\n }\n const webhook = new Webhook(OPENAI_SIGNING_SECRET);\n const bodyStr = await c.req.text();\n let callId: string | undefined;\n let toNumber: string | undefined;\n try {\n const headers = Object.fromEntries(c.req.raw.headers.entries());\n const payload: any = webhook.verify(bodyStr, headers);\n callId = payload.data.call_id;\n toNumber = getToNumber(payload.data.sip_headers);\n const fromNumber = getFromNumber(payload.data.sip_headers);\n console.log(\"✅ verified webhook:\", callId, fromNumber, toNumber);\n } catch (error) {\n console.error(`🔴 verify failed: ${error}`);\n return c.text(\"Invalid signature\", 401);\n }\n\n // Accept the call. SIP calls come from phone users — there's no logged-in\n // Val Town user, so we don't attach an MCP token. The agent will run with\n // only the built-in `display_text` function tool (and no val.town MCP).\n const model = getModelForNumber(toNumber);\n const url = makeUrl(callId, \"accept\");\n const headers = makeHeaders(\"application/json\");\n const body = JSON.stringify(makeSession(model));\n const opts = { method: \"POST\", headers, body };\n const resp = await fetch(url, opts);\n if (!resp.ok) {\n console.error(`🔴 accept failed: ${await getErrorText(resp)}`);\n return c.text(\"Internal error\", 500);\n }\n console.log(\"✅ call accepted:\", callId);\n\n // Kick off observer in the background (fire-and-forget).\n const selfUrl = new URL(c.req.url);\n fetch(`${selfUrl.origin}/observer/${callId}`, { method: \"POST\" })\n .catch((e) => console.error(\"observer start failed:\", e));\n\n return c.newResponse(null);\n});\n\nconst getToNumber = headers => getNumberFromSipHeader(headers, \"to\");\nconst getFromNumber = headers => getNumberFromSipHeader(headers, \"from\");\n\nfunction getNumberFromSipHeader(headers: any, name: string) {\n const header = getSipHeader(headers, name);\n const match = header?.match(/sip:\\+?(\\d+)@/);\n return match ? `+${match[1]}` : undefined;\n}\n\nfunction getSipHeader(headers: any, name: string) {\n return headers.find((h) => h.name.toLowerCase() === name)?.value;\n}\n\nfunction getModelForNumber(number: string) {\n const map = { \"+14258000074\": \"gpt-realtime-mini\" };\n return map[number];\n}\n\nexport default sip;",[],[180,237],"70f01ede-546e-11f1-b2cb-ee650bb23af1","rtc.ts","019e4201-4376-74f8-ae4a-5bd4e8770c3d",12,["D",1779296874299],"import { Hono } from \"npm:hono\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { makeSession } from \"./agent.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst rtc = new Hono();\n\n// POST /rtc?val= : create a new voice-edit-studio call.\n// `val` is optional — if omitted, the AI will start without an initial val\n// and the user can ask it to load one via the load_val tool.\nrtc.post(\"/\", async (c) => {\n let accessToken: string | undefined;\n let username = \"anonymous\";\n const session = await getOAuthUserData(c.req.raw);\n if (session) {\n accessToken = session.accessToken;\n username = session.user.username;\n } else {\n const auth = c.req.header(\"Authorization\") ||\n c.req.header(\"authorization\");\n if (auth && auth.startsWith(\"Bearer \")) {\n accessToken = auth.slice(7).trim();\n }\n }\n if (!accessToken) {\n return c.text(\"Unauthorized — log in first\", 401);\n }\n\n const model = c.req.query(\"model\");\n const val = c.req.query(\"val\") || undefined;\n if (\n val && !/^[a-zA-Z][a-zA-Z0-9_-]{0,30}\\/[a-zA-Z][a-zA-Z0-9_-]{0,47}$/.test(val)\n ) {\n return c.text(`Invalid val identifier \"${val}\". Expected handle/name.`, 400);\n }\n\n console.log(\n `🔑 starting studio call for @${username}${val ? ` → ${val}` : \" (no initial val)\"}`,\n );\n\n const fd = new FormData();\n fd.set(\"sdp\", await c.req.text());\n fd.set(\n \"session\",\n JSON.stringify(makeSession(model, false, accessToken, val, username)),\n );\n const opts = { method: \"POST\", headers: makeHeaders(), body: fd };\n const resp = await fetch(makeUrl(), opts);\n if (!resp.ok) {\n console.error(`🔴 start call failed: ${await getErrorText(resp)}`);\n return c.text(\"Internal error\", 500);\n }\n\n const contentType = resp.headers.get(\"Content-Type\");\n const location = resp.headers.get(\"Location\");\n const callId = location?.split(\"/\").pop();\n console.log(\"✅ call created:\", callId);\n\n // Kick off observer in the background (fire-and-forget).\n const selfUrl = new URL(c.req.url);\n fetch(`${selfUrl.origin}/observer/${callId}`, { method: \"POST\" })\n .catch((e) => console.error(\"observer start failed:\", e));\n\n return c.newResponse(resp.body, {\n headers: {\n \"Content-Type\": contentType,\n \"Location\": location,\n },\n });\n});\n\nexport default rtc;\n",[],[180,244],"64e19b0e-53c4-11f1-9542-ee650bb23af1","observer.ts","019e4201-4376-74f8-ae4a-55e75c64aeee",["D",1779223839498],"import { Hono } from \"npm:hono\";\nimport WebSocket from \"npm:ws\";\nimport { createHandler } from \"./agent.ts\";\nimport { makeHeaders, makeUrl } from \"./utils.ts\";\n\nexport interface ObserverHandler {\n onInit(): void;\n onTool(name: string, args: any): void;\n onMcpCallCompleted(name: string, output: string | null): void;\n onOutputAudioStarted(): void;\n onOutputAudioStopped(): void;\n onOutputAudioCleared(): void;\n}\n\nexport class ObserverClient {\n private ws: WebSocket;\n private closeResolve: () => void;\n private closePromise: Promise;\n private handler: ObserverHandler;\n\n constructor(callId: string) {\n const url = makeUrl(callId);\n this.ws = new WebSocket(url, { headers: makeHeaders() });\n this.ws.on(\"open\", () => this.handleOpen());\n this.ws.on(\"message\", (data) => this.handleMessage(JSON.parse(data)));\n this.ws.on(\"error\", (err) => this.handleError(err));\n this.ws.on(\"close\", (ev) => this.handleClose(ev));\n this.closePromise = new Promise((resolve) =>\n this.closeResolve = resolve\n );\n this.handler = createHandler(this, callId);\n }\n createResponse() {\n this.sendMessage({ type: \"response.create\" });\n }\n async waitForClose() {\n await this.closePromise;\n }\n private sendMessage(message: any) {\n this.ws.send(JSON.stringify(message));\n }\n private handleOpen() {\n console.log(\"✅ websocket connected\");\n this.handler.onInit();\n }\n private async handleMessage(message: any) {\n if (!message.type.endsWith(\".delta\")) { // ignore verbose messages\n console.log(message);\n }\n switch (message.type) {\n case \"response.function_call_arguments.done\":\n this.handler.onTool(message.name, message.arguments);\n break;\n case \"response.output_item.done\":\n if (message.item?.type === \"mcp_call\") {\n this.handler.onMcpCallCompleted(message.item.name, message.item.output);\n }\n break;\n case \"output_audio_buffer.started\":\n this.handler.onOutputAudioStarted();\n break;\n case \"output_audio_buffer.stopped\":\n this.handler.onOutputAudioStopped();\n break;\n case \"output_audio_buffer.cleared\":\n this.handler.onOutputAudioCleared();\n break;\n }\n }\n private handleError(err: Error) {\n console.error(`🔴 websocket failed: ${err.message}`);\n this.closeResolve();\n }\n private handleClose(e: Event) {\n console.log(`websocket closed: ${e}`);\n this.closeResolve();\n }\n}\n\nconst observer = new Hono();\n\n// POST /observer/:callId : self-connect to establish a web socket\nobserver.post(\"/:callId\", async (c) => {\n const callId = c.req.param(\"callId\");\n const client = new ObserverClient(callId);\n await client.waitForClose();\n return c.newResponse(null);\n});\n\nexport default observer;",[],[180,252],"04f603f8-5471-11f1-ad20-ee650bb23af1","api.ts","94c01968-53c4-11f1-a841-ee650bb23af1",21,["D",1779297981592],5,"import { Hono } from \"npm:hono\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst api = new Hono();\nconst VT = \"https://api.val.town\";\n\nasync function getAccessToken(c: any): Promise {\n const session = await getOAuthUserData(c.req.raw);\n if (session) return session.accessToken;\n const auth = c.req.header(\"Authorization\") ||\n c.req.header(\"authorization\");\n if (auth && auth.startsWith(\"Bearer \")) return auth.slice(7).trim();\n return null;\n}\n\nfunction parseValId(valId: string): { handle: string; name: string } | null {\n const m = valId.match(\n /^([a-zA-Z][a-zA-Z0-9_-]{0,30})\\/([a-zA-Z][a-zA-Z0-9_-]{0,47})$/,\n );\n if (!m) return null;\n return { handle: m[1], name: m[2] };\n}\n\nasync function vt(token: string, path: string): Promise {\n return await fetch(`${VT}${path}`, {\n headers: { Authorization: `Bearer ${token}` },\n });\n}\nasync function vtJson(token: string, path: string): Promise {\n const resp = await vt(token, path);\n if (!resp.ok) {\n const body = (await resp.text()).slice(0, 200);\n throw new Error(`${path} → ${resp.status}: ${body}`);\n }\n return await resp.json();\n}\n\nasync function resolveVal(\n valId: string,\n token: string,\n): Promise<{ id: string; url: string; branchId: string | null }> {\n const parsed = parseValId(valId);\n if (!parsed) {\n throw new Error(`Invalid val identifier \"${valId}\". Expected handle/name.`);\n }\n\n // Alias lookup. /v2/alias/vals/{username}/{val_name} returns val metadata.\n const val = await vtJson(\n token,\n `/v2/alias/vals/${parsed.handle}/${parsed.name}`,\n ).catch((e) => {\n throw new Error(`Val not found: ${valId}. ${e.message?.slice(0, 120) || \"\"}`);\n });\n\n // List root files. path/recursive/offset/limit are all required by the spec.\n const filesData = await vtJson(\n token,\n `/v2/vals/${val.id}/files?path=&recursive=true&offset=0&limit=100`,\n );\n const files = filesData.data || [];\n const httpFiles = files.filter((f: any) => f.type === \"http\");\n // Prefer a canonical entry point (main.* / index.*) at the root; fall back\n // to the first HTTP file overall.\n const isEntry = (name: string) =>\n /^(main|index)\\.(tsx?|jsx?)$/i.test(name);\n const httpFile = httpFiles.find((f: any) =>\n isEntry(f.name) && (f.path === f.name || !f.path?.includes(\"/\"))\n ) || httpFiles[0];\n if (!httpFile) {\n throw new Error(\n `Val ${valId} has no HTTP file to serve. Create one with fileType: \"http\" — e.g. a Hono app exporting app.fetch.`,\n );\n }\n const endpoint = httpFile.links?.endpoint;\n if (!endpoint) {\n throw new Error(\n `HTTP file in ${valId} has no endpoint URL yet — it may still be deploying.`,\n );\n }\n\n // Find the main branch id for version polling.\n let branchId: string | null = null;\n try {\n const branchesData = await vtJson(\n token,\n `/v2/vals/${val.id}/branches?offset=0&limit=100`,\n );\n const branches = branchesData.data || [];\n const main = branches.find((b: any) => b.name === \"main\") || branches[0];\n branchId = main?.id || null;\n } catch (e) {\n console.warn(`[resolve-val] branch list failed:`, e);\n }\n\n return { id: val.id, url: endpoint, branchId };\n}\n\napi.get(\"/resolve-val\", async (c) => {\n const token = await getAccessToken(c);\n if (!token) return c.json({ error: \"Unauthorized\" }, 401);\n const valId = c.req.query(\"val\");\n if (!valId) return c.json({ error: \"Missing val\" }, 400);\n try {\n const info = await resolveVal(valId, token);\n return c.json(info);\n } catch (e) {\n return c.json({ error: (e as Error).message }, 400);\n }\n});\n\napi.get(\"/wait-for-val-update\", async (c) => {\n const token = await getAccessToken(c);\n if (!token) return c.json({ error: \"Unauthorized\" }, 401);\n const valId = c.req.query(\"valId\");\n const branchId = c.req.query(\"branchId\");\n const since = parseInt(c.req.query(\"since\") || \"0\", 10) || 0;\n if (!valId || !branchId) {\n return c.json({ error: \"Missing valId or branchId\" }, 400);\n }\n\n const deadline = Date.now() + 45000;\n let lastSeen = since;\n while (Date.now() < deadline) {\n try {\n const branch = await vtJson(\n token,\n `/v2/vals/${valId}/branches/${branchId}`,\n );\n const v = Number(branch.version) || 0;\n if (lastSeen > 0 && v > lastSeen) {\n return c.json({ version: v, status: \"UPDATED\" });\n }\n if (lastSeen === 0) lastSeen = v;\n } catch (e) {\n return c.json({ error: (e as Error).message }, 500);\n }\n await new Promise((r) => setTimeout(r, 1500));\n }\n return c.json({ version: lastSeen, status: \"TIMEOUT\" });\n});\n\nexport default api;\n",[],[180,259],"97d2ef3e-5475-11f1-8c7b-ee650bb23af1","agent.ts","019e4201-4376-74f8-ae4a-50649d289a8d",34,["D",1779299945993],8,"import { ObserverClient, ObserverHandler } from \"./observer.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst MODEL = \"gpt-realtime-2\";\nconst TRANSCRIBE_MODEL = \"gpt-4o-transcribe\";\nconst NR_TYPE = \"near_field\";\nconst VOICE = \"marin\";\n\nfunction buildSystemPrompt(initialVal?: string, username?: string): string {\n return `You are Studio, a voice-controlled code editor for Val Town vals.\n\n${username ? `The user's Val Town handle is **${username}** — when they say \"open foo\" without specifying an owner, default to \\`load_val(\"${username}/foo\")\\`.` : \"\"}\n\nThe user is in a workspace that shows the deployed page of a val in an iframe and lets you edit its source by voice. You can:\n\n1. **Switch which val is loaded** — call \\`load_val(val)\\` with a \"handle/name\" identifier. The studio resolves the val's HTTP endpoint and swaps the iframe to it. Use this for \"open my X\", \"show me Y\", \"switch to Z\".\n2. **Edit any val** — use val_town_mcp tools (\\`list_files\\`, \\`read_file\\`, \\`update_file\\`, \\`create_file\\`, \\`create_val\\`, \\`get_val_detail\\`). Always pass the val identifier as the \\`val\\` argument.\n3. **Drive a slideshow** — if the user loaded a slideshow-style val (it listens for \\`slideshow:next/prev/goto\\` postMessage events), use \\`slide_next\\`, \\`slide_prev\\`, \\`slide_goto(index)\\` to navigate. Safe to call regardless — it's a no-op on vals that don't listen. \\`dcm31/voice-slideshow-demo\\` is the canonical slideshow demo.\n\n${initialVal ? `The val currently loaded is: ${initialVal}` : `No val is loaded yet. If the user just starts talking about edits without opening one, ask which val first.`}\n\n## Creating a new val that will be loaded into the studio\n\nThe studio can only display vals that have an HTTP file (servable as a webpage). When the user asks you to create-and-serve a new val:\n\n1. Call \\`create_val\\` with **\\`initialFile.fileType: \"http\"\\`** and a minimal Hono entrypoint, e.g.:\n \\`\\`\\`ts\n import { Hono } from \"npm:hono\";\n const app = new Hono();\n app.get(\"/\", c => c.html(\"

Hello from

\"));\n export default app.fetch;\n \\`\\`\\`\n Do **not** use the default fileType \"script\" — those vals have no endpoint and the studio can't display them.\n **Do not pass a \\`description\\` field** — it's optional and the validator rejects anything 64 chars or longer, so it's safer to omit it.\n2. Then call \\`load_val(\"/\")\\` to display it.\n3. If \\`load_val\\` returns an error like \"no HTTP file\", add one via \\`create_file\\` with \\`fileType: \"http\"\\` and retry.\n\n## Style\n\n- Terse. The user can see the page; don't narrate.\n- Confirm in one short sentence: \"Created and loaded dcm31/foo.\" / \"Updated main.tsx — added the button.\"\n- Don't read code aloud unless asked.\n- Before a non-trivial change, briefly state what you'll do.\n- If you're unsure which file to edit, list files first.\n- After an edit, the iframe auto-reloads — don't say \"refresh the page\".\n- Treat the user as the val's owner.\n\nWhen the user says \"open foo\" or \"switch to bar\":\n- If they just give a name, assume their handle: \\`load_val(\"/foo\")\\`.\n- If they say \"Steve's val foo\": \\`load_val(\"stevekrouse/foo\")\\` etc.`;\n}\n\n// Builds the declarative session config. accessToken is required to give the\n// AI val.town MCP access; initialVal seeds the system prompt.\nexport function makeSession(\n modelOverride?: string,\n _video?: boolean,\n accessToken?: string,\n initialVal?: string,\n username?: string,\n) {\n const model = modelOverride || MODEL;\n\n const tools: any[] = [\n {\n type: \"function\",\n name: \"load_val\",\n description:\n \"Switch which val is loaded in the studio's iframe workspace. Pass a val identifier like 'handle/name'. The studio resolves it to the deployed URL and swaps the iframe. Use whenever the user says 'open X', 'show Y', 'switch to Z'.\",\n parameters: {\n type: \"object\",\n properties: {\n val: {\n type: \"string\",\n description: \"Val identifier in handle/name form, e.g. 'dcm31/voice-edit-demo'.\",\n },\n },\n required: [\"val\"],\n },\n },\n {\n type: \"function\",\n name: \"slide_next\",\n description:\n \"If the loaded val is a slideshow that supports postMessage navigation, advance to the next slide. The studio sends a 'slideshow:next' message to the iframe. Safe to call even if the iframe doesn't listen — it's a no-op.\",\n parameters: { type: \"object\", properties: {} },\n },\n {\n type: \"function\",\n name: \"slide_prev\",\n description:\n \"Go back one slide in the loaded slideshow.\",\n parameters: { type: \"object\", properties: {} },\n },\n {\n type: \"function\",\n name: \"slide_goto\",\n description:\n \"Jump to a specific slide by zero-based index in the loaded slideshow.\",\n parameters: {\n type: \"object\",\n properties: {\n index: {\n type: \"integer\",\n description: \"Zero-based slide index. 0 = first slide.\",\n },\n },\n required: [\"index\"],\n },\n },\n ];\n if (accessToken) {\n tools.unshift({\n type: \"mcp\",\n server_label: \"val_town_mcp\",\n server_url: \"https://api.val.town/v3/mcp\",\n require_approval: \"never\",\n headers: { Authorization: `Bearer ${accessToken}` },\n });\n }\n\n return {\n type: \"realtime\",\n model,\n instructions: buildSystemPrompt(initialVal, username),\n audio: {\n input: {\n noise_reduction: { type: NR_TYPE },\n transcription: { model: TRANSCRIBE_MODEL },\n },\n output: { voice: VOICE },\n },\n tools,\n };\n}\n\nclass AgentHandler implements ObserverHandler {\n private callEnding = false;\n constructor(private client: ObserverClient, private callId: string) {}\n onInit() {}\n async onTool(name: string, _args: any) {\n console.log(\"🔧 function tool call:\", name, _args);\n }\n async onMcpCallCompleted(name: string, output: string | null) {\n console.log(\"🔧 MCP call completed:\", name, output?.slice(0, 200));\n this.client.createResponse();\n }\n async onOutputAudioStarted() {}\n async onOutputAudioStopped() {\n if (this.callEnding) await this.hangup();\n }\n async onOutputAudioCleared() {}\n private async hangup() {\n const url = makeUrl(this.callId, \"hangup\");\n const resp = await fetch(url, { method: \"POST\", headers: makeHeaders() });\n if (!resp.ok) {\n console.error(`🔴 end call failed: ${await getErrorText(resp)}`);\n return;\n }\n console.log(\"✅ call ended\");\n }\n}\n\nexport function createHandler(client: ObserverClient, callId: string) {\n return new AgentHandler(client, callId);\n}\n",[],[180,268],["D",1779223839498],[206,207,208,209,210,211],[180],"64e13b28-53c4-11f1-9542-ee650bb23af1","widget.html","019e4201-4376-74f8-ae4a-48aa5b6854ae",["D",1779223839498],"\n\n \n \n \n Voice Edit\n \n \n \n

Voice Edit

Editing –

\n\n

\n \n $\"\"$ \n Log in with Val Town\n \n

\n Lets the AI edit this val on your behalf via your Val Town account.\n

\n\n

\n @\n \n

Click the green circle to start talking. Click again to stop.

\n\n

\n No val specified. Add ?val=handle/name to the script src or set data-val.\n

\n\n

\n\n \n \n\n",[],[186,280],"e960495e-5476-11f1-b49d-ee650bb23af1",["D",1779300512335],18,[],[186,33],"64e11440-53c4-11f1-9542-ee650bb23af1","sdk.js","019e4201-4376-74f8-ae4a-44f5e7c94391",["D",1779223839498],"// voice-edit-sdk loader.\n//\n// Drops a small green-circle iframe widget on the host page (bottom-right).\n// All call UI (login, mic, WebRTC, audio) lives same-origin inside the iframe.\n//\n// When the host val is hot-reloaded via live-reload5 (or similar), instead of\n// letting the browser navigate the whole document (which would kill the\n// iframe and drop the call), we long-poll for version bumps ourselves and\n// hot-patch the DOM in place — replacing the body's visible content while\n// leaving the iframe untouched. The call keeps going.\n//\n// \n\n(function () {\n if (window.__voiceEditSdkInstalled) return;\n window.__voiceEditSdkInstalled = true;\n\n const SELF_SCRIPT = document.currentScript ||\n (function () {\n const all = document.getElementsByTagName(\"script\");\n for (let i = all.length - 1; i >= 0; i--) {\n if (all[i].src && /\\/sdk\\.js(?:\\?|$)/.test(all[i].src)) return all[i];\n }\n return null;\n })();\n\n const SDK_ORIGIN = SELF_SCRIPT\n ? new URL(SELF_SCRIPT.src, window.location.href).origin\n : window.location.origin;\n\n function resolveVal() {\n if (SELF_SCRIPT) {\n if (SELF_SCRIPT.dataset && SELF_SCRIPT.dataset.val) {\n return SELF_SCRIPT.dataset.val.trim();\n }\n try {\n const u = new URL(SELF_SCRIPT.src, window.location.href);\n const q = u.searchParams.get(\"val\");\n if (q) return q.trim();\n } catch {}\n }\n if (typeof window.VOICE_EDIT_VAL === \"string\") {\n return window.VOICE_EDIT_VAL.trim();\n }\n return \"\";\n }\n\n const VAL = resolveVal();\n const WIDGET_ID = \"voice-edit-widget\";\n let iframe = null;\n let callActive = false;\n\n function mount() {\n const widgetUrl = new URL(\"/widget\", SDK_ORIGIN);\n if (VAL) widgetUrl.searchParams.set(\"val\", VAL);\n iframe = document.createElement(\"iframe\");\n iframe.src = widgetUrl.toString();\n iframe.title = \"Voice Edit\";\n iframe.id = WIDGET_ID;\n iframe.allow = \"microphone; autoplay\";\n iframe.setAttribute(\n \"sandbox\",\n \"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms\",\n );\n iframe.style.cssText = [\n \"position:fixed\",\n \"bottom:0\",\n \"right:0\",\n \"width:72px\",\n \"height:72px\",\n \"border:0\",\n \"background:transparent\",\n \"color-scheme:normal\",\n \"z-index:2147483647\",\n \"pointer-events:auto\",\n ].join(\";\");\n\n window.addEventListener(\"message\", (ev) => {\n if (ev.origin !== SDK_ORIGIN) return;\n const m = ev.data;\n if (!m || typeof m !== \"object\") return;\n if (m.type === \"voice-edit:resize\") {\n const w = Math.max(40, Math.min(800, Number(m.width) || 72));\n const h = Math.max(40, Math.min(800, Number(m.height) || 72));\n iframe.style.width = w + \"px\";\n iframe.style.height = h + \"px\";\n } else if (m.type === \"voice-edit:call-state\") {\n callActive = !!m.active;\n }\n });\n\n document.body.appendChild(iframe);\n }\n\n // -------- Smart patch: keep the iframe alive across val edits --------\n //\n // We poll /__lastUpdatedAt ourselves (using the original fetch so any other\n // live-reload's wrappers don't interfere). On a real version bump we fetch\n // the new HTML and apply it as a DOM patch instead of navigating, so the\n // iframe element (and the running call inside it) is never removed from\n // the document.\n //\n // We also intercept the host page's /__lastUpdatedAt poll for any\n // co-installed live-reload client (e.g. live-reload5) and feed it a fake\n // \"TIMEOUT\" so it never triggers `location.href = …`. We do the reloads.\n const origFetch = window.fetch.bind(window);\n const ourPollMarker = \"_voiceedit=1\";\n\n window.fetch = function (input, init) {\n try {\n const url = typeof input === \"string\"\n ? input\n : (input && input.url) ? input.url : \"\";\n if (\n /\\/__lastUpdatedAt(?:$|\\?)/.test(url) && !url.includes(ourPollMarker)\n ) {\n // Hold the third-party live-reload poll harmlessly. It will get\n // status:TIMEOUT after a delay and naturally re-poll.\n return new Promise((resolve) => {\n setTimeout(\n () =>\n resolve(\n new Response(\n JSON.stringify({ lastUpdatedAt: 0, status: \"TIMEOUT\" }),\n { headers: { \"Content-Type\": \"application/json\" } },\n ),\n ),\n 30000,\n );\n });\n }\n } catch {}\n return origFetch(input, init);\n };\n\n let lastSeenVersion = 0;\n async function ourPollLoop() {\n while (true) {\n try {\n const sep = window.location.pathname.includes(\"?\") ? \"&\" : \"?\";\n const url = \"/__lastUpdatedAt\" + sep + ourPollMarker;\n const r = await origFetch(url, { cache: \"no-store\" });\n const d = await r.json().catch(() => ({}));\n const v = Number(d.lastUpdatedAt) || 0;\n if (v > 0) {\n if (lastSeenVersion === 0) {\n lastSeenVersion = v;\n } else if (v > lastSeenVersion) {\n lastSeenVersion = v;\n try {\n await smartPatch();\n } catch (e) {\n console.warn(\n \"[voice-edit] smart-patch failed, falling back to reload\",\n e,\n );\n if (!callActive) location.reload();\n }\n }\n }\n if (d.status !== \"TIMEOUT\") {\n // Whatever live-reload server we're talking to didn't long-poll —\n // sleep a beat before polling again so we don't hammer.\n await new Promise((r) => setTimeout(r, 1000));\n }\n } catch {\n await new Promise((r) => setTimeout(r, 2000));\n }\n }\n }\n\n async function smartPatch() {\n const resp = await origFetch(window.location.href, {\n cache: \"no-store\",\n credentials: \"same-origin\",\n });\n if (!resp.ok) throw new Error(\"fetch new html: \" + resp.status);\n const html = await resp.text();\n const newDoc = new DOMParser().parseFromString(html, \"text/html\");\n\n // Update and replace any inline <style> tags in <head>.\n if (newDoc.title) document.title = newDoc.title;\n const oldStyles = Array.from(document.head.querySelectorAll(\"style\"));\n oldStyles.forEach((s) => s.remove());\n Array.from(newDoc.head.querySelectorAll(\"style\")).forEach((s) => {\n document.head.appendChild(s.cloneNode(true));\n });\n\n // Replace body children, but never touch the voice-edit iframe.\n const widget = document.getElementById(WIDGET_ID);\n const toRemove = [];\n document.body.childNodes.forEach((c) => {\n if (c !== widget) toRemove.push(c);\n });\n toRemove.forEach((c) => c.remove());\n\n // Insert new body children before the widget (so it stays last/visible).\n // Skip <script> tags: original scripts are still running; re-injecting\n // them would duplicate side-effects (e.g. live-reload pollers).\n Array.from(newDoc.body.childNodes).forEach((nc) => {\n if (nc.nodeName === \"SCRIPT\") return;\n const adopted = document.importNode(nc, true);\n if (widget) document.body.insertBefore(adopted, widget);\n else document.body.appendChild(adopted);\n });\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", () => {\n mount();\n ourPollLoop();\n }, { once: true });\n } else {\n mount();\n ourPollLoop();\n }\n})();\n",[],[186,292],"64e0db60-53c4-11f1-9542-ee650bb23af1","index.html","019e4201-4376-74f8-ae4a-4003f1802f78",["D",1779223839498],"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>Voice Edit SDK\n \n \n \n

Voice Edit SDK

\n One line of code, and any Val Town val gets a little green circle in\n the corner that lets you voice-edit its source.\n

\n\n

Usage — Hono

Two lines added to any val you own. The val identifier is auto-detected:

import { voiceEdit } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\napp.use(voiceEdit());

\n\n

Usage — plain fetch handler

import { wrapFetch } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\nexport default wrapFetch(myHandler);

\n\n

Or: plain HTML snippet

If you'd rather paste a script tag into your HTML:

<script src=\"/sdk.js\" data-val=\"handle/name\" defer></script>

\n\n

What it does

\n Adds a small green circle in the bottom-right corner. Click to expand\n a login card, sign in with Val Town, then click again to start talking.\n The AI uses your Val Town MCP token to read and edit the host val's\n source — say things like \"add a button that says hello\" or\n \"in main.tsx, change the title to 'Welcome'\". Refresh the\n page to see edits live.\n

\n\n

How it works

\n The script injects an <iframe> pointing at this\n val's /widget page.\n
\n The widget runs same-origin, so OAuth, WebRTC, and audio all live\n inside it — no cross-origin cookie or CORS issues.\n
\n On connect, the OpenAI Realtime API is given the Val Town MCP server\n plus your access token, scoped to the val you specified.\n
\n The circle pulses with the AI's voice volume via an\n AnalyserNode on the remote audio track.\n

\n\n

Auth status

Checking…

\n\n \n

\n\n \n \n\n",[],[186,299],["D",1779223839498],[201,202,203,204],[186],["D",1779223839498],{"_100":99,"_108":104},{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":95,"_96":65,"_97":45,"_98":99},"ctx",{"_79":-5,"_130":345,"_346":347,"_348":349,"_350":25,"_351":25,"_352":25,"_353":59,"_354":-5,"_355":-7,"_356":-7,"_357":63,"_358":25,"_359":25,"_360":-5,"_361":25,"_362":25,"_363":25,"_364":-5},"ENV",{"_316":317,"_318":319,"_320":87,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v37