OpenAI Realtime API Voice Agent

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_281":282,"_283":284},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_209":-5,"_20":210,"_22":211,"_212":213,"_214":215,"_26":216,"_24":217,"_218":219,"_220":221,"_222":53,"_223":224,"_225":71,"_226":-5,"_227":-5,"_228":229},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","artivilla","name","hello-realtime-video","branchName","main","version","path","frontend/index.html","project",{"_36":165,"_13":14,"_38":166,"_51":-5,"_167":53,"_54":55,"_168":55,"_169":170,"_171":-5,"_172":173,"_174":89,"_175":71,"_176":71,"_177":-5,"_178":34,"_58":179,"_180":-5,"_181":-5,"_182":-5,"_183":-5,"_184":185,"_186":185,"_187":188,"_189":188,"_190":188,"_191":185,"_192":185,"_193":194,"_195":196,"_197":198,"_52":53},"tree",[80,81,82,83,84,85,86],"file",{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":32,"_70":71,"_38":72,"_17":34,"_73":24,"_74":75,"_76":53,"_77":-5,"_18":78},"contents",[],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":46,"_47":48,"_49":50,"_51":-5,"_52":53,"_54":55,"_56":57,"_58":59,"_60":14},"pull","ahead",1,"behind",0,"envVars","id","b23da676-84f4-11f0-a0a1-0224a6c84d84","createdAt",["D",1756484694515],"updatedAt",["D",1756485044206],"projectId","b23946b2-84f4-11f0-a0a1-0224a6c84d84",4,"forkedBranchId","6d08270c-84d1-11f0-b251-0224a6c84d84","forkedBranchVersion",53,"lockfileKey","1766069145806-esm.town_v_stevekrouse_hello-realtime-video@4-main","deletedAt","isOwned",false,"privacy","public","userHandle","stevekrouse","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","e277e40a-855d-11f0-b668-0224a6c84d84","index.html","fileId","0198f956-cefc-7590-ab29-ccbeea9bdf3e","parentId","0198f956-cefc-7590-ab29-d2504054b34a","branchId","e272deb0-855d-11f0-b668-0224a6c84d84","branchVersion","latest",true,["D",1756529872548],"fileType","content","\n\n \n \n \n OpenAI Realtime API Voice Agent\n \n \n \n \n\n

\n\n

