[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_291":292,"_293":294},"routes/_app.x.$handle.$name",{"_98":97,"_31":43,"_107":85,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":24,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","sdk.ts","latestPath","fileId","8273f13c-53b8-11f1-a3f9-ee650bb23af1","name","fileType","script","content","// 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","createdAt",["D",1779218735286],"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",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":88,"_89":90,"_91":48,"_92":93,"_94":63,"_95":43,"_96":97},"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",{"_41":42,"_31":43,"_36":287,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":288,"_79":289,"_81":290,"_83":24},"tree",[194,198,204,205,206,207],"files",[194,195,196,197,198,199,200,201,202,203,204,205,206,207],"counts",{"_184":61,"_185":155,"_186":155,"_187":188,"_189":190},"contents",[140,141,142,143,144,145],"upstreamProject",{"_41":93,"_31":138,"_50":51,"_52":-5,"_47":48,"_77":139},"upstreamBranch",{"_41":88,"_36":131,"_132":133,"_31":85,"_86":93,"_13":90,"_87":134,"_89":135,"_136":137,"_45":-5,"_83":24,"_47":48,"_96":97,"_62":63,"_95":138},"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",{"_98":97,"_106":102},{"_41":179,"_31":180,"_29":181,"_147":-5,"_39":40,"_38":155,"_148":57,"_36":182,"_13":61,"_32":177,"_34":-5,"_23":24,"_150":-5,"_26":183},{"_41":173,"_31":174,"_29":175,"_147":-5,"_39":40,"_38":155,"_148":57,"_36":176,"_13":61,"_32":177,"_34":-5,"_23":24,"_150":-5,"_26":178},{"_41":167,"_31":168,"_29":169,"_147":-5,"_39":40,"_38":155,"_148":57,"_36":170,"_13":61,"_32":20,"_34":171,"_23":24,"_150":-5,"_26":172},{"_41":160,"_31":161,"_29":55,"_147":-5,"_39":40,"_38":162,"_148":24,"_36":163,"_13":164,"_32":157,"_34":165,"_23":24,"_150":-5,"_26":166},{"_41":152,"_31":153,"_29":154,"_147":-5,"_39":40,"_38":155,"_148":57,"_36":156,"_13":61,"_32":157,"_34":158,"_23":24,"_150":-5,"_26":159},{"_41":146,"_31":27,"_29":30,"_147":-5,"_39":40,"_38":14,"_148":57,"_36":149,"_13":61,"_32":33,"_34":35,"_23":24,"_150":-5,"_26":151},"8273f060-53b8-11f1-a3f9-ee650bb23af1","parentId","latest",["D",1779218735286],"label",[27],"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",[153],"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\n",[],[180,262],"4c89cbc4-53b7-11f1-b5b0-ee650bb23af1","sdk.js","377bf658-53b7-11f1-9d57-ee650bb23af1",7,["D",1779218215324],"// voice-edit-sdk loader.\n//\n// Host vals include this with:\n//\n// \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",[],[180,270],"70ebad34-53b7-11f1-8272-ee650bb23af1","index.html","019e41a4-e477-710e-b0d1-5b371b14fb9d",["D",1779218276371],"\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

Paste this into the HTML of any val you own, swapping in the val's identifier:

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

\n Or pass it on the script URL:\n

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

\n Click the green circle to expand a login card, sign in with your Val\n Town account, then click the circle again to start talking. The\n AI uses the Val Town MCP under your account to read and edit the\n val's source — say things like \"add a button that says hello\"\n or \"in main.tsx, change the title to 'Welcome'\".\n

\n Refresh the host page after edits to see them 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",[],[180,278],["D",1779217785910],[195,196,197],[180],["D",1779217785910],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":53,"_103":104,"_105":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":88,"_89":90,"_91":48,"_92":93,"_94":63,"_95":43,"_96":97},"ctx",{"_77":-5,"_128":324,"_325":326,"_327":328,"_329":24,"_330":24,"_331":24,"_332":57,"_333":-5,"_334":-7,"_335":-7,"_336":61,"_337":24,"_338":24,"_339":-5,"_340":24,"_341":24,"_342":24,"_343":-5},"ENV",{"_295":296,"_297":298,"_299":85,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323},"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 · v10