[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22},"handle","dcm31","name","voice-edit-sdk","path","frontend/index.html","project",{"_23":48,"_11":12,"_36":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":35,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_23":24,"_11":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":17,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/dcm31/voice-edit-sdk/code/frontend/index.html","extension","html","id","1b46290c-53c3-11f1-83f4-ee650bb23af1","index.html","fileId","019e41a4-e477-710e-b0d1-5b371b14fb9d","parentId","019e41a4-e477-710e-b0d1-5f4905a340fa","branchId","4c9ae892-53b6-11f1-9dc5-ee650bb23af1","branchVersion",39,"latest",true,"createdAt",["D",1779223286621],"version",6,"fileType","content","\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","deleted",false,"label",[47,25],"frontend","4c958dc0-53b6-11f1-9dc5-ee650bb23af1",["D",1779217785910],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Sample app for the OpenAI Realtime API","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","019e41a4-e477-710e-b0d1-7c4e5fd07902","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_101":102,"_103":104,"_58":59,"_105":106,"_107":44},"branch",{"_38":33,"_11":89,"_23":31,"_90":48,"_91":92,"_93":94,"_95":53,"_96":97,"_98":68,"_99":12,"_100":10},"isOwned","main","projectId","forkedBranchId","9851274e-539b-11f1-b21e-ee650bb23af1","forkedBranchVersion",9,"forkedProjectPrivacy","forkedProjectId","984a3ce0-539b-11f1-b21e-ee650bb23af1","forkedProjectOrgId","projectName","userHandle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789577999&sig=ccae2bd9e85fa66acf31b16bebb92bf56e22818ff77cfbe2634e1b690ccd40dc","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":35,"_152":-5,"_153":-7,"_154":-7,"_155":66,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":89,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]