\n\n \n\n \n \n\n","deleted","label",[79,62],"frontend",{"_36":157,"_13":79,"_63":66,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":158,"_17":34,"_73":128,"_74":-5,"_76":53,"_77":-5,"_93":159,"_18":160},{"_36":124,"_13":125,"_63":126,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":127,"_17":34,"_73":128,"_74":-5,"_76":53,"_77":-5,"_93":129,"_18":130},{"_36":117,"_13":118,"_63":119,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":120,"_17":34,"_73":24,"_74":121,"_76":53,"_77":-5,"_93":122,"_18":123},{"_36":110,"_13":111,"_63":112,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":113,"_17":34,"_73":24,"_74":114,"_76":53,"_77":-5,"_93":115,"_18":116},{"_36":103,"_13":104,"_63":105,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":106,"_17":34,"_73":24,"_74":107,"_76":53,"_77":-5,"_93":108,"_18":109},{"_36":96,"_13":97,"_63":98,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":99,"_17":34,"_73":24,"_74":100,"_76":53,"_77":-5,"_93":101,"_18":102},{"_36":87,"_13":88,"_63":89,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":90,"_17":34,"_73":91,"_74":92,"_76":53,"_77":-5,"_93":94,"_18":95},"e2780ad4-855d-11f0-b668-0224a6c84d84","main.tsx","0198f956-cefc-7590-ab29-f68533eb3433",["D",1756529872548],"http","import { Hono } from \"npm:hono\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n// import mcp from \"./routes/mcp.ts\";\nimport rtc from \"./routes/rtc.ts\";\nimport observer from \"./routes/observer.ts\";\n\nconst app = new Hono();\napp.route(\"/rtc\", rtc);\napp.route(\"/observer\", observer);\n// app.route(\"/mcp\", mcp);\n\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;\n","children",[],[88],"e27809c6-855d-11f0-b668-0224a6c84d84","deno.json","0198f956-cefc-7590-ab29-f2051e94596f",["D",1756529872548],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[97],"e278089a-855d-11f0-b668-0224a6c84d84","README.md","0198f956-cefc-7590-ab29-eedeb14cb227",["D",1756529872548],"# hello-realtime-video\n\nHello Realtime is a complete OpenAI Realtime application that supports WebRTC\nusers. You can access the app via WebRTC at\nhttps://hello-realtime-video.val.run.\n\nThis demo shows off the new all-in-one WebRTC API and the new server-side\nwebsocket interface.\n\nIf you remix the app, you'll just need to pop in your own OPENAI_API_KEY (from\nplatform.openai.com).\n",[],[104],"e278067e-855d-11f0-b668-0224a6c84d84",".vtignore","0198f956-cefc-7590-ab29-e8be9b5c376b",["D",1756529872548],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[111],"e278058e-855d-11f0-b668-0224a6c84d84",".gitignore","0198f956-cefc-7590-ab29-e643b300226b",["D",1756529872548],"node_modules",[],[118],"e2780480-855d-11f0-b668-0224a6c84d84","routes","0198f956-cefc-7590-ab29-e1be660b6357",["D",1756529872548],"directory",[131,132,133],[125],{"_36":150,"_13":151,"_63":152,"_65":126,"_67":68,"_69":32,"_70":71,"_38":153,"_17":34,"_73":139,"_74":154,"_76":53,"_77":-5,"_93":155,"_18":156},{"_36":143,"_13":144,"_63":145,"_65":126,"_67":68,"_69":32,"_70":71,"_38":146,"_17":34,"_73":139,"_74":147,"_76":53,"_77":-5,"_93":148,"_18":149},{"_36":134,"_13":135,"_63":136,"_65":126,"_67":68,"_69":137,"_70":71,"_38":138,"_17":32,"_73":139,"_74":140,"_76":53,"_77":-5,"_93":141,"_18":142},"b0804ba4-8562-11f0-b5ea-0224a6c84d84","utils.ts","0198f956-cefc-7590-ab29-dcf9dbe60f63",2,["D",1756531936286],"script","const MODEL = \"gpt-realtime\";\nconst INSTRUCTIONS = `Greet the user in English.\n\nBe as sarcastic as possible.\n\nTry to make every conversation about muggles.`;\nconst VOICE = \"marin\";\n\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\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\nexport function makeSession(video: boolean) {\n const session = {\n type: \"realtime\",\n model: MODEL,\n instructions: INSTRUCTIONS,\n audio: {\n input: { noise_reduction: { type: \"near_field\" } },\n output: { voice: VOICE },\n },\n };\n\n if (video) {\n session[\"video\"] = {\n input: { enabled: true },\n };\n }\n\n return session;\n}",[],[125,135],"e2780232-855d-11f0-b668-0224a6c84d84","rtc.ts","0198f956-cefc-7590-ab29-da9255bc65cd",["D",1756529872548],"import { Hono } from \"npm:hono\";\nimport { makeHeaders, makeSession } from \"./utils.ts\";\n\nconst rtc = new Hono();\n\n// POST /rtc : create a new call\nrtc.post(\"/\", async (c) => {\n // Parse video flag from query (?video=true)\n const reqUrl = new URL(c.req.url);\n const video = reqUrl.searchParams.get(\"video\") === \"true\";\n\n // Create the call.\n const url = \"https://api.openai.com/v1/realtime/calls\";\n const headers = makeHeaders();\n const fd = new FormData();\n fd.set(\"sdp\", await c.req.text());\n fd.set(\"session\", JSON.stringify(makeSession(video)));\n const opts = { method: \"POST\", headers, body: fd };\n const resp = await fetch(url, opts);\n if (!resp.ok) {\n const errText = await resp.text().catch(() => \"\");\n console.error(`🔴 start call failed: ${resp.status} ${errText}`);\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\n return c.newResponse(resp.body, {\n headers: { \"Content-Type\": contentType },\n });\n});\n\nexport default rtc;\n",[],[125,144],"e277fe5e-855d-11f0-b668-0224a6c84d84","observer.ts","0198f956-cefc-7590-ab29-d65e698dafe4",["D",1756529872548],"import { Hono } from \"npm:hono\";\nimport WebSocket from \"npm:ws\";\nimport { makeHeaders } from \"./utils.ts\";\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 url = `wss://api.openai.com/v1/realtime?call_id=${callId}`;\n const ws = new WebSocket(url, { headers: makeHeaders() });\n ws.on(\"open\", () => {\n console.log(\"✅ websocket connected\");\n setTimeout(() => ws.send(JSON.stringify({ type: \"response.create\" })), 250);\n });\n ws.on(\"message\", (data /*, isBinary */) => {\n const message = JSON.parse(data);\n if (message.type !== \"response.audio_transcript.delta\") {\n console.log(message);\n }\n });\n ws.on(\"error\", (err: Error) => {\n console.error(`🔴 websocket failed: ${err.message}`);\n });\n\n // Respond immediately; WS continues in background\n return c.newResponse(null);\n});\n\nexport default observer;\n",[],[125,151],"e277fd1e-855d-11f0-b668-0224a6c84d84",["D",1756529872548],[161],[79],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":32,"_70":71,"_38":162,"_17":34,"_73":24,"_74":75,"_76":53,"_77":-5,"_93":163,"_18":164},["D",1756529872548],[],[79,62],"e26f9782-855d-11f0-b668-0224a6c84d84",["D",1756529872548],"legacyEnvVars","httpPrivacy","description","endless joys of muggle life","imageUrl","userId","d56bd8b2-a31e-4821-93e6-bcbdd41c83ba","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","0d30098c-721f-4d42-b17b-1da1e51d05e7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_208":204},"org",{"_11":12,"_202":-5,"_203":204,"_172":173,"_205":206,"_207":53},"branch",{"_17":137,"_13":16,"_36":68,"_42":165,"_45":37,"_47":44,"_199":55,"_200":43,"_201":59,"_60":14,"_56":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/05b096c6-70cf-4d2b-51e5-6c69c44dbf00/square512?exp=1789592399&sig=1eb664fe2f945da05d05e3d709b4efc06cd016a5dfb458115be70ff7f41d6165","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":165,"_13":14,"_38":277,"_51":-5,"_167":53,"_54":55,"_168":55,"_169":170,"_171":-5,"_172":173,"_174":89,"_175":71,"_176":71,"_177":-5,"_178":34,"_58":179,"_180":-5,"_181":-5,"_182":-5,"_183":-5,"_184":185,"_186":185,"_187":188,"_189":188,"_190":188,"_191":185,"_192":185,"_193":278,"_195":279,"_197":280,"_52":53},[244,246,250,251,252,253,254],"files",[244,245,246,247,248,249,250,251,252,253,254],"counts",{"_235":34,"_236":32,"_237":34,"_35":238,"_239":240},[],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":32,"_70":71,"_38":72,"_17":34,"_73":24,"_74":75,"_76":53,"_77":-5,"_18":234},"upstreamProject",{"_36":43,"_13":14,"_169":-5,"_171":-5,"_54":55,"_193":232},"upstreamBranch",{"_36":37,"_38":230,"_40":231,"_13":16,"_42":43,"_17":44,"_45":46,"_47":48,"_49":50,"_51":-5,"_52":53,"_54":55,"_56":57,"_58":59,"_60":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1756484694515],["D",1756485044206],{"_11":57,"_208":233},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",[79,62],"pulls","branches","forks",{"_241":32,"_243":34},"connections",{"_241":34,"_242":34},"count","unfilledCount","emptyCount",{"_36":157,"_13":79,"_63":66,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":158,"_17":34,"_73":128,"_74":-5,"_76":53,"_77":-5,"_93":275,"_18":276},{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":32,"_70":71,"_38":162,"_17":34,"_73":24,"_74":75,"_76":53,"_77":-5,"_93":273,"_18":274},{"_36":124,"_13":125,"_63":126,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":127,"_17":34,"_73":128,"_74":-5,"_76":53,"_77":-5,"_93":271,"_18":272},{"_36":150,"_13":151,"_63":152,"_65":126,"_67":68,"_69":32,"_70":71,"_38":153,"_17":34,"_73":139,"_74":154,"_76":53,"_77":-5,"_93":269,"_18":270},{"_36":143,"_13":144,"_63":145,"_65":126,"_67":68,"_69":32,"_70":71,"_38":146,"_17":34,"_73":139,"_74":147,"_76":53,"_77":-5,"_93":267,"_18":268},{"_36":134,"_13":135,"_63":136,"_65":126,"_67":68,"_69":137,"_70":71,"_38":138,"_17":32,"_73":139,"_74":140,"_76":53,"_77":-5,"_93":265,"_18":266},{"_36":117,"_13":118,"_63":119,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":120,"_17":34,"_73":24,"_74":121,"_76":53,"_77":-5,"_93":263,"_18":264},{"_36":110,"_13":111,"_63":112,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":113,"_17":34,"_73":24,"_74":114,"_76":53,"_77":-5,"_93":261,"_18":262},{"_36":103,"_13":104,"_63":105,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":106,"_17":34,"_73":24,"_74":107,"_76":53,"_77":-5,"_93":259,"_18":260},{"_36":96,"_13":97,"_63":98,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":99,"_17":34,"_73":24,"_74":100,"_76":53,"_77":-5,"_93":257,"_18":258},{"_36":87,"_13":88,"_63":89,"_65":-5,"_67":68,"_69":32,"_70":71,"_38":90,"_17":34,"_73":91,"_74":92,"_76":53,"_77":-5,"_93":255,"_18":256},[],[88],[],[97],[],[104],[],[111],[],[118],[],[125,135],[],[125,144],[],[125,151],[247,248,249],[125],[],[79,62],[245],[79],["D",1756529872548],{"_11":12,"_208":204},{"_11":12,"_202":-5,"_203":204,"_172":173,"_205":206,"_207":53},{"_17":137,"_13":16,"_36":68,"_42":165,"_45":37,"_47":44,"_199":55,"_200":43,"_201":59,"_60":14,"_56":12},"ctx",{"_193":-5,"_227":314,"_315":316,"_317":318,"_319":53,"_320":53,"_321":53,"_322":71,"_323":-5,"_324":-7,"_325":-7,"_326":34,"_327":53,"_328":53,"_329":-5,"_330":53,"_331":53,"_332":53,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Realtime Agent