OpenAI Realtime API Voice Agent

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_299":300,"_301":302},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_225":-5,"_20":226,"_22":227,"_228":229,"_230":231,"_26":232,"_24":233,"_234":235,"_236":237,"_238":53,"_239":240,"_241":92,"_242":-5,"_243":-5,"_244":245},"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","yisding","name","hello-realtime-video","branchName","main","version","path","frontend/index.html","project",{"_36":180,"_13":14,"_38":181,"_51":-5,"_182":53,"_54":55,"_183":55,"_184":-5,"_185":-5,"_186":187,"_188":89,"_189":92,"_190":92,"_191":-5,"_192":193,"_58":194,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":200,"_201":200,"_202":203,"_204":203,"_205":203,"_206":200,"_207":200,"_208":209,"_210":211,"_212":213,"_52":53},"tree",[80,81,82,83,84,85,86],"file",{"_36":62,"_63":64,"_65":66,"_13":67,"_68":69,"_70":24,"_17":71,"_72":73,"_38":74,"_75":76,"_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":61},"pull","ahead",53,"behind",184,"envVars","id","be33420e-792a-11f0-bfa3-0224a6c84d84","createdAt",["D",1755188493466],"updatedAt",["D",1778178264384],"projectId","be2e762a-792a-11f0-bfa3-0224a6c84d84",379,"forkedBranchId","e004ac78-4230-11f0-834a-76b3cceeab13","forkedBranchVersion",47,"lockfileKey","1778178275619-esm.town_v_jubertioai_hello-realtime@379-main","deletedAt","isOwned",false,"privacy","public","userHandle","jubertioai","orgId","9c125825-8df1-4029-a26d-29049e9bd5a3","projectName","hello-realtime","d5f380ac-84f1-11f0-8ae1-0224a6c84d84","branchId","6d08270c-84d1-11f0-b251-0224a6c84d84","fileId","0198f5be-4c71-73ea-a6c2-9dae2b318c02","index.html","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","fileType",9,"parentId","0198f5be-4c71-73ea-a6c2-a384143c96e7",["D",1756483465980],"branchVersion",51,"label",[79,67],"frontend",{"_36":172,"_13":79,"_65":73,"_72":-5,"_63":64,"_75":106,"_91":92,"_38":173,"_17":123,"_70":139,"_68":-5,"_97":53,"_77":-5,"_98":174,"_18":175},{"_36":135,"_13":136,"_65":137,"_72":-5,"_63":64,"_75":106,"_91":92,"_38":138,"_17":123,"_70":139,"_68":-5,"_97":53,"_77":-5,"_98":140,"_18":141},{"_36":127,"_13":128,"_65":129,"_72":-5,"_63":64,"_75":130,"_91":92,"_38":131,"_17":123,"_70":24,"_68":132,"_97":53,"_77":-5,"_98":133,"_18":134},{"_36":119,"_13":120,"_65":121,"_72":-5,"_63":64,"_75":94,"_91":92,"_38":122,"_17":123,"_70":24,"_68":124,"_97":53,"_77":-5,"_98":125,"_18":126},{"_36":110,"_13":111,"_65":112,"_72":-5,"_63":64,"_75":113,"_91":92,"_38":114,"_17":115,"_70":24,"_68":116,"_97":53,"_77":-5,"_98":117,"_18":118},{"_36":101,"_13":102,"_65":103,"_72":-5,"_63":64,"_75":104,"_91":92,"_38":105,"_17":106,"_70":24,"_68":107,"_97":53,"_77":-5,"_98":108,"_18":109},{"_36":87,"_13":88,"_65":89,"_72":-5,"_63":64,"_75":90,"_91":92,"_38":93,"_17":94,"_70":95,"_68":96,"_97":53,"_77":14,"_98":99,"_18":100},"2d634cf8-84e0-11f0-a817-0224a6c84d84","main.tsx","0198f5be-4c71-73ea-a6c2-be6162e31cb7",35,"latest",true,["D",1756475881727],5,"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","deleted","children",[],[88],"8c7aff00-84d7-11f0-b6b5-0224a6c84d84","deno.json","f294aaa6-84d3-11f0-a56b-0224a6c84d84",14,["D",1756472175730],1,"{\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",[],[102],"d5fa080a-84f1-11f0-b09f-0224a6c84d84","README.md","0198f5be-4c71-73ea-a6c2-b95cbba37441",52,["D",1756483465986],4,"# 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",[],[111],"f29cbe12-84d3-11f0-bb6d-0224a6c84d84",".vtignore","f29cbec6-84d3-11f0-bb6d-0224a6c84d84",["D",1756470629152],0,".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[120],"00d9f8fe-84da-11f0-968b-0224a6c84d84",".gitignore","00d9f994-84da-11f0-968b-0224a6c84d84",23,["D",1756473230043],"node_modules",[],[128],"6d0d7df6-84d1-11f0-b251-0224a6c84d84","routes","0198f5be-4c71-73ea-a6c2-b5ff9a959440",["D",1756469545982],"directory",[142,143,144],[136],{"_36":164,"_13":165,"_65":166,"_72":137,"_63":64,"_75":167,"_91":92,"_38":168,"_17":106,"_70":151,"_68":169,"_97":53,"_77":-5,"_98":170,"_18":171},{"_36":155,"_13":156,"_65":157,"_72":137,"_63":64,"_75":158,"_91":92,"_38":159,"_17":160,"_70":151,"_68":161,"_97":53,"_77":-5,"_98":162,"_18":163},{"_36":145,"_13":146,"_65":147,"_72":137,"_63":64,"_75":148,"_91":92,"_38":149,"_17":150,"_70":151,"_68":152,"_97":53,"_77":-5,"_98":153,"_18":154},"4515677c-8928-11f0-b1e5-0224a6c84d84","utils.ts","0198f5be-4c71-73ea-a6c2-b2aa1b7e0116",54,["D",1756946649908],7,"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}",[],[136,146],"2d9ffd74-84e0-11f0-9d40-0224a6c84d84","rtc.ts","0198f5be-4c71-73ea-a6c2-ab5f9aa7c46d",39,["D",1756475882057],2,"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",[],[136,156],"8c9a6d90-84d7-11f0-9e8b-0224a6c84d84","observer.ts","0198f5be-4c71-73ea-a6c2-a6772b8df5d1",18,["D",1756472175938],"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",[],[136,165],"6d0d6eec-84d1-11f0-b251-0224a6c84d84",["D",1756469545982],[176],[79],{"_36":62,"_13":67,"_65":66,"_72":73,"_63":64,"_75":76,"_91":92,"_38":177,"_17":71,"_70":24,"_68":69,"_97":53,"_77":-5,"_98":178,"_18":179},["D",1756483465980],[],[79,67],"6d02aa02-84d1-11f0-b251-0224a6c84d84",["D",1756469545982],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","0198f5be-184d-71e1-b41c-beb75abbd1cb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",3,"0198f5be-184d-71e1-b41c-c346414fb634","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_224":220},"org",{"_11":12,"_218":-5,"_219":220,"_186":187,"_221":222,"_223":53},"branch",{"_17":148,"_13":16,"_36":64,"_42":180,"_45":37,"_47":214,"_215":55,"_216":43,"_217":59,"_60":14,"_56":12},195,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMXhkQ1RvaEpuVlRpaVBvT2tLNmFHbDBjbkQifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":180,"_13":14,"_38":295,"_51":-5,"_182":53,"_54":55,"_183":55,"_184":-5,"_185":-5,"_186":187,"_188":89,"_189":92,"_190":92,"_191":-5,"_192":193,"_58":194,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":200,"_201":200,"_202":203,"_204":203,"_205":203,"_206":200,"_207":200,"_208":296,"_210":297,"_212":298,"_52":53},[262,264,268,269,270,271,272],"files",[262,263,264,265,266,267,268,269,270,271,272],"counts",{"_253":123,"_254":106,"_255":193,"_35":256,"_257":258},[],{"_36":62,"_63":64,"_65":66,"_13":67,"_68":69,"_70":24,"_17":71,"_72":73,"_38":251,"_75":76,"_77":-5,"_18":252},"upstreamProject",{"_36":43,"_13":61,"_184":248,"_185":-5,"_54":55,"_208":249},"upstreamBranch",{"_36":37,"_38":246,"_40":247,"_13":16,"_42":43,"_17":44,"_45":46,"_47":48,"_49":50,"_51":-5,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1755188493466],["D",1778178264384],"Sample app for the OpenAI Realtime API",{"_11":57,"_224":250},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61901958-12bd-49a3-43e9-2f67f1617200/square512?exp=1789570799&sig=616111f0677b4a4ab67bf546207d7d26f480315db3de8da944cc4ad5af25c76a",["D",1756483465980],[79,67],"pulls","branches","forks",{"_259":106,"_261":123},"connections",{"_259":123,"_260":123},"count","unfilledCount","emptyCount",{"_36":172,"_13":79,"_65":73,"_72":-5,"_63":64,"_75":106,"_91":92,"_38":173,"_17":123,"_70":139,"_68":-5,"_97":53,"_77":-5,"_98":293,"_18":294},{"_36":62,"_13":67,"_65":66,"_72":73,"_63":64,"_75":76,"_91":92,"_38":177,"_17":71,"_70":24,"_68":69,"_97":53,"_77":-5,"_98":291,"_18":292},{"_36":135,"_13":136,"_65":137,"_72":-5,"_63":64,"_75":106,"_91":92,"_38":138,"_17":123,"_70":139,"_68":-5,"_97":53,"_77":-5,"_98":289,"_18":290},{"_36":164,"_13":165,"_65":166,"_72":137,"_63":64,"_75":167,"_91":92,"_38":168,"_17":106,"_70":151,"_68":169,"_97":53,"_77":-5,"_98":287,"_18":288},{"_36":155,"_13":156,"_65":157,"_72":137,"_63":64,"_75":158,"_91":92,"_38":159,"_17":160,"_70":151,"_68":161,"_97":53,"_77":-5,"_98":285,"_18":286},{"_36":145,"_13":146,"_65":147,"_72":137,"_63":64,"_75":148,"_91":92,"_38":149,"_17":150,"_70":151,"_68":152,"_97":53,"_77":-5,"_98":283,"_18":284},{"_36":127,"_13":128,"_65":129,"_72":-5,"_63":64,"_75":130,"_91":92,"_38":131,"_17":123,"_70":24,"_68":132,"_97":53,"_77":-5,"_98":281,"_18":282},{"_36":119,"_13":120,"_65":121,"_72":-5,"_63":64,"_75":94,"_91":92,"_38":122,"_17":123,"_70":24,"_68":124,"_97":53,"_77":-5,"_98":279,"_18":280},{"_36":110,"_13":111,"_65":112,"_72":-5,"_63":64,"_75":113,"_91":92,"_38":114,"_17":115,"_70":24,"_68":116,"_97":53,"_77":-5,"_98":277,"_18":278},{"_36":101,"_13":102,"_65":103,"_72":-5,"_63":64,"_75":104,"_91":92,"_38":105,"_17":106,"_70":24,"_68":107,"_97":53,"_77":-5,"_98":275,"_18":276},{"_36":87,"_13":88,"_65":89,"_72":-5,"_63":64,"_75":90,"_91":92,"_38":93,"_17":94,"_70":95,"_68":96,"_97":53,"_77":14,"_98":273,"_18":274},[],[88],[],[102],[],[111],[],[120],[],[128],[],[136,146],[],[136,156],[],[136,165],[265,266,267],[136],[],[79,67],[263],[79],["D",1756469545982],{"_11":12,"_224":220},{"_11":12,"_218":-5,"_219":220,"_186":187,"_221":222,"_223":53},{"_17":148,"_13":16,"_36":64,"_42":180,"_45":37,"_47":214,"_215":55,"_216":43,"_217":59,"_60":14,"_56":12},"ctx",{"_208":-5,"_243":332,"_333":334,"_335":336,"_337":53,"_338":53,"_339":53,"_340":92,"_341":-5,"_342":-7,"_343":-7,"_344":123,"_345":53,"_346":53,"_347":-5,"_348":53,"_349":53,"_350":53,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":16,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"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