OpenAI Realtime API Voice Agent

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_289":290,"_291":292},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_215":-5,"_20":216,"_22":217,"_218":219,"_220":221,"_26":222,"_24":223,"_224":225,"_226":227,"_228":53,"_229":230,"_231":73,"_232":-5,"_233":-5,"_234":235},"routes/_app.x.$handle.$name.branch.$branch.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","jubertioai","name","hello-realtime-video","branchName","main","version","path","frontend","project",{"_36":172,"_13":14,"_38":173,"_51":-5,"_174":53,"_54":55,"_175":55,"_176":-5,"_177":-5,"_178":179,"_180":96,"_181":73,"_182":73,"_183":-5,"_184":34,"_58":185,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":191,"_192":191,"_193":194,"_195":194,"_196":194,"_197":191,"_198":191,"_199":200,"_201":202,"_203":204,"_52":53},"tree",[87,88,89,90,91,92,93],"file",{"_36":82,"_13":19,"_64":67,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":84,"_17":34,"_76":85,"_77":-5,"_79":53,"_80":-5,"_18":86},"contents",[61],"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",4,"behind",0,"envVars","id","6d08270c-84d1-11f0-b251-0224a6c84d84","createdAt",["D",1756469545982],"updatedAt",["D",1756946649908],"projectId","6d02aa02-84d1-11f0-b251-0224a6c84d84",54,"forkedBranchId","be33420e-792a-11f0-bfa3-0224a6c84d84","forkedBranchVersion",195,"lockfileKey","1764140377521-esm.town_v_yisding_hello-realtime-video@54-main","deletedAt","isOwned",false,"privacy","public","userHandle","yisding","orgId","0198f5be-184d-71e1-b41c-c346414fb634","projectName",{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":74,"_17":75,"_76":24,"_77":78,"_79":53,"_80":-5,"_18":81},"ad17b9d4-89cc-11f0-b763-0224a6c84d84","index.html","fileId","01991216-c9d8-7019-92f8-fc62a90e7304","parentId","01991216-c9db-735e-bafd-0f72ad18cb5b","branchId","ada9964a-8924-11f0-be87-0224a6c84d84","branchVersion",7,"latest",true,["D",1757017261874],2,"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","deleted","label",[19,63],"adb0b362-8924-11f0-be87-0224a6c84d84",1,["D",1756945107313],"directory",[19],{"_36":82,"_13":19,"_64":67,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":165,"_17":34,"_76":85,"_77":-5,"_79":53,"_80":-5,"_101":166,"_18":167},{"_36":132,"_13":133,"_64":134,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":135,"_17":34,"_76":85,"_77":-5,"_79":53,"_80":-5,"_101":136,"_18":137},{"_36":125,"_13":126,"_64":127,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":128,"_17":34,"_76":24,"_77":129,"_79":53,"_80":-5,"_101":130,"_18":131},{"_36":118,"_13":119,"_64":120,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":121,"_17":34,"_76":24,"_77":122,"_79":53,"_80":-5,"_101":123,"_18":124},{"_36":111,"_13":112,"_64":113,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":114,"_17":34,"_76":24,"_77":115,"_79":53,"_80":-5,"_101":116,"_18":117},{"_36":104,"_13":105,"_64":106,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":107,"_17":34,"_76":24,"_77":108,"_79":53,"_80":-5,"_101":109,"_18":110},{"_36":94,"_13":95,"_64":96,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":97,"_17":34,"_76":98,"_77":99,"_79":53,"_80":100,"_101":102,"_18":103},"adb0cbcc-8924-11f0-be87-0224a6c84d84","main.tsx","01991216-c9db-735e-bafd-309e712aa0eb",["D",1756945107313],"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","juberti-realtime-video","children",[],[95],"adb0c9e2-8924-11f0-be87-0224a6c84d84","deno.json","01991216-c9db-735e-bafd-2e63c3724f40",["D",1756945107313],"{\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",[],[105],"adb0c82a-8924-11f0-be87-0224a6c84d84","README.md","01991216-c9db-735e-bafd-29c164c48bb1",["D",1756945107313],"# 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",[],[112],"adb0c672-8924-11f0-be87-0224a6c84d84",".vtignore","01991216-c9db-735e-bafd-252d57c082df",["D",1756945107313],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[119],"adb0c456-8924-11f0-be87-0224a6c84d84",".gitignore","01991216-c9db-735e-bafd-2023e5ddf519",["D",1756945107313],"node_modules",[],[126],"adb0c26c-8924-11f0-be87-0224a6c84d84","routes","01991216-c9db-735e-bafd-1c56bffdbb91",["D",1756945107313],[138,139,140],[133],{"_36":158,"_13":159,"_64":160,"_66":134,"_68":69,"_70":83,"_72":73,"_38":161,"_17":34,"_76":146,"_77":162,"_79":53,"_80":-5,"_101":163,"_18":164},{"_36":150,"_13":151,"_64":152,"_66":134,"_68":69,"_70":153,"_72":73,"_38":154,"_17":75,"_76":146,"_77":155,"_79":53,"_80":-5,"_101":156,"_18":157},{"_36":141,"_13":142,"_64":143,"_66":134,"_68":69,"_70":144,"_72":73,"_38":145,"_17":75,"_76":146,"_77":147,"_79":53,"_80":-5,"_101":148,"_18":149},"451f3428-8928-11f0-b1e5-0224a6c84d84","utils.ts","01991216-c9db-735e-bafd-189fd98b0bc7",3,["D",1756946649969],"script","const MODEL = \"gpt-realtime\";\nconst INSTRUCTIONS = `Greet the user in English.`;\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 return session;\n}",[],[133,142],"7c03c36a-89cc-11f0-a30f-0224a6c84d84","rtc.ts","01991216-c9db-735e-bafd-14ebf3cf00c1",6,["D",1757017179078],"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 const responseHeaders = {\n \"Content-Type\": contentType,\n \"Location\": location,\n };\n return c.newResponse(resp.body, { headers: responseHeaders }); \n});\n\nexport default rtc;",[],[133,151],"adb0bb64-8924-11f0-be87-0224a6c84d84","observer.ts","01991216-c9db-735e-bafd-1333c0280928",["D",1756945107313],"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",[],[133,159],["D",1756945107313],[168],[19],{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":169,"_17":75,"_76":24,"_77":78,"_79":53,"_80":-5,"_101":170,"_18":171},["D",1757017261874],[],[19,63],"ada3e2cc-8924-11f0-be87-0224a6c84d84",["D",1756945107313],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","dbe13bc0-4230-11f0-95cd-ab37681351fa","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","9c125825-8df1-4029-a26d-29049e9bd5a3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_214":210},"org",{"_11":12,"_208":-5,"_209":210,"_178":179,"_211":212,"_213":53},"branch",{"_17":71,"_13":16,"_36":69,"_42":172,"_45":37,"_47":44,"_205":55,"_206":43,"_207":59,"_60":14,"_56":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61901958-12bd-49a3-43e9-2f67f1617200/square512?exp=1789570799&sig=616111f0677b4a4ab67bf546207d7d26f480315db3de8da944cc4ad5af25c76a","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":172,"_13":14,"_38":285,"_51":-5,"_174":53,"_54":55,"_175":55,"_176":-5,"_177":-5,"_178":179,"_180":96,"_181":73,"_182":73,"_183":-5,"_184":34,"_58":185,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":191,"_192":191,"_193":194,"_195":194,"_196":194,"_197":191,"_198":191,"_199":286,"_201":287,"_203":288,"_52":53},[252,254,258,259,260,261,262],"files",[252,253,254,255,256,257,258,259,260,261,262],"counts",{"_243":34,"_244":83,"_245":75,"_35":246,"_247":248},[241],{"_36":82,"_13":19,"_64":67,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":84,"_17":34,"_76":85,"_77":-5,"_79":53,"_80":-5,"_18":240},"upstreamProject",{"_36":43,"_13":14,"_176":-5,"_177":-5,"_54":55,"_199":238},"upstreamBranch",{"_36":37,"_38":236,"_40":237,"_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",1756469545982],["D",1756946649908],{"_11":57,"_214":239},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMXhkQ1RvaEpuVlRpaVBvT2tLNmFHbDBjbkQifQ",[19],{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":74,"_17":75,"_76":24,"_77":78,"_79":53,"_80":-5,"_18":242},[19,63],"pulls","branches","forks",{"_249":83,"_251":34},"connections",{"_249":34,"_250":34},"count","unfilledCount","emptyCount",{"_36":82,"_13":19,"_64":67,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":165,"_17":34,"_76":85,"_77":-5,"_79":53,"_80":-5,"_101":283,"_18":284},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":169,"_17":75,"_76":24,"_77":78,"_79":53,"_80":-5,"_101":281,"_18":282},{"_36":132,"_13":133,"_64":134,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":135,"_17":34,"_76":85,"_77":-5,"_79":53,"_80":-5,"_101":279,"_18":280},{"_36":158,"_13":159,"_64":160,"_66":134,"_68":69,"_70":83,"_72":73,"_38":161,"_17":34,"_76":146,"_77":162,"_79":53,"_80":-5,"_101":277,"_18":278},{"_36":150,"_13":151,"_64":152,"_66":134,"_68":69,"_70":153,"_72":73,"_38":154,"_17":75,"_76":146,"_77":155,"_79":53,"_80":-5,"_101":275,"_18":276},{"_36":141,"_13":142,"_64":143,"_66":134,"_68":69,"_70":144,"_72":73,"_38":145,"_17":75,"_76":146,"_77":147,"_79":53,"_80":-5,"_101":273,"_18":274},{"_36":125,"_13":126,"_64":127,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":128,"_17":34,"_76":24,"_77":129,"_79":53,"_80":-5,"_101":271,"_18":272},{"_36":118,"_13":119,"_64":120,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":121,"_17":34,"_76":24,"_77":122,"_79":53,"_80":-5,"_101":269,"_18":270},{"_36":111,"_13":112,"_64":113,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":114,"_17":34,"_76":24,"_77":115,"_79":53,"_80":-5,"_101":267,"_18":268},{"_36":104,"_13":105,"_64":106,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":107,"_17":34,"_76":24,"_77":108,"_79":53,"_80":-5,"_101":265,"_18":266},{"_36":94,"_13":95,"_64":96,"_66":-5,"_68":69,"_70":83,"_72":73,"_38":97,"_17":34,"_76":98,"_77":99,"_79":53,"_80":100,"_101":263,"_18":264},[],[95],[],[105],[],[112],[],[119],[],[126],[],[133,142],[],[133,151],[],[133,159],[255,256,257],[133],[],[19,63],[253],[19],["D",1756945107313],{"_11":12,"_214":210},{"_11":12,"_208":-5,"_209":210,"_178":179,"_211":212,"_213":53},{"_17":71,"_13":16,"_36":69,"_42":172,"_45":37,"_47":44,"_205":55,"_206":43,"_207":59,"_60":14,"_56":12},"ctx",{"_199":-5,"_233":322,"_323":324,"_325":326,"_327":53,"_328":53,"_329":53,"_330":73,"_331":-5,"_332":-7,"_333":-7,"_334":34,"_335":53,"_336":53,"_337":-5,"_338":53,"_339":53,"_340":53,"_341":-5},"ENV",{"_293":294,"_295":296,"_297":16,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321},"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"]

Realtime Agent