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",{"_101":100,"_32":46,"_109":87,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",39,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","routes/rtc.ts","latestPath","fileId","0198f5be-4c71-73ea-a6c2-ab5f9aa7c46d","name","rtc.ts","fileType","script","content","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 // 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()));\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","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","createdAt",["D",1756475882057],"branchVersion","branchId","6d08270c-84d1-11f0-b251-0224a6c84d84","id","6d02aa02-84d1-11f0-b251-0224a6c84d84","hello-realtime-video",["D",1756469545982],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0198f5be-184d-71e1-b41c-beb75abbd1cb","pinnedFileId","0198f5be-4c71-73ea-a6c2-be6162e31cb7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",3,"orgId","0198f5be-184d-71e1-b41c-c346414fb634","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":95,"_96":97,"_98":46,"_99":100},"isOwned",54,"main","projectId","forkedBranchId","be33420e-792a-11f0-bfa3-0224a6c84d84","forkedBranchVersion",195,"forkedProjectPrivacy","forkedProjectId","be2e762a-792a-11f0-bfa3-0224a6c84d84","forkedProjectOrgId","9c125825-8df1-4029-a26d-29049e9bd5a3","projectName","userHandle","yisding","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMXhkQ1RvaEpuVlRpaVBvT2tLNmFHbDBjbkQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":277,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":278,"_81":279,"_83":280,"_85":25},"tree",[215,217,221,222,223,224,225],"files",[215,216,217,218,219,220,221,222,223,224,225],"counts",{"_205":184,"_206":169,"_207":63,"_208":209,"_210":211},"contents",[146,147,148,149,150,151,152],"upstreamProject",{"_44":95,"_32":142,"_53":143,"_54":-5,"_50":51,"_79":144},"upstreamBranch",{"_44":90,"_39":133,"_134":135,"_32":87,"_88":95,"_13":136,"_89":137,"_91":138,"_139":140,"_48":-5,"_85":25,"_50":51,"_99":141,"_64":97,"_98":142},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1755188493466],"updatedAt",["D",1778178264384],379,"e004ac78-4230-11f0-834a-76b3cceeab13",47,"lockfileKey","1778178275619-esm.town_v_jubertioai_hello-realtime@379-main","jubertioai","hello-realtime","Sample app for the OpenAI Realtime API",{"_101":141,"_108":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61901958-12bd-49a3-43e9-2f67f1617200/square512?exp=1789585199&sig=980dbbe9032c84926463b2be6623e45298449cf371022d9fdbd0ac7cb00f17c1",{"_44":200,"_32":201,"_30":202,"_155":-5,"_42":43,"_41":169,"_157":59,"_39":203,"_13":184,"_34":198,"_36":-5,"_24":25,"_162":-5,"_27":204},{"_44":194,"_32":195,"_30":196,"_155":-5,"_42":43,"_41":169,"_157":59,"_39":197,"_13":184,"_34":198,"_36":-5,"_24":25,"_162":-5,"_27":199},{"_44":187,"_32":188,"_30":189,"_155":-5,"_42":43,"_41":190,"_157":59,"_39":191,"_13":184,"_34":20,"_36":192,"_24":25,"_162":-5,"_27":193},{"_44":180,"_32":181,"_30":182,"_155":-5,"_42":43,"_41":159,"_157":59,"_39":183,"_13":184,"_34":20,"_36":185,"_24":25,"_162":-5,"_27":186},{"_44":172,"_32":173,"_30":174,"_155":-5,"_42":43,"_41":175,"_157":25,"_39":176,"_13":177,"_34":20,"_36":178,"_24":25,"_162":-5,"_27":179},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":168,"_13":169,"_34":20,"_36":170,"_24":25,"_162":-5,"_27":171},{"_44":153,"_32":154,"_30":57,"_155":-5,"_42":43,"_41":156,"_157":59,"_39":158,"_13":159,"_34":160,"_36":161,"_24":25,"_162":46,"_27":163},"2d634cf8-84e0-11f0-a817-0224a6c84d84","main.tsx","parentId",35,"latest",["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","label",[154],"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",[165],"8cad8d3a-84d7-11f0-a818-0224a6c84d84","README.md","0198f5be-4c71-73ea-a6c2-b95cbba37441",19,["D",1756472175818],2,"# hello-realtime\n\nHello Realtime is a complete OpenAI Realtime application that supports WebRTC\nusers. You can access the app via WebRTC at https://hello-realtime.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",[173],"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",[181],"00d9f8fe-84da-11f0-968b-0224a6c84d84",".gitignore","00d9f994-84da-11f0-968b-0224a6c84d84",23,["D",1756473230043],"node_modules",[188],"6d0d7df6-84d1-11f0-b251-0224a6c84d84","routes","0198f5be-4c71-73ea-a6c2-b5ff9a959440",["D",1756469545982],"directory",[195],"6d0d6eec-84d1-11f0-b251-0224a6c84d84","frontend","0198f5be-4c71-73ea-a6c2-a384143c96e7",["D",1756469545982],[201],"pulls","branches","forks","envVars",{"_212":169,"_214":184},"connections",{"_212":184,"_213":184},"count","unfilledCount","emptyCount",{"_44":200,"_32":201,"_30":202,"_155":-5,"_42":43,"_41":169,"_157":59,"_39":274,"_13":184,"_34":198,"_36":-5,"_24":25,"_162":-5,"_227":275,"_27":276},{"_44":266,"_32":267,"_30":268,"_155":202,"_42":43,"_41":269,"_157":25,"_39":270,"_13":159,"_34":20,"_36":271,"_24":25,"_162":-5,"_227":272,"_27":273},{"_44":194,"_32":195,"_30":196,"_155":-5,"_42":43,"_41":169,"_157":59,"_39":263,"_13":184,"_34":198,"_36":-5,"_24":25,"_162":-5,"_227":264,"_27":265},{"_44":255,"_32":256,"_30":257,"_155":196,"_42":43,"_41":258,"_157":59,"_39":259,"_13":169,"_34":35,"_36":260,"_24":25,"_162":-5,"_227":261,"_27":262},{"_44":251,"_32":33,"_30":31,"_155":196,"_42":43,"_41":14,"_157":59,"_39":252,"_13":177,"_34":35,"_36":38,"_24":25,"_162":-5,"_227":253,"_27":254},{"_44":242,"_32":243,"_30":244,"_155":196,"_42":43,"_41":245,"_157":25,"_39":246,"_13":247,"_34":35,"_36":248,"_24":25,"_162":-5,"_227":249,"_27":250},{"_44":187,"_32":188,"_30":189,"_155":-5,"_42":43,"_41":190,"_157":59,"_39":239,"_13":184,"_34":20,"_36":192,"_24":25,"_162":-5,"_227":240,"_27":241},{"_44":180,"_32":181,"_30":182,"_155":-5,"_42":43,"_41":159,"_157":59,"_39":236,"_13":184,"_34":20,"_36":185,"_24":25,"_162":-5,"_227":237,"_27":238},{"_44":172,"_32":173,"_30":174,"_155":-5,"_42":43,"_41":175,"_157":25,"_39":233,"_13":177,"_34":20,"_36":178,"_24":25,"_162":-5,"_227":234,"_27":235},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":230,"_13":169,"_34":20,"_36":170,"_24":25,"_162":-5,"_227":231,"_27":232},{"_44":153,"_32":154,"_30":57,"_155":-5,"_42":43,"_41":156,"_157":59,"_39":226,"_13":159,"_34":160,"_36":161,"_24":25,"_162":46,"_227":228,"_27":229},["D",1756475881727],"children",[],[154],["D",1756472175730],[],[165],["D",1756472175818],[],[173],["D",1756470629152],[],[181],["D",1756473230043],[],[188],"60e4959c-84df-11f0-b6fd-0224a6c84d84","utils.ts","0198f5be-4c71-73ea-a6c2-b2aa1b7e0116",33,["D",1756475538653],4,"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() {\n return {\n type: \"realtime\",\n model: MODEL,\n instructions: INSTRUCTIONS,\n audio: {\n input: { noise_reduction: { type: \"near_field\" } },\n output: { voice: VOICE },\n },\n video: {\n input: { enabled: true },\n },\n };\n}\n",[],[195,243],"2d9ffd74-84e0-11f0-9d40-0224a6c84d84",["D",1756475882057],[],[195,33],"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",[],[195,256],["D",1756469545982],[218,219,220],[195],"2d9179f2-84e0-11f0-82f3-0224a6c84d84","index.html","0198f5be-4c71-73ea-a6c2-9dae2b318c02",36,["D",1756475882039],"\n\n \n \n \n OpenAI Realtime API Voice Agent\n \n \n \n \n\n

\n\n

\n\n \n \n\n",[],[201,267],["D",1756469545982],[216],[201],["D",1756469545982],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":95,"_96":97,"_98":46,"_99":100},"ctx",{"_79":-5,"_130":314,"_315":316,"_317":318,"_319":25,"_320":25,"_321":25,"_322":59,"_323":-5,"_324":-7,"_325":-7,"_326":184,"_327":25,"_328":25,"_329":-5,"_330":25,"_331":25,"_332":25,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":87,"_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","fdb67791413f4386b4dbf18f354029a617f6160f","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

Diff · v39