[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_295":296,"_297":298},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":87,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/widget.html","latestPath","fileId","2655f20c-53b7-11f1-93b3-ee650bb23af1","name","widget.html","fileType","content","\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","\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","createdAt",["D",1779219702933],"branchVersion","branchId","4c9ae892-53b6-11f1-9dc5-ee650bb23af1","id","4c958dc0-53b6-11f1-9dc5-ee650bb23af1","voice-edit-sdk",["D",1779217785910],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Sample app for the OpenAI Realtime API","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","019e41a4-e477-710e-b0d1-7c4e5fd07902","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":95,"_96":65,"_97":45,"_98":99},"isOwned",39,"main","projectId","forkedBranchId","9851274e-539b-11f1-b21e-ee650bb23af1","forkedBranchVersion",9,"forkedProjectPrivacy","forkedProjectId","984a3ce0-539b-11f1-b21e-ee650bb23af1","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789567199&sig=e06d2452d15457d897c29ee2d4a45d8ac5b1a1a7b6bc3ec1d7706c1f90e23fa3","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":291,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":292,"_81":293,"_83":294,"_85":25},"tree",[201,205,211,212,213,214],"files",[201,202,203,204,205,206,207,208,209,210,211,212,213,214],"counts",{"_191":63,"_192":162,"_193":162,"_194":195,"_196":197},"contents",[142,143,144,145,146,147],"upstreamProject",{"_43":95,"_32":140,"_52":53,"_54":-5,"_49":50,"_79":141},"upstreamBranch",{"_43":90,"_38":133,"_134":135,"_32":87,"_88":95,"_13":92,"_89":136,"_91":137,"_138":139,"_47":-5,"_85":25,"_49":50,"_98":99,"_64":65,"_97":140},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1779206316505],"updatedAt",["D",1779209326110],"53c6585e-373c-11f1-83b9-42b51c65c3df",50,"lockfileKey","1779209355978-esm.town_v_dcm31_hello-realtime-townie3@9-main","hello-realtime-townie3",{"_100":99,"_108":104},{"_43":186,"_32":187,"_30":188,"_151":-5,"_41":42,"_40":162,"_153":59,"_38":189,"_13":63,"_34":184,"_35":-5,"_24":25,"_157":-5,"_27":190},{"_43":180,"_32":181,"_30":182,"_151":-5,"_41":42,"_40":162,"_153":59,"_38":183,"_13":63,"_34":184,"_35":-5,"_24":25,"_157":-5,"_27":185},{"_43":174,"_32":175,"_30":176,"_151":-5,"_41":42,"_40":162,"_153":59,"_38":177,"_13":63,"_34":20,"_35":178,"_24":25,"_157":-5,"_27":179},{"_43":167,"_32":168,"_30":57,"_151":-5,"_41":42,"_40":169,"_153":25,"_38":170,"_13":171,"_34":164,"_35":172,"_24":25,"_157":-5,"_27":173},{"_43":159,"_32":160,"_30":161,"_151":-5,"_41":42,"_40":162,"_153":59,"_38":163,"_13":63,"_34":164,"_35":165,"_24":25,"_157":-5,"_27":166},{"_43":148,"_32":149,"_30":150,"_151":-5,"_41":42,"_40":152,"_153":59,"_38":154,"_13":63,"_34":155,"_35":156,"_24":25,"_157":-5,"_27":158},"8273f060-53b8-11f1-a3f9-ee650bb23af1","sdk.ts","8273f13c-53b8-11f1-a3f9-ee650bb23af1","parentId",10,"latest",["D",1779218735286],"script","// Voice Edit SDK — drop-in module for any Val Town HTTP val.\n//\n// Hono apps (one line after the import):\n//\n// import { voiceEdit } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\n// app.use(voiceEdit());\n//\n// Plain fetch handlers:\n//\n// import { wrapFetch } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\n// export default wrapFetch(myHandler);\n//\n// The val you want to voice-edit is auto-detected from VALTOWN_ENTRYPOINT —\n// i.e. the val that imports this module is the one the AI gets to edit.\n// Pass `{ val: \"handle/name\" }` to override.\n//\n// The backend (`/widget`, `/rtc`, `/sdk.js`) lives on this val's public\n// deployment. Override with `{ sdkOrigin: \"https://your-fork.web.val.run\" }`\n// if you remix this val.\n\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\n// Public deployment of dcm31/voice-edit-sdk. Don't change unless you fork.\nconst DEFAULT_SDK_ORIGIN =\n \"https://dcm31--019e41a4e477710eb0d17c4e5fd07902.web.val.run\";\n\nexport interface VoiceEditOptions {\n /** \"handle/name\" of the val to edit. Auto-detected from VALTOWN_ENTRYPOINT if omitted. */\n val?: string;\n /** Override the SDK backend origin. Defaults to the public dcm31/voice-edit-sdk deployment. */\n sdkOrigin?: string;\n}\n\nfunction autoDetectVal(): string | undefined {\n try {\n const entrypoint = Deno.env.get(\"VALTOWN_ENTRYPOINT\");\n if (!entrypoint) return undefined;\n const parsed: any = parseVal(entrypoint);\n const handle = parsed?.author?.username ?? parsed?.handle ??\n parsed?.author?.handle;\n const name = parsed?.name;\n if (handle && name) return `${handle}/${name}`;\n // Fallback: parse from the val.town URL if structured fields aren't there.\n const url: string | undefined = parsed?.links?.self?.val;\n if (url) {\n const m = url.match(/val\\.town\\/x\\/([^/]+)\\/([^/?#]+)/);\n if (m) return `${m[1]}/${m[2]}`;\n }\n } catch {}\n return undefined;\n}\n\nfunction escapeAttr(s: string): string {\n return s.replace(/&/g, \"&\").replace(/\"/g, \""\");\n}\n\nexport function scriptTag(opts: VoiceEditOptions = {}): string {\n const sdkOrigin = opts.sdkOrigin || DEFAULT_SDK_ORIGIN;\n const val = opts.val || autoDetectVal();\n const dataAttr = val ? ` data-val=\"${escapeAttr(val)}\"` : \"\";\n return ``;\n}\n\nfunction injectIntoHtml(html: string, tag: string): string {\n if (html.includes(\"\")) return html.replace(\"\", `${tag}`);\n if (html.includes(\"\")) return html.replace(\"\", `${tag}`);\n return html + tag;\n}\n\nasync function maybeInject(\n resp: Response,\n opts: VoiceEditOptions,\n): Promise {\n const ct = resp.headers.get(\"Content-Type\") || \"\";\n if (!ct.toLowerCase().includes(\"text/html\")) return resp;\n const body = await resp.text();\n const injected = injectIntoHtml(body, scriptTag(opts));\n const headers = new Headers(resp.headers);\n headers.delete(\"Content-Length\");\n return new Response(injected, {\n status: resp.status,\n statusText: resp.statusText,\n headers,\n });\n}\n\n/**\n * Hono middleware. Injects the voice-edit script tag into any HTML response.\n *\n * app.use(voiceEdit());\n * app.use(voiceEdit({ val: \"dcm31/my-val\" }));\n */\nexport function voiceEdit(opts: VoiceEditOptions = {}) {\n return async (c: any, next: () => Promise) => {\n await next();\n if (!c.res) return;\n c.res = await maybeInject(c.res, opts);\n };\n}\n\n/**\n * Plain fetch-handler wrapper. Inject the voice-edit script tag into HTML\n * responses returned from the inner handler.\n *\n * export default wrapFetch(app.fetch);\n * export default wrapFetch((req) => new Response(\"

hi

\", { headers: { \"Content-Type\": \"text/html\" }}));\n */\nexport function wrapFetch<\n H extends (req: Request) => Promise | 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],"4ca15ce0-53b6-11f1-9dc5-ee650bb23af1","oauth-test.tsx","019e41a4-e477-710e-b0d1-83c9e859cec0",1,["D",1779217785910],"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],"5c50a050-53b7-11f1-90ef-ee650bb23af1","main.tsx",8,["D",1779218241793],2,"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 sip from \"./routes/sip.ts\";\nimport observer from \"./routes/observer.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\")).links.self.val;\n\nconst app = new Hono();\n\n// CORS for cross-origin embeds (the SDK is loaded onto third-party val pages).\napp.use(\"*\", async (c, next) => {\n await next();\n const origin = c.req.header(\"Origin\");\n if (origin) {\n c.res.headers.set(\"Access-Control-Allow-Origin\", origin);\n c.res.headers.set(\"Access-Control-Allow-Credentials\", \"true\");\n c.res.headers.set(\"Vary\", \"Origin\");\n }\n});\napp.options(\"*\", (c) => {\n c.res.headers.set(\n \"Access-Control-Allow-Methods\",\n \"GET, POST, OPTIONS\",\n );\n c.res.headers.set(\"Access-Control-Allow-Headers\", \"Content-Type\");\n return c.body(null, 204);\n});\n\napp.route(\"/rtc\", rtc);\napp.route(\"/sip\", sip);\napp.route(\"/observer\", observer);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\n// Lightweight session probe used by the widget to render login state.\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// The embeddable widget. Loaded inside an iframe on any val page.\napp.get(\"/widget\", () => serveFile(\"/frontend/widget.html\", import.meta.url));\n\n// The SDK loader script. Host vals include this with a one-line \n//\n// or:\n//\n// \n//\n// It injects a tiny iframe pointing at the SDK origin's /widget page. The\n// widget handles OAuth, WebRTC, and audio rendering same-origin; the iframe\n// only resizes to match its declared state via postMessage.\n(function () {\n if (window.__voiceEditSdkInstalled) return;\n window.__voiceEditSdkInstalled = true;\n\n // Capture the script tag synchronously — document.currentScript is null\n // by the time DOMContentLoaded fires.\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 // Resolve the val to edit, in priority order:\n // 1. data-val attribute on the script tag\n // 2. ?val=... query string on the script src\n // 3. window.VOICE_EDIT_VAL (set before the script loads)\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 function mount() {\n const val = resolveVal();\n const iframe = document.createElement(\"iframe\");\n const widgetUrl = new URL(\"/widget\", SDK_ORIGIN);\n if (val) widgetUrl.searchParams.set(\"val\", val);\n iframe.src = widgetUrl.toString();\n iframe.title = \"Voice Edit\";\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 iframe.id = \"voice-edit-widget\";\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 }\n });\n\n document.body.appendChild(iframe);\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", mount, { once: true });\n } else {\n mount();\n }\n})();\n",[],[187,273],"912049b0-53b8-11f1-bfd3-ee650bb23af1","index.html","019e41a4-e477-710e-b0d1-5b371b14fb9d",12,["D",1779218759890],"\n\n \n \n \n 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",[],[187,281],["D",1779217785910],[202,203,204],[187],["D",1779217785910],{"_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":328,"_329":330,"_331":332,"_333":25,"_334":25,"_335":25,"_336":59,"_337":-5,"_338":-7,"_339":-7,"_340":63,"_341":25,"_342":25,"_343":-5,"_344":25,"_345":25,"_346":25,"_347":-5},"ENV",{"_299":300,"_301":302,"_303":87,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327},"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 · v16