OpenAI Realtime API Voice Agent

\n\n

\n\n \n\n \n \n",[],[154,173],[154],{"_102":183,"_95":184,"_155":185,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":186,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":187,"_98":215},"adb0c26c-8924-11f0-be87-0224a6c84d84","routes","01991216-c9db-735e-bafd-1c56bffdbb91",["D",1756945107313],[188,197,206],{"_102":189,"_95":190,"_155":191,"_157":185,"_158":136,"_159":160,"_161":162,"_104":192,"_99":32,"_164":193,"_166":194,"_167":22,"_168":-5,"_169":195,"_98":196},"adb0bb64-8924-11f0-be87-0224a6c84d84","observer.ts","01991216-c9db-735e-bafd-1333c0280928",["D",1756945107313],"script","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",[],[184,190],{"_102":198,"_95":199,"_155":200,"_157":185,"_158":136,"_159":201,"_161":162,"_104":202,"_99":176,"_164":193,"_166":203,"_167":22,"_168":-5,"_169":204,"_98":205},"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;",[],[184,199],{"_102":207,"_95":208,"_155":209,"_157":185,"_158":136,"_159":210,"_161":162,"_104":211,"_99":176,"_164":193,"_166":212,"_167":22,"_168":-5,"_169":213,"_98":214},"451f3428-8928-11f0-b1e5-0224a6c84d84","utils.ts","01991216-c9db-735e-bafd-189fd98b0bc7",3,["D",1756946649969],"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}",[],[184,208],[184],{"_102":217,"_95":218,"_155":219,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":220,"_99":32,"_164":177,"_166":221,"_167":22,"_168":-5,"_169":222,"_98":223},"adb0c456-8924-11f0-be87-0224a6c84d84",".gitignore","01991216-c9db-735e-bafd-2023e5ddf519",["D",1756945107313],"node_modules",[],[218],{"_102":225,"_95":226,"_155":227,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":228,"_99":32,"_164":177,"_166":229,"_167":22,"_168":-5,"_169":230,"_98":231},"adb0c672-8924-11f0-be87-0224a6c84d84",".vtignore","01991216-c9db-735e-bafd-252d57c082df",["D",1756945107313],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[226],{"_102":233,"_95":234,"_155":235,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":236,"_99":32,"_164":177,"_166":237,"_167":22,"_168":-5,"_169":238,"_98":239},"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",[],[234],{"_102":241,"_95":242,"_155":243,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":244,"_99":32,"_164":177,"_166":245,"_167":22,"_168":-5,"_169":246,"_98":247},"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",[],[242],{"_102":249,"_95":250,"_155":251,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":252,"_99":32,"_164":253,"_166":254,"_167":22,"_168":255,"_169":256,"_98":257},"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",[],[250],"files",[152,171,182,188,197,206,216,224,232,240,248],"counts",{"_262":32,"_263":160,"_264":32,"_265":160},"pulls","branches","forks","envVars","contents",[268,271,274,277,280,283,286],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":269,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":270},["D",1756945107313],[154],{"_102":183,"_95":184,"_155":185,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":272,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":273},["D",1756945107313],[184],{"_102":217,"_95":218,"_155":219,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":275,"_99":32,"_164":177,"_166":221,"_167":22,"_168":-5,"_98":276},["D",1756945107313],[218],{"_102":225,"_95":226,"_155":227,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":278,"_99":32,"_164":177,"_166":229,"_167":22,"_168":-5,"_98":279},["D",1756945107313],[226],{"_102":233,"_95":234,"_155":235,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":281,"_99":32,"_164":177,"_166":237,"_167":22,"_168":-5,"_98":282},["D",1756945107313],[234],{"_102":241,"_95":242,"_155":243,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":284,"_99":32,"_164":177,"_166":245,"_167":22,"_168":-5,"_98":285},["D",1756945107313],[242],{"_102":249,"_95":250,"_155":251,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":287,"_99":32,"_164":253,"_166":254,"_167":22,"_168":255,"_98":288},["D",1756945107313],[250],"upstreamProject",{"_102":144,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":291},{"_93":292,"_128":293},"yisding","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMXhkQ1RvaEpuVlRpaVBvT2tLNmFHbDBjbkQifQ","upstreamBranch",{"_102":139,"_104":296,"_297":298,"_95":43,"_137":144,"_99":141,"_138":299,"_140":300,"_301":302,"_106":-5,"_149":22,"_108":109,"_148":292,"_16":146,"_147":96},["D",1756469545982],"updatedAt",["D",1756946649908],"be33420e-792a-11f0-bfa3-0224a6c84d84",195,"lockfileKey","1756946663217-esm.town_v_yisding_hello-realtime-video@54-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":309,"_314":315,"_316":32,"_317":318,"_356":162,"_357":313,"_358":359,"_362":-5},{"_102":103,"_95":96,"_104":310,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":311,"_130":312,"_133":313,"_149":22},["D",1756945107313],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},"ahead",4,"behind","diff",{"_319":320,"_167":321,"_322":323},"added",[],[],"modified",[324,342],{"_98":325,"_326":327,"_338":339},"frontend/index.html","targetFile",{"_102":328,"_95":173,"_155":329,"_157":330,"_158":139,"_159":331,"_161":162,"_104":332,"_99":333,"_164":177,"_166":334,"_167":22,"_168":-5,"_169":-7,"_98":335,"_336":337},"d5f380ac-84f1-11f0-8ae1-0224a6c84d84","0198f5be-4c71-73ea-a6c2-9dae2b318c02","0198f5be-4c71-73ea-a6c2-a384143c96e7",51,["D",1756483465980],9,"\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",[154,173],"contentHash","545cf4b630223318858876e487d7d1b3d1bb2505d1d85b7f9b71b8a4f5f41106","sourceFile",{"_102":172,"_95":173,"_155":174,"_157":156,"_158":136,"_159":135,"_161":162,"_104":175,"_99":176,"_164":177,"_166":178,"_167":22,"_168":-5,"_169":-7,"_98":340,"_336":341},[154,173],"e89934f813bb9971a5e9aafc853dcb2a8f3eaf9bf2666a56bbe8304f68ac5f38",{"_98":343,"_326":344,"_338":353},"routes/rtc.ts",{"_102":345,"_95":199,"_155":346,"_157":347,"_158":139,"_159":348,"_161":162,"_104":349,"_99":176,"_164":193,"_166":350,"_167":22,"_168":-5,"_169":-7,"_98":351,"_336":352},"2d9ffd74-84e0-11f0-9d40-0224a6c84d84","0198f5be-4c71-73ea-a6c2-ab5f9aa7c46d","0198f5be-4c71-73ea-a6c2-b5ff9a959440",39,["D",1756475882057],"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",[184,199],"429de4c162df8dfe64a4b5a7c882e43e3d5b827828fb456efcdf04725d5ad8c6",{"_102":198,"_95":199,"_155":200,"_157":185,"_158":136,"_159":201,"_161":162,"_104":202,"_99":176,"_164":193,"_166":203,"_167":22,"_168":-5,"_169":-7,"_98":354,"_336":355},[184,199],"5a14345e872b59d935e32c9a35164fa207cbbb574a249d1d9be1c670781cc34b","hasChanges","sourceBranch","targetBranch",{"_102":139,"_104":360,"_297":361,"_95":43,"_137":144,"_99":141,"_138":299,"_140":300,"_301":302,"_106":-5,"_149":22,"_108":109,"_148":292,"_16":146,"_147":96},["D",1756469545982],["D",1756946649908],"pull","actionData","errors"]

Realtime Agent

Realtime Agent

jubertioai

hello-realtime-video

Mergejubertioai/mainintoyisding/main

frontend/index.html+14-1

routes/rtc.ts+6-4