OpenAI Realtime API Voice Agent

Logged in as {session.user.username}

\n : Log in}\n \n ,\n );\n});\n\nexport default oauthMiddleware(app.fetch);\n",[185],["D",1779209326110],[79],"9855e1da-539b-11f1-b21e-ee650bb23af1","README.md","019e40f5-e221-74ab-85ac-172439c2b704",["D",1779206316505],"# hello-realtime\n\n**Hello Realtime** is a OpenAI Realtime app that supports both WebRTC and SIP\n(telephone) users. You can access the app via WebRTC at\n[hello-realtime.val.run](https://hello-realtime.val.run), or via SIP by calling\n425-800-0042.\n\nThis demo shows off the new SIP API, the new all-in-one WebRTC API, and the new\nserver-side websocket interface.\n\nIf you remix the app, you'll just need to pop in your own `OPENAI_API_KEY` (from\n[platform.openai.com](https://platform.openai.com)), and if you want SIP, the\n`OPENAI_SIGNING_SECRET`.\n\n## Architecture\n\n1. **WebRTC Flow**:\n - Browser connects to frontend\n - creates WebRTC offer\n - `/rtc` endpoint handles SDP negotiation with OpenAI\n - observer established to monitor session\n2. **SIP Flow**:\n - Phone calls triggers webhook\n - `/sip` endpoint verifies webhook and accepts call\n - observer established to monitor session\n\n## API Endpoints\n\n- `GET /` - serves the WebRTC-based app\n- `POST /rtc` - creates a new WebRTC-based Realtime API session\n - Supports optional `model` URL parameter to override the default model\n - Example: `POST /rtc?model=gpt-4o-realtime-preview`\n- `POST /sip` - handles an incoming Realtime API SIP call\n- `POST /observer` - internal endpoint to establish a Realtime API websocket for\n session control\n\n## Project Structure\n\n```\n├── frontend/ \n│ └── index.html # HTML/JS application for WebRTC\n├── main.tsx # Main entrypoint for the val.town app\n└── routes/\n |\n ├── agent.ts # Realtime API session configuration and tools\n ├── observer.ts # Server-side session control for SIP & WebRTC\n ├── rtc.ts # WebRTC session setup\n ├── sip.ts # SIP webhook handling and session setup\n └── utils.ts # Various HTTP helpers\n```\n\n## File Links\n\n- [`frontend/index.html`](./frontend/index.html)\n- [`main.tsx`](./main.tsx)\n- [`routes/agent.ts`](./routes/agent.ts)\n- [`routes/observer.ts`](./routes/observer.ts)\n- [`routes/rtc.ts`](./routes/rtc.ts)\n- [`routes/sip.ts`](./routes/sip.ts)\n- [`routes/utils.ts`](./routes/utils.ts)",[194],"9855e09a-539b-11f1-b21e-ee650bb23af1","routes","019e40f5-e221-74ab-85ac-12f63a65d7b7",["D",1779206316505],"directory",[200],"985591b2-539b-11f1-b21e-ee650bb23af1","frontend","019e40f5-e221-74ab-85ab-f9a994a70407",["D",1779206316505],[206],"pulls","branches","forks",2,"envVars",{"_218":213,"_220":187},"connections",{"_218":22,"_219":22},"count","unfilledCount","emptyCount",{"_33":205,"_13":206,"_85":207,"_87":-5,"_88":66,"_89":187,"_90":26,"_40":286,"_46":22,"_93":203,"_95":-5,"_73":56,"_97":-5,"_98":287,"_78":288},{"_33":279,"_13":280,"_85":281,"_87":207,"_88":66,"_89":187,"_90":26,"_40":282,"_46":22,"_93":162,"_95":283,"_73":56,"_97":-5,"_98":284,"_78":285},{"_33":199,"_13":200,"_85":201,"_87":-5,"_88":66,"_89":187,"_90":26,"_40":276,"_46":22,"_93":203,"_95":-5,"_73":56,"_97":-5,"_98":277,"_78":278},{"_33":269,"_13":270,"_85":271,"_87":201,"_88":66,"_89":187,"_90":26,"_40":272,"_46":22,"_93":244,"_95":273,"_73":56,"_97":-5,"_98":274,"_78":275},{"_33":262,"_13":263,"_85":264,"_87":201,"_88":66,"_89":187,"_90":26,"_40":265,"_46":22,"_93":244,"_95":266,"_73":56,"_97":-5,"_98":267,"_78":268},{"_33":255,"_13":256,"_85":257,"_87":201,"_88":66,"_89":187,"_90":26,"_40":258,"_46":22,"_93":244,"_95":259,"_73":56,"_97":-5,"_98":260,"_78":261},{"_33":248,"_13":249,"_85":250,"_87":201,"_88":66,"_89":187,"_90":26,"_40":251,"_46":22,"_93":244,"_95":252,"_73":56,"_97":-5,"_98":253,"_78":254},{"_33":240,"_13":241,"_85":242,"_87":201,"_88":66,"_89":187,"_90":26,"_40":243,"_46":22,"_93":244,"_95":245,"_73":56,"_97":-5,"_98":246,"_78":247},{"_33":193,"_13":194,"_85":195,"_87":-5,"_88":66,"_89":187,"_90":26,"_40":237,"_46":22,"_93":162,"_95":197,"_73":56,"_97":-5,"_98":238,"_78":239},{"_33":84,"_13":79,"_85":86,"_87":-5,"_88":66,"_89":65,"_90":26,"_40":91,"_46":92,"_93":94,"_95":96,"_73":56,"_97":-5,"_98":235,"_78":236},{"_33":184,"_13":185,"_85":186,"_87":-5,"_88":66,"_89":187,"_90":26,"_40":232,"_46":22,"_93":94,"_95":189,"_73":56,"_97":-5,"_98":233,"_78":234},["D",1779206316505],[],[185],[],[79],["D",1779206316505],[],[194],"9855d9c4-539b-11f1-b21e-ee650bb23af1","utils.ts","019e40f5-e221-74ab-85ac-0d3486667c63",["D",1779206316505],"script","const REALTIME_BASE_URL = \"https://api.openai.com/v1/realtime\";\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\n// Builds the URL for a Realtime API endpoint.\nexport function makeUrl(callId?: string, action?: string) {\n let url = REALTIME_BASE_URL;\n if (!callId) {\n // start call (POST)\n url += \"/calls\";\n } else if (action) {\n // accept, reject, hangup (POST)\n url += `/calls/${callId}/${action}`;\n } else {\n // observer (web socket)\n url += `?call_id=${callId}`;\n }\n return url;\n}\n\n// Builds the headers for a Realtime API endpoint.\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\n// Debug helper for printing Realtime API errors.\nexport async function getErrorText(resp: Response) {\n const errBody = await resp.text().catch(() => \"\");\n return `${resp.status} ${resp.statusText}: ${errBody}`;\n}",[],[200,241],"9855c7e0-539b-11f1-b21e-ee650bb23af1","sip.ts","019e40f5-e221-74ab-85ac-08c888a74048",["D",1779206316505],"import { Hono } from \"npm:hono\";\nimport { Webhook } from \"npm:svix\";\nimport { makeSession } from \"./agent.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst sip = new Hono();\n\n// POST /sip : webhook endpoint\nsip.post(\"/\", async (c) => {\n // Verify the webhook.\n const OPENAI_SIGNING_SECRET = Deno.env.get(\"OPENAI_SIGNING_SECRET\");\n if (!OPENAI_SIGNING_SECRET) {\n console.error(\"🔴 webhook secret not configured\");\n return c.text(\"Internal error\", 500);\n }\n const webhook = new Webhook(OPENAI_SIGNING_SECRET);\n const bodyStr = await c.req.text();\n let callId: string | undefined;\n let toNumber: string | undefined;\n try {\n const headers = Object.fromEntries(c.req.raw.headers.entries());\n const payload: any = webhook.verify(bodyStr, headers);\n callId = payload.data.call_id;\n toNumber = getToNumber(payload.data.sip_headers);\n const fromNumber = getFromNumber(payload.data.sip_headers);\n console.log(\"✅ verified webhook:\", callId, fromNumber, toNumber);\n } catch (error) {\n console.error(`🔴 verify failed: ${error}`);\n return c.text(\"Invalid signature\", 401);\n }\n\n // Accept the call. SIP calls come from phone users — there's no logged-in\n // Val Town user, so we don't attach an MCP token. The agent will run with\n // only the built-in `display_text` function tool (and no val.town MCP).\n const model = getModelForNumber(toNumber);\n const url = makeUrl(callId, \"accept\");\n const headers = makeHeaders(\"application/json\");\n const body = JSON.stringify(makeSession(model));\n const opts = { method: \"POST\", headers, body };\n const resp = await fetch(url, opts);\n if (!resp.ok) {\n console.error(`🔴 accept failed: ${await getErrorText(resp)}`);\n return c.text(\"Internal error\", 500);\n }\n console.log(\"✅ call accepted:\", 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 .catch((e) => console.error(\"observer start failed:\", e));\n\n return c.newResponse(null);\n});\n\nconst getToNumber = headers => getNumberFromSipHeader(headers, \"to\");\nconst getFromNumber = headers => getNumberFromSipHeader(headers, \"from\");\n\nfunction getNumberFromSipHeader(headers: any, name: string) {\n const header = getSipHeader(headers, name);\n const match = header?.match(/sip:\\+?(\\d+)@/);\n return match ? `+${match[1]}` : undefined;\n}\n\nfunction getSipHeader(headers: any, name: string) {\n return headers.find((h) => h.name.toLowerCase() === name)?.value;\n}\n\nfunction getModelForNumber(number: string) {\n const map = { \"+14258000074\": \"gpt-realtime-mini\" };\n return map[number];\n}\n\nexport default sip;",[],[200,249],"9855bade-539b-11f1-b21e-ee650bb23af1","rtc.ts","019e40f5-e221-74ab-85ac-0433257f1329",["D",1779206316505],"import { Hono } from \"npm:hono\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { makeSession } from \"./agent.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst rtc = new Hono();\n\n// POST /rtc : create a new call\nrtc.post(\"/\", async (c) => {\n // Require a logged-in Val Town user — their OAuth access token is used\n // to authenticate the embedded MCP tool against api.val.town.\n const session = await getOAuthUserData(c.req.raw);\n if (!session) {\n return c.text(\"Unauthorized — log in at /auth/login first\", 401);\n }\n\n // Extract model parameter from URL if provided\n const model = c.req.query(\"model\");\n if (model !== undefined) {\n console.log(\"🔧 Model parameter received:\", model);\n }\n\n // Parse video flag from query (?video=true)\n const video = c.req.query(\"video\") === \"true\";\n if (video) {\n console.log(\"📹 Video mode enabled\");\n }\n\n console.log(`🔑 starting call for @${session.user.username}`);\n\n // Create the call.\n const fd = new FormData();\n fd.set(\"sdp\", await c.req.text());\n fd.set(\n \"session\",\n JSON.stringify(makeSession(model, video, session.accessToken)),\n );\n const opts = { method: \"POST\", headers: makeHeaders(), body: fd };\n const resp = await fetch(makeUrl(), opts);\n if (!resp.ok) {\n console.error(`🔴 start call failed: ${await getErrorText(resp)}`);\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 .catch((e) => console.error(\"observer start failed:\", e));\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;\n",[],[200,256],"9855ad3c-539b-11f1-b21e-ee650bb23af1","observer.ts","019e40f5-e221-74ab-85ac-002479fbf3c6",["D",1779206316505],"import { Hono } from \"npm:hono\";\nimport WebSocket from \"npm:ws\";\nimport { createHandler } from \"./agent.ts\";\nimport { makeHeaders, makeUrl } from \"./utils.ts\";\n\nexport interface ObserverHandler {\n onInit(): void;\n onTool(name: string, args: any): void;\n onMcpCallCompleted(name: string, output: string | null): void;\n onOutputAudioStarted(): void;\n onOutputAudioStopped(): void;\n onOutputAudioCleared(): void;\n}\n\nexport class ObserverClient {\n private ws: WebSocket;\n private closeResolve: () => void;\n private closePromise: Promise;\n private handler: ObserverHandler;\n\n constructor(callId: string) {\n const url = makeUrl(callId);\n this.ws = new WebSocket(url, { headers: makeHeaders() });\n this.ws.on(\"open\", () => this.handleOpen());\n this.ws.on(\"message\", (data) => this.handleMessage(JSON.parse(data)));\n this.ws.on(\"error\", (err) => this.handleError(err));\n this.ws.on(\"close\", (ev) => this.handleClose(ev));\n this.closePromise = new Promise((resolve) =>\n this.closeResolve = resolve\n );\n this.handler = createHandler(this, callId);\n }\n createResponse() {\n this.sendMessage({ type: \"response.create\" });\n }\n async waitForClose() {\n await this.closePromise;\n }\n private sendMessage(message: any) {\n this.ws.send(JSON.stringify(message));\n }\n private handleOpen() {\n console.log(\"✅ websocket connected\");\n this.handler.onInit();\n }\n private async handleMessage(message: any) {\n if (!message.type.endsWith(\".delta\")) { // ignore verbose messages\n console.log(message);\n }\n switch (message.type) {\n case \"response.function_call_arguments.done\":\n this.handler.onTool(message.name, message.arguments);\n break;\n case \"response.output_item.done\":\n if (message.item?.type === \"mcp_call\") {\n this.handler.onMcpCallCompleted(message.item.name, message.item.output);\n }\n break;\n case \"output_audio_buffer.started\":\n this.handler.onOutputAudioStarted();\n break;\n case \"output_audio_buffer.stopped\":\n this.handler.onOutputAudioStopped();\n break;\n case \"output_audio_buffer.cleared\":\n this.handler.onOutputAudioCleared();\n break;\n }\n }\n private handleError(err: Error) {\n console.error(`🔴 websocket failed: ${err.message}`);\n this.closeResolve();\n }\n private handleClose(e: Event) {\n console.log(`websocket closed: ${e}`);\n this.closeResolve();\n }\n}\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 client = new ObserverClient(callId);\n await client.waitForClose();\n return c.newResponse(null);\n});\n\nexport default observer;",[],[200,263],"9855937e-539b-11f1-b21e-ee650bb23af1","agent.ts","019e40f5-e221-74ab-85ab-ff32ab2b0006",["D",1779206316505],"import { ObserverClient, ObserverHandler } from \"./observer.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst MODEL = \"gpt-realtime-2\";\nconst TRANSCRIBE_MODEL = \"gpt-4o-transcribe\";\nconst NR_TYPE = \"near_field\";\n\nconst towniePrompt =\n await (await fetch(\"https://www.val.town/townie/system-prompt\"))\n .text();\n\nconst VOICE = \"marin\";\n\n// Builds the declarative session configuration for a Realtime API session.\n//\n// `accessToken` is a Val Town API token used to authenticate the embedded MCP\n// tool call to api.val.town. When the call originates from a logged-in user\n// (WebRTC flow), pass their OAuth access token so the MCP server acts on their\n// behalf. When omitted (e.g. SIP phone calls with no user identity), the MCP\n// tool is not attached and the model will not be able to read/edit vals.\n//\n// The video parameter is accepted but not added to the session config —\n// video input works automatically via the WebRTC video track; the model\n// receives video frames without any special session-level flag.\nexport function makeSession(\n modelOverride?: string,\n _video?: boolean,\n accessToken?: string,\n) {\n const model = modelOverride || MODEL;\n\n const tools: any[] = [\n {\n type: \"function\",\n name: \"display_text\",\n description:\n \"Display formatted text to the user's screen. Use this to show code snippets, links, lists, or any information that is better read than heard. The content supports full markdown including links, code blocks, bold, italic, lists, etc. Always use this tool when sharing URLs, code, or structured information.\",\n parameters: {\n type: \"object\",\n properties: {\n title: {\n type: \"string\",\n description: \"A short title for the displayed content\",\n },\n content: {\n type: \"string\",\n description:\n \"The markdown-formatted text content to display. Include links as [text](url), code as ```lang blocks, etc.\",\n },\n },\n required: [\"content\"],\n },\n },\n ];\n\n // Only attach the Val Town MCP server if we have an access token to\n // authenticate it with. Without one, the MCP endpoint would 401.\n if (accessToken) {\n tools.unshift({\n type: \"mcp\",\n server_label: \"val_town_mcp\",\n server_url: \"https://api.val.town/v3/mcp\",\n require_approval: \"never\",\n headers: {\n \"Authorization\": `Bearer ${accessToken}`,\n },\n });\n }\n\n return {\n type: \"realtime\",\n model,\n instructions: towniePrompt,\n audio: {\n input: {\n noise_reduction: { type: NR_TYPE },\n transcription: { model: TRANSCRIBE_MODEL },\n },\n output: { voice: VOICE },\n },\n tools,\n };\n}\n\n// AgentHandler implements the agent runtime behavior (tool calling, etc).\nclass AgentHandler implements ObserverHandler {\n private audioActive = false;\n private callEnding = false;\n constructor(private client: ObserverClient, private callId: string) {}\n onInit() {\n // Trigger a response immediately.\n // this.client.createResponse();\n }\n async onTool(name: string, _args: any) {\n console.log(\"🔧 function tool call:\", name, _args);\n }\n async onMcpCallCompleted(name: string, output: string | null) {\n console.log(\"🔧 MCP call completed:\", name, output?.slice(0, 200));\n // After an MCP tool call completes, the model has the results in context\n // but won't automatically generate a follow-up response. We need to\n // explicitly trigger a new response so it speaks the results.\n this.client.createResponse();\n }\n async onOutputAudioStarted() {\n this.audioActive = true;\n }\n async onOutputAudioStopped() {\n // Shut down the call and websocket once audio has finished spooling.\n this.audioActive = false;\n if (this.callEnding) {\n await this.hangup();\n }\n }\n async onOutputAudioCleared() {\n this.audioActive = false;\n }\n private async hangup() {\n const url = makeUrl(this.callId, \"hangup\");\n const resp = await fetch(url, { method: \"POST\", headers: makeHeaders() });\n if (!resp.ok) {\n console.error(`🔴 end call failed: ${await getErrorText(resp)}`);\n return;\n }\n\n console.log(\"✅ call ended\");\n }\n}\n\n// Creates the runtime handler for the session.\nexport function createHandler(client: ObserverClient, callId: string) {\n return new AgentHandler(client, callId);\n}\n",[],[200,270],["D",1779206316505],[224,225,226,227,228],[200],"98550a1c-539b-11f1-b21e-ee650bb23af1","index.html","019e40f5-e221-74ab-85ab-f4ad8ce139ad",["D",1779206316505],"\n\n \n \n \n OpenAI Realtime API Voice Agent\n \n \n \n \n \n\n

\n\n

\n\n \n \n",[],[206,280],["D",1779206316505],[222],[206],["D",1779206316505],["D",1789498239291],{"_11":12,"_151":147},{"_11":12,"_144":145,"_146":147,"_115":116,"_148":149,"_150":56},{"_46":65,"_13":16,"_33":66,"_44":67,"_48":39,"_50":47,"_68":58,"_69":45,"_70":62,"_63":14,"_59":12},"ctx",{"_139":-5,"_172":327,"_328":329,"_330":331,"_332":56,"_333":56,"_334":56,"_335":26,"_336":-5,"_337":-7,"_338":-7,"_339":22,"_340":56,"_341":56,"_342":-5,"_343":56,"_344":56,"_345":56,"_346":-5},"ENV",{"_298":299,"_300":301,"_302":16,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326},"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

Compare

Mergedcm31/mainintostevekrouse/main

Hmain.tsx+1-0