OpenAI Realtime API Voice Agent

\n\n

\n\n \n \n",[18,68],"pulls","branches","forks",3,"envVars",{"_179":40,"_181":26},"connections",{"_179":26,"_180":26},"count","unfilledCount","emptyCount",{"_33":159,"_13":18,"_66":74,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":272,"_39":26,"_69":75,"_163":-5,"_70":30,"_164":-5,"_199":273,"_17":274},{"_33":167,"_13":68,"_66":67,"_43":74,"_35":36,"_160":40,"_161":24,"_37":269,"_39":26,"_69":21,"_163":169,"_70":30,"_164":-5,"_199":270,"_17":271},{"_33":265,"_13":233,"_66":226,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":266,"_39":26,"_69":75,"_163":-5,"_70":30,"_164":-5,"_199":267,"_17":268},{"_33":257,"_13":258,"_66":259,"_43":226,"_35":36,"_160":110,"_161":24,"_37":260,"_39":261,"_69":229,"_163":262,"_70":30,"_164":-5,"_199":263,"_17":264},{"_33":249,"_13":250,"_66":251,"_43":226,"_35":36,"_160":252,"_161":24,"_37":253,"_39":40,"_69":229,"_163":254,"_70":30,"_164":-5,"_199":255,"_17":256},{"_33":241,"_13":242,"_66":243,"_43":226,"_35":36,"_160":244,"_161":24,"_37":245,"_39":40,"_69":229,"_163":246,"_70":30,"_164":-5,"_199":247,"_17":248},{"_33":234,"_13":235,"_66":236,"_43":226,"_35":36,"_160":40,"_161":24,"_37":237,"_39":26,"_69":229,"_163":238,"_70":30,"_164":-5,"_199":239,"_17":240},{"_33":223,"_13":224,"_66":225,"_43":226,"_35":36,"_160":227,"_161":24,"_37":228,"_39":40,"_69":229,"_163":230,"_70":30,"_164":-5,"_199":231,"_17":232},{"_33":216,"_13":217,"_66":218,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":219,"_39":26,"_69":21,"_163":220,"_70":30,"_164":-5,"_199":221,"_17":222},{"_33":209,"_13":210,"_66":211,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":212,"_39":26,"_69":21,"_163":213,"_70":30,"_164":-5,"_199":214,"_17":215},{"_33":202,"_13":203,"_66":204,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":205,"_39":26,"_69":21,"_163":206,"_70":30,"_164":-5,"_199":207,"_17":208},{"_33":194,"_13":195,"_66":86,"_43":-5,"_35":36,"_160":40,"_161":24,"_37":196,"_39":26,"_69":197,"_163":198,"_70":30,"_164":-5,"_199":200,"_17":201},"85fbcedc-8b8c-11f0-8edb-0224a6c84d84","main.tsx",["D",1757209610704],"http","import { Hono } from \"npm:hono\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport mcp from \"./routes/mcp.ts\";\nimport rtc from \"./routes/rtc.ts\";\nimport sip from \"./routes/sip.ts\";\nimport observer from \"./routes/observer.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\")).links.self.val;\n\nconst app = new Hono();\napp.route(\"/rtc\", rtc);\napp.route(\"/sip\", sip);\napp.route(\"/observer\", observer);\napp.route(\"/mcp\", mcp);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;","children",[],[195],"85fbcda6-8b8c-11f0-8edb-0224a6c84d84","deno.json","019921da-ca23-70e1-b492-4227d01da8db",["D",1757209610704],"{\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}",[],[203],"85fbc9e6-8b8c-11f0-8edb-0224a6c84d84","README.md","019921da-ca23-70e1-b492-3f1b123de46c",["D",1757209610704],"# hello-mcp\n\n**Hello MCP** is a remix of OpenAI's hello-realtime demo that adds Model Context Protocol (MCP) support for server-side tool execution.\n\nThis demo showcases:\n- WebRTC-based voice conversations with OpenAI's Realtime API\n- **MCP (Model Context Protocol)** for secure server-side tool execution\n- A demo `getFavoriteFood` tool to demonstrate MCP functionality\n- Toggle between standard and MCP-enabled modes\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)).\n\n## What's New: MCP Support\n\n### Model Context Protocol (MCP)\nMCP enables server-side tool execution, keeping your business logic and API keys secure on the server rather than exposing them to the client.\n\n### Demo Tool: getFavoriteFood\nTry asking questions like:\n- \"What's Thomas's favorite food?\"\n- \"What does Brian like to eat?\"\n- \"Tell me about Yana's favorite food\"\n\nThe tool knows about: Thomas, Brian, Emil, Yana, Alex, Max, Justin, and Sam.\n\n## Architecture\n\n1. **Standard 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\n\n2. **MCP-Enhanced Flow** (when enabled):\n - Same WebRTC setup as above\n - OpenAI discovers tools via MCP protocol (`/mcp`)\n - Tools execute server-side when invoked\n - Results returned through MCP protocol\n - Client triggers response generation after tool completion\n\n## API Endpoints\n- `GET /` - serves the WebRTC-based app with MCP toggle\n- `POST /rtc` - creates a new WebRTC-based Realtime API session (with optional `?mcp=true`)\n- `POST /sip` - handles an incoming Realtime API SIP call\n- `POST /observer` - internal endpoint to establish a Realtime API websocket for session control\n- `POST /mcp` - MCP protocol endpoint for tool discovery and execution\n- `GET /mcp/tools` - Debug endpoint to list available tools\n\n## Project Structure\n```\n├── frontend/ \n│ └── index.html # HTML/JS application for WebRTC with MCP support\n├── main.tsx # Main entrypoint for the val.town app\n└── routes/\n |── mcp.ts # MCP protocol handler with getFavoriteFood tool\n |── observer.ts # Server-side session control for SIP & WebRTC\n |── rtc.ts # WebRTC session setup with MCP configuration\n |── sip.ts # SIP webhook handling and session setup\n └── utils.ts # Realtime API session configuration with MCP support\n```\n\n## How to Test MCP\n\n1. **Start the app** - Click \"Start\" and allow microphone access\n2. **Check MCP is enabled** - Ensure \"Use MCP Tools\" checkbox is checked\n3. **Ask about favorite foods** - Try \"What's Thomas's favorite food?\"\n4. **Watch the logs** - You'll see MCP events including tool discovery and execution\n5. **Try without MCP** - Uncheck the box and restart to see the difference\n\n## MCP Protocol Details\n\nThe MCP implementation follows the JSON-RPC 2.0 specification:\n\n### Initialize\n```json\n{\n \"method\": \"initialize\",\n \"params\": { \"protocolVersion\": \"2025-06-18\" }\n}\n```\n\n### Tools List\n```json\n{\n \"method\": \"tools/list\",\n \"result\": { \"tools\": [...] }\n}\n```\n\n### Tool Call\n```json\n{\n \"method\": \"tools/call\",\n \"params\": {\n \"name\": \"getFavoriteFood\",\n \"arguments\": { \"name\": \"Thomas\" }\n }\n}\n```",[],[210],"85fbc810-8b8c-11f0-8edb-0224a6c84d84",".vtignore","019921da-ca23-70e1-b492-3beba084136c",["D",1757209610704],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[217],"9c95a966-8b90-11f0-9923-0224a6c84d84","utils.ts","019921da-ca23-70e1-b492-30a0f7216a9b","019921da-ca23-70e1-b492-36e19819900e",13,["D",1757211366692],"script","const MODEL = \"gpt-realtime\";\nconst INSTRUCTIONS = `\n Greet the user in English, and thank them for trying the new OpenAI Realtime API.\n Give them a brief summary based on the list below, and then ask if they have any questions.\n Answer questions using the information below. For questions outside this scope,\n apologize and say you can't help with that.\n ---\n Short summary:\n - The Realtime API is now generally available, and has improved instruction following, voice naturalness, and audio quality.\n There are two new voices and it's easier to develop for. There's also a new telephony integration for phone scenarios.\n Full list of improvements:\n - generally available (no longer in beta)\n - two new voices (Cedar and Marin)\n - improved instruction following\n - enhanced voice naturalness\n - higher audio quality\n - improved handling of alphanumerics (eg, properly understanding credit card and phone numbers)\n - support for the OpenAI Prompts API\n - support for MCP-based tools\n - auto-truncation to reduce context size\n - native telephony support, making it simple to connect voice calls to existing Realtime API applications\n - when using WebRTC, you can connect without needing an ephemeral token\n - when using WebRTC, you can now control sessions (including tool calls) from the server\n - when using WebRTC, you can now send video to the model, and it can respond based on what it sees\n - many helpful bugfixes!\n`;\n\n//const VOICE = \"cedar\"; //male tenor\n//const VOICE = \"marin\"; //female alto\n//const VOICE = \"alloy\"; //female contralto\nconst VOICE = \"ash\"; //male\tbaritone\n//const VOICE = \"ballad\";// male\ttenor\n//const VOICE = \"coral\";//female soprano\n//const VOICE = \"echo\"; //male tenor\n//const VOICE = \"fable\"; //female alto\n//const VOICE = \"onyx\";//male base\n//const VOICE = \"nova\";//female alto\n//const VOICE = \"sage\";//female soprano\n//const VOICE = \"shimmer\";//female contralto\n//const VOICE = \"verse\"; //male tenor\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(mcpUrl?: string) {\n const session: any = {\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 // Add MCP configuration if requested\n if (mcpUrl) {\n session.tools = [{\n type: \"mcp\",\n server_label: \"hello-mcp-demo\",\n server_url: mcpUrl,\n authorization: \"demo-token-12345\", // In production, use a secure token\n require_approval: \"never\",\n }];\n }\n\n return session;\n}",[],[233,224],"routes","85fbc162-8b8c-11f0-8edb-0224a6c84d84","sip.ts","019921da-ca23-70e1-b492-2da1975660a1",["D",1757209610704],"import { Hono } from \"npm:hono\";\nimport { Webhook } from \"npm:svix\";\nimport { makeHeaders, makeSession } 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 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 console.log(\"✅ verified webhook:\", callId);\n } catch (error) {\n console.error(`🔴 verify failed: ${error}`);\n return c.text(\"Invalid signature\", 401);\n }\n\n // Accept the call.\n const url = `https://api.openai.com/v1/realtime/calls/${callId}/accept`;\n const headers = makeHeaders(\"application/json\");\n const body = JSON.stringify(makeSession());\n const opts = { method: \"POST\", headers, body };\n const resp = await fetch(url, opts);\n if (!resp.ok) {\n const errText = await resp.text().catch(() => \"\");\n console.error(`🔴 accept failed: ${errText}`);\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 trigger failed:\", e));\n\n return c.newResponse(null);\n});\n\nexport default sip;",[],[233,235],"975b5d60-8b90-11f0-9b53-0224a6c84d84","rtc.ts","019921da-ca23-70e1-b492-291623cbadd7",12,["D",1757211357927],"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 // Check if MCP mode is requested via query parameter\n const useMCP = c.req.query(\"mcp\") === \"true\";\n const selfUrl = new URL(c.req.url);\n const mcpUrl = useMCP ? `${selfUrl.origin}/mcp` : undefined;\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(mcpUrl)));\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 fetch(`${selfUrl.origin}/observer/${callId}`, { method: \"POST\" })\n .catch(() => {}); // catch to not crash the process\n\n return c.newResponse(resp.body, {\n headers: { \"Content-Type\": contentType },\n });\n});\n\nexport default rtc;",[],[233,242],"62637d50-8bb2-11f0-821f-0224a6c84d84","observer.ts","019921da-ca23-70e1-b492-25a38971a02c",22,["D",1757225871947],"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.output_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;",[],[233,250],"9f75dbec-8bb3-11f0-b43b-0224a6c84d84","mcp.ts","019921da-ca23-70e1-b492-20d90d830410",["D",1757226403907],32,"import { Hono } from \"npm:hono\";\nimport { StreamableHTTPTransport } from \"npm:@hono/mcp\";\nimport { McpServer } from \"npm:@modelcontextprotocol/sdk/server/mcp.js\";\nimport { z } from \"npm:zod\";\n\nconst mcp = new Hono();\nconst server = new McpServer({ name: \"hello-mcp\", version: \"1.0.0\" });\n\n// MCP entrypoint over HTTP.\nmcp.all(\"/\", async (c) => {\n const transport = new StreamableHTTPTransport();\n await server.connect(transport);\n return transport.handleRequest(c);\n});\n\nfunction makeJsonResponse(data: any) {\n return { content: [{ type: \"json\", data }] };\n}\n\nfunction makeErrorResponse(message: string) {\n return { content: [{ type: \"text\", text: message }], isError: true };\n}\n\nfunction wrap(fn: Function, args: any) {\n try {\n return makeJsonResponse(fn(args));\n } catch (e) {\n return makeErrorResponse(e.message);\n }\n}\n\n// ----- Demo tool -----\nserver.tool(\n \"getFavoriteFood\",\n \"Returns the favorite food for specific people\",\n z.object({\n name: z.string().describe(\"The person's name to look up\"),\n }),\n (x) => wrap(getFavoriteFood, x),\n);\n\nconst favoriteFoods: Record = {\n thomas: \"alsacian choucroute\",\n brian: \"trail mix\",\n emil: \"nutella\",\n yana: \"french macarons\",\n alex: \"brownies\",\n max: \"feta cheese\",\n justin: \"sushi\",\n sam: \"pizza\",\n};\n\nfunction getFavoriteFood({ name }: { name: string }) {\n const favoriteFood = favoriteFoods[name.toLowerCase()];\n if (!favoriteFood) {\n const knownFoods = Object.keys(favoriteFoods).join(\", \");\n const message =\n `I don't know ${name}'s favorite food. I know about: ${knownFoods}.`;\n throw new Error(message);\n }\n\n return { favoriteFood };\n}\n\nexport default mcp;",[],[233,258],"85fbc5f4-8b8c-11f0-8edb-0224a6c84d84",["D",1757209610704],[185,186,187,188,189],[233],["D",1757209610704],[],[18,68],["D",1757209610704],[183],[18],["D",1757209610704],{"_11":12,"_125":73},{"_11":12,"_121":-5,"_72":73,"_31":71,"_122":123,"_124":30},{"_39":110,"_13":16,"_33":36,"_111":77,"_112":63,"_113":64,"_114":81,"_115":116,"_117":118,"_119":14,"_120":12},"ctx",{"_52":-5,"_146":312,"_313":314,"_315":316,"_317":30,"_318":30,"_319":30,"_320":24,"_321":-5,"_322":-7,"_323":-7,"_324":26,"_325":30,"_326":30,"_327":-5,"_328":30,"_329":30,"_330":30,"_331":-5},"ENV",{"_283":284,"_285":286,"_287":16,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311},"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 with MCP

History · frontend