OpenAI Realtime API Voice Agent

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_279":280,"_281":282},"routes/_app.x.$handle.$name",{"_96":95,"_31":42,"_104":83,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":117,"_118":119,"_120":24,"_121":122,"_123":55,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","CLAUDE.md","latestPath","fileId","1a34648e-8830-11f0-a44c-0224a6c84d84","name","fileType","content","# Hello-Transcription - OpenAI Realtime API Transcription Demo\n\n## 🎯 Project Overview\n\nHello-Transcription demonstrates the transcription-only mode of OpenAI's Realtime API. Unlike the conversational mode, this implementation focuses purely on speech-to-text conversion without generating AI responses, making it ideal for subtitles, live captions, meeting transcriptions, and other transcription-focused use cases.\n\n**Created:** September 2, 2025 \n**Platform:** Val Town \n**API:** OpenAI Realtime API (Transcription Mode) \n**Key Feature:** Real-time streaming transcription with multiple model support\n\n## 🏗️ Technical Stack\n\n- **Runtime:** Deno (Val Town platform)\n- **Framework:** Hono (lightweight web framework)\n- **Transcription:** OpenAI Realtime API in transcription mode\n- **Connection:** WebRTC with data channel for events\n- **Frontend:** Vanilla JavaScript with split-view interface\n- **Models:** GPT-4o Transcribe, GPT-4o Mini Transcribe, Whisper-1\n\n## 📁 Project Structure\n\n```\nhello-transcription/\n├── frontend/\n│ └── index.html # Split-view transcription interface\n├── routes/\n│ ├── rtc.ts # WebRTC session setup for transcription\n│ ├── observer.ts # WebSocket observer for transcription events\n│ └── utils.ts # Transcription session configuration\n├── main.tsx # Main entry point\n├── deno.json # Deno configuration\n├── README.md # User documentation\n└── CLAUDE.md # This file - technical documentation\n```\n\n## 🔑 Core Concepts\n\n### Transcription vs Conversation Mode\n\nThe Realtime API supports two distinct modes:\n\n1. **Conversation Mode** (`type: \"realtime\"`):\n - Two-way interaction with AI\n - User speaks → AI responds\n - Used in hello-realtime and hello-mcp\n\n2. **Transcription Mode** (`type: \"transcription\"`):\n - One-way speech-to-text only\n - User speaks → Text output\n - No AI responses generated\n - Lower latency, lower cost\n - This demo uses transcription mode\n\n### Transcription Session Object\n\n```typescript\n{\n type: \"transcription\",\n input_audio_format: \"pcm16\",\n input_audio_transcription: {\n model: \"gpt-4o-transcribe\", // or \"gpt-4o-mini-transcribe\", \"whisper-1\"\n prompt: \"\", // Optional context hint\n language: \"en\" // ISO-639-1 language code\n },\n turn_detection: {\n type: \"server_vad\",\n threshold: 0.5,\n prefix_padding_ms: 300,\n silence_duration_ms: 500\n },\n input_audio_noise_reduction: {\n type: \"near_field\" // or \"far_field\", null\n },\n include: [\"item.input_audio_transcription.logprobs\"] // Optional\n}\n```\n\n## 🛠️ Key Components\n\n### 1. Utils Configuration (`/routes/utils.ts`)\n\nHandles transcription session configuration with sensible defaults:\n\n```typescript\nexport function makeTranscriptionSession(config: TranscriptionConfig = {}) {\n const {\n model = \"gpt-4o-transcribe\",\n language = \"en\",\n prompt = \"\",\n enableVAD = true,\n noiseReduction = \"near_field\",\n includeLogprobs = false\n } = config;\n \n // Build session object...\n}\n```\n\n**Key Configuration Options:**\n- **model**: Transcription model selection\n- **language**: Primary language for better accuracy\n- **prompt**: Context hints (e.g., \"Expect medical terminology\")\n- **enableVAD**: Automatic voice activity detection\n- **noiseReduction**: Audio preprocessing type\n- **includeLogprobs**: Confidence scores for words\n\n### 2. RTC Route Handler (`/routes/rtc.ts`)\n\nCreates WebRTC sessions specifically for transcription:\n\n```typescript\n// Get config from query params\nconst model = c.req.query(\"model\") || \"gpt-4o-transcribe\";\nconst language = c.req.query(\"language\") || \"en\";\nconst vad = c.req.query(\"vad\") !== \"false\";\nconst logprobs = c.req.query(\"logprobs\") === \"true\";\n\n// Create transcription session\nconst sessionConfig = makeTranscriptionSession({\n model,\n language,\n enableVAD: vad,\n includeLogprobs: logprobs\n});\n```\n\n**Important:** Uses `type: \"transcription\"` not `type: \"realtime\"`\n\n### 3. Observer WebSocket (`/routes/observer.ts`)\n\nMonitors transcription events via server-side WebSocket:\n\n```typescript\nws.onmessage = (event) => {\n const data = JSON.parse(event.data);\n \n if (data.type === \"conversation.item.input_audio_transcription.delta\") {\n // Streaming partial transcription\n console.log(`📝 Transcription delta: \"${data.delta}\"`);\n } else if (data.type === \"conversation.item.input_audio_transcription.completed\") {\n // Final transcription for segment\n console.log(`✅ Transcription completed: \"${data.transcript}\"`);\n }\n};\n```\n\n### 4. Frontend Interface (`/frontend/index.html`)\n\nSplit-view interface with real-time transcription display:\n\n#### Left Panel - Transcriptions\n- Shows live transcription stream\n- Partial transcriptions update in real-time\n- Final transcriptions marked with green border\n- Each segment timestamped\n\n#### Right Panel - Event Logs\n- Technical event stream\n- Debug information\n- Connection status\n\n#### Data Channel Handling\n```javascript\ndataChannel.onmessage = (event) => {\n const data = JSON.parse(event.data);\n \n if (data.type === \"conversation.item.input_audio_transcription.delta\") {\n // Update partial transcription\n addTranscript(data.item_id, data.delta, false);\n } else if (data.type === \"conversation.item.input_audio_transcription.completed\") {\n // Mark transcription as final\n addTranscript(data.item_id, data.transcript, true);\n }\n};\n```\n\n## 📊 Model Comparison\n\n### GPT-4o Transcribe\n- **Streaming:** Yes - incremental updates via delta events\n- **Latency:** Low\n- **Accuracy:** High\n- **Use Case:** Live subtitles, real-time captions\n\n### GPT-4o Mini Transcribe\n- **Streaming:** Yes - incremental updates\n- **Latency:** Very low\n- **Accuracy:** Good\n- **Use Case:** Quick transcriptions, lower cost\n\n### Whisper-1\n- **Streaming:** No - complete segments only\n- **Latency:** Higher (waits for complete utterance)\n- **Accuracy:** Very high\n- **Use Case:** High-accuracy transcriptions, post-processing\n\n## 🔄 Event Flow\n\n### Transcription Event Sequence\n\n1. **Audio Input**\n ```\n User speaks → Microphone → WebRTC → OpenAI\n ```\n\n2. **VAD Processing** (if enabled)\n ```\n Voice detected → Buffer audio → Silence detected → Commit buffer\n ```\n\n3. **Transcription Events**\n ```\n input_audio_buffer.committed\n ↓\n conversation.item.input_audio_transcription.delta (streaming models)\n ↓\n conversation.item.input_audio_transcription.completed\n ```\n\n### Event Types\n\n#### Delta Event (Streaming)\n```json\n{\n \"type\": \"conversation.item.input_audio_transcription.delta\",\n \"item_id\": \"item_003\",\n \"content_index\": 0,\n \"delta\": \"Hello, how\"\n}\n```\n\n#### Completed Event\n```json\n{\n \"type\": \"conversation.item.input_audio_transcription.completed\",\n \"item_id\": \"item_003\",\n \"content_index\": 0,\n \"transcript\": \"Hello, how are you today?\"\n}\n```\n\n## ⚙️ Configuration Details\n\n### Voice Activity Detection (VAD)\n\nVAD automatically detects speech segments:\n\n```typescript\nturn_detection: {\n type: \"server_vad\",\n threshold: 0.5, // Sensitivity (0-1)\n prefix_padding_ms: 300, // Audio before speech\n silence_duration_ms: 500 // Silence to end segment\n}\n```\n\n**VAD Disabled:**\n```typescript\nturn_detection: null // Manual control required\n```\n\n### Noise Reduction\n\nThree noise reduction modes:\n\n1. **near_field**: Optimized for close microphones (default)\n2. **far_field**: For distant microphones/speakers\n3. **null**: No noise reduction\n\n### Language Configuration\n\nISO-639-1 language codes improve accuracy:\n- \"en\" - English\n- \"es\" - Spanish \n- \"fr\" - French\n- \"de\" - German\n- \"zh\" - Chinese\n- \"ja\" - Japanese\n\n### Logprobs (Confidence Scores)\n\nWhen enabled, provides word-level confidence:\n\n```typescript\ninclude: [\"item.input_audio_transcription.logprobs\"]\n```\n\nReturns probability scores for each transcribed word, useful for:\n- Highlighting uncertain words\n- Quality assessment\n- Post-processing decisions\n\n## 🧪 Testing Guide\n\n### Local Development\n\n1. **Setup Environment**\n ```bash\n # Create .env file\n echo \"OPENAI_API_KEY=sk-...\" > .env\n \n # Install Deno\n curl -fsSL https://deno.land/install.sh | sh\n ```\n\n2. **Run Development Server**\n ```bash\n # With auto-reload\n deno run --watch --allow-all main.tsx\n \n # Or standard\n deno run --allow-all main.tsx\n ```\n\n3. **Test Transcription**\n - Open http://localhost:8000\n - Select model and language\n - Click \"Start\"\n - Speak clearly\n - Watch transcriptions appear\n\n### Testing Different Models\n\n1. **Test Streaming (GPT-4o)**\n - Select \"GPT-4o Transcribe\"\n - Speak continuously\n - Notice incremental updates\n\n2. **Test Non-Streaming (Whisper-1)**\n - Select \"Whisper-1\"\n - Speak, then pause\n - Notice complete segments only\n\n3. **Test VAD**\n - Enable VAD\n - Speak with pauses\n - Notice automatic segmentation\n\n4. **Test Without VAD**\n - Disable VAD\n - Requires manual commit (not implemented in this demo)\n\n## 🐛 Common Issues & Solutions\n\n### Issue: No transcriptions appearing\n**Solutions:**\n- Check microphone permissions\n- Verify OPENAI_API_KEY is set\n- Check browser console for errors\n- Ensure WebRTC connection established\n\n### Issue: Transcriptions cut off mid-sentence\n**Solutions:**\n- Adjust VAD silence_duration_ms (longer = fewer cuts)\n- Try different VAD threshold\n- Consider using different model\n\n### Issue: Poor transcription accuracy\n**Solutions:**\n- Set correct language parameter\n- Use appropriate noise reduction setting\n- Provide context via prompt parameter\n- Try higher accuracy model (Whisper-1)\n\n### Issue: High latency\n**Solutions:**\n- Use GPT-4o Mini for lower latency\n- Check network connection\n- Consider disabling logprobs\n\n## 📈 Performance Characteristics\n\n### Latency Comparison\n- **GPT-4o Mini**: ~100-200ms first token\n- **GPT-4o**: ~150-250ms first token \n- **Whisper-1**: ~500-1000ms (full segment)\n\n### Throughput\n- Handles real-time audio (16kHz PCM16)\n- Multiple concurrent sessions supported\n- No buffering required for streaming models\n\n### Cost Optimization\n- Transcription-only mode is cheaper than conversation mode\n- No AI inference costs\n- GPT-4o Mini most cost-effective\n- Whisper-1 for batch/accuracy needs\n\n## 🔒 Security Considerations\n\n### Current Implementation\n- API key stored in environment variable\n- No authentication on endpoints\n- No rate limiting\n- Single-tenant design\n\n### Production Recommendations\n1. **Authentication**: Add user authentication\n2. **Rate Limiting**: Implement per-user limits\n3. **CORS**: Configure appropriate origins\n4. **Monitoring**: Track usage and errors\n5. **Encryption**: Ensure HTTPS only\n6. **Token Security**: Use short-lived tokens\n\n## 🚀 Deployment\n\n### Val Town Deployment\n\n1. **Create/Remix Val**\n ```bash\n vt remix emcho/hello-transcription my-transcription\n ```\n\n2. **Set Environment**\n - Add `OPENAI_API_KEY` in Val Town secrets\n\n3. **Deploy**\n ```bash\n vt push\n ```\n\n4. **Access**\n - URL: `https://[your-val-name].val.run`\n\n### Environment Variables\n- `OPENAI_API_KEY` - Required for OpenAI API access\n\n## 📝 Future Enhancements\n\n### Potential Features\n\n1. **Recording & Export**\n - Save transcriptions to file\n - Export as SRT/VTT subtitles\n - Download audio recordings\n\n2. **Advanced Controls**\n - Manual VAD control\n - Custom VAD parameters UI\n - Prompt templates\n\n3. **Multi-Stream**\n - Multiple speaker support\n - Speaker diarization\n - Parallel transcriptions\n\n4. **Post-Processing**\n - Punctuation enhancement\n - Grammar correction\n - Translation\n\n5. **Visualization**\n - Audio waveform display\n - VAD activity indicator\n - Confidence heat map\n\n6. **Integration**\n - Webhook support\n - Real-time API streaming\n - Database storage\n\n## 🔗 References\n\n### Documentation\n- [OpenAI Realtime Transcription Guide](https://platform.openai.com/docs/guides/realtime-transcription)\n- [Realtime API Reference](https://platform.openai.com/docs/api-reference/realtime)\n- [Voice Activity Detection Guide](https://platform.openai.com/docs/guides/realtime-vad)\n- [Val Town Documentation](https://docs.val.town)\n\n### Related Projects\n- [hello-realtime](https://hello-realtime.val.run) - Conversation mode demo\n- [hello-mcp](https://github.com/hello-mcp) - MCP tool execution demo\n\n### Key Differences from Conversation Mode\n1. Session type: `transcription` vs `realtime`\n2. No AI responses generated\n3. Different event types\n4. Lower latency and cost\n5. Focused on speech-to-text only\n\n## 💡 Implementation Notes\n\n### Critical Discoveries\n1. **Session Type**: Must use `type: \"transcription\"` not `type: \"realtime\"`\n2. **Event Names**: Different from conversation mode events\n3. **Model Behavior**: Whisper doesn't stream, GPT-4o models do\n4. **VAD Impact**: Significantly affects transcription segmentation\n5. **Language Setting**: Dramatically improves accuracy for non-English\n\n### Best Practices\n1. Always specify language for non-English content\n2. Use near_field noise reduction for headset mics\n3. Enable VAD for natural speech segmentation\n4. Choose model based on latency vs accuracy needs\n5. Monitor item_id for proper segment ordering\n\n## 🎯 Summary\n\nHello-Transcription successfully demonstrates the transcription-only capabilities of OpenAI's Realtime API. Key achievements:\n\n1. **Pure Transcription**: No AI responses, focused solely on speech-to-text\n2. **Model Flexibility**: Support for three different transcription models\n3. **Real-time Streaming**: Live transcription updates for supported models\n4. **Configuration Options**: VAD, noise reduction, language, logprobs\n5. **Clean Interface**: Split-view design for transcriptions and logs\n\nThis implementation serves as a foundation for building transcription-focused applications like live captioning, meeting transcription, subtitle generation, and accessibility tools.","createdAt",["D",1756840062786],"branchVersion","branchId","509ca3b6-882f-11f0-9954-0224a6c84d84","id","50991944-882f-11f0-9954-0224a6c84d84","hello-transcription",["D",1756839724543],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0198f8d1-d70f-76ea-a55f-2b5ba506023d","pinnedFileId","01990bce-c638-714e-97a4-20de8c449fb9","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0198f8d1-d70f-76ea-a55f-2ed16889c1b0","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":51,"_100":101,"_102":24},"branch",{"_13":82,"_31":83,"_40":39,"_84":41,"_85":86,"_87":88,"_89":47,"_90":91,"_92":61,"_93":42,"_94":95},"isOwned",45,"main","projectId","forkedBranchId","43b7750c-87f0-11f0-ba02-0224a6c84d84","forkedBranchVersion",15,"forkedProjectPrivacy","forkedProjectId","43b401c4-87f0-11f0-ba02-0224a6c84d84","forkedProjectOrgId","projectName","userHandle","emcho","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMXpKcFhORzY4VDlCZlRBZWUybTNFMmV3bDYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":275,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":276,"_77":277,"_79":278,"_81":24},"tree",[197,199,205,206,207,208,209],"files",[197,198,199,200,201,202,203,204,205,206,207,208,209],"counts",{"_187":59,"_188":148,"_189":148,"_190":191,"_192":193},"contents",[138,139,140,141,142,143,144],"upstreamProject",{"_40":91,"_31":136,"_49":-5,"_50":-5,"_46":47,"_75":137},"upstreamBranch",{"_40":86,"_35":128,"_129":130,"_31":83,"_84":91,"_13":131,"_85":132,"_87":133,"_134":135,"_44":-5,"_81":24,"_46":47,"_94":95,"_60":61,"_93":136},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1756812644593],"updatedAt",["D",1757114821629],23,"be33420e-792a-11f0-bfa3-0224a6c84d84",197,"lockfileKey","1764516869134-esm.town_v_emcho_hello-mcp@23-main","hello-mcp",{"_96":95,"_103":99},{"_40":182,"_31":183,"_29":184,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":185,"_13":59,"_32":180,"_33":-5,"_23":24,"_153":-5,"_26":186},{"_40":176,"_31":177,"_29":178,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":179,"_13":59,"_32":180,"_33":-5,"_23":24,"_153":-5,"_26":181},{"_40":170,"_31":171,"_29":172,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":173,"_13":59,"_32":20,"_33":174,"_23":24,"_153":-5,"_26":175},{"_40":167,"_31":27,"_29":30,"_147":-5,"_38":39,"_37":14,"_149":55,"_35":168,"_13":59,"_32":20,"_33":34,"_23":24,"_153":-5,"_26":169},{"_40":161,"_31":162,"_29":163,"_147":-5,"_38":39,"_37":148,"_149":24,"_35":164,"_13":59,"_32":20,"_33":165,"_23":24,"_153":-5,"_26":166},{"_40":155,"_31":156,"_29":157,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":158,"_13":59,"_32":20,"_33":159,"_23":24,"_153":-5,"_26":160},{"_40":145,"_31":146,"_29":53,"_147":-5,"_38":39,"_37":148,"_149":24,"_35":150,"_13":59,"_32":151,"_33":152,"_23":24,"_153":-5,"_26":154},"50a3ec02-882f-11f0-9954-0224a6c84d84","main.tsx","parentId",1,"latest",["D",1756839724543],"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;","label",[146],"50a3ea9a-882f-11f0-9954-0224a6c84d84","deno.json","01990bce-c638-714e-97a4-1fa9e6167c76",["D",1756839724543],"{\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}",[156],"50a3e522-882f-11f0-9954-0224a6c84d84","README.md","01990bce-c638-714e-97a4-1a67f3821e53",["D",1756839724543],"# 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```",[162],"1a3463bc-8830-11f0-a44c-0224a6c84d84",["D",1756840062786],[27],"50a3e2c0-882f-11f0-9954-0224a6c84d84",".vtignore","01990bce-c638-714e-97a4-157f5fb8f430",["D",1756839724543],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[171],"50a3e18a-882f-11f0-9954-0224a6c84d84","routes","01990bce-c638-714e-97a4-1048c460355e",["D",1756839724543],"directory",[177],"50a3d50a-882f-11f0-9954-0224a6c84d84","frontend","01990bce-c637-779b-aded-96ab9fc690df",["D",1756839724543],[183],"pulls","branches","forks","envVars",{"_194":148,"_196":59},"connections",{"_194":59,"_195":59},"count","unfilledCount","emptyCount",{"_40":182,"_31":183,"_29":184,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":272,"_13":59,"_32":180,"_33":-5,"_23":24,"_153":-5,"_211":273,"_26":274},{"_40":265,"_31":266,"_29":267,"_147":184,"_38":39,"_37":148,"_149":24,"_35":268,"_13":59,"_32":20,"_33":269,"_23":24,"_153":-5,"_211":270,"_26":271},{"_40":176,"_31":177,"_29":178,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":262,"_13":59,"_32":180,"_33":-5,"_23":24,"_153":-5,"_211":263,"_26":264},{"_40":255,"_31":256,"_29":257,"_147":178,"_38":39,"_37":148,"_149":24,"_35":258,"_13":59,"_32":230,"_33":259,"_23":24,"_153":-5,"_211":260,"_26":261},{"_40":248,"_31":249,"_29":250,"_147":178,"_38":39,"_37":148,"_149":24,"_35":251,"_13":59,"_32":230,"_33":252,"_23":24,"_153":-5,"_211":253,"_26":254},{"_40":241,"_31":242,"_29":243,"_147":178,"_38":39,"_37":148,"_149":24,"_35":244,"_13":59,"_32":230,"_33":245,"_23":24,"_153":-5,"_211":246,"_26":247},{"_40":234,"_31":235,"_29":236,"_147":178,"_38":39,"_37":148,"_149":24,"_35":237,"_13":59,"_32":230,"_33":238,"_23":24,"_153":-5,"_211":239,"_26":240},{"_40":226,"_31":227,"_29":228,"_147":178,"_38":39,"_37":148,"_149":24,"_35":229,"_13":59,"_32":230,"_33":231,"_23":24,"_153":-5,"_211":232,"_26":233},{"_40":170,"_31":171,"_29":172,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":223,"_13":59,"_32":20,"_33":174,"_23":24,"_153":-5,"_211":224,"_26":225},{"_40":167,"_31":27,"_29":30,"_147":-5,"_38":39,"_37":14,"_149":55,"_35":220,"_13":59,"_32":20,"_33":34,"_23":24,"_153":-5,"_211":221,"_26":222},{"_40":161,"_31":162,"_29":163,"_147":-5,"_38":39,"_37":148,"_149":24,"_35":217,"_13":59,"_32":20,"_33":165,"_23":24,"_153":-5,"_211":218,"_26":219},{"_40":155,"_31":156,"_29":157,"_147":-5,"_38":39,"_37":148,"_149":55,"_35":214,"_13":59,"_32":20,"_33":159,"_23":24,"_153":-5,"_211":215,"_26":216},{"_40":145,"_31":146,"_29":53,"_147":-5,"_38":39,"_37":148,"_149":24,"_35":210,"_13":59,"_32":151,"_33":152,"_23":24,"_153":-5,"_211":212,"_26":213},["D",1756839724543],"children",[],[146],["D",1756839724543],[],[156],["D",1756839724543],[],[162],["D",1756840062786],[],[27],["D",1756839724543],[],[171],"50a3df14-882f-11f0-9954-0224a6c84d84","utils.ts","01990bce-c638-714e-97a4-0caf2e9a1c1c",["D",1756839724543],"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`;\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(useMCP?: boolean, 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 (useMCP && 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}",[],[177,227],"50a3ddf2-882f-11f0-9954-0224a6c84d84","sip.ts","01990bce-c638-714e-97a4-0804c50e8853",["D",1756839724543],"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;",[],[177,235],"50a3dce4-882f-11f0-9954-0224a6c84d84","rtc.ts","01990bce-c638-714e-97a4-07196c7003e4",["D",1756839724543],"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(useMCP, 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;",[],[177,242],"50a3dbb8-882f-11f0-9954-0224a6c84d84","observer.ts","01990bce-c638-714e-97a4-029a75bebd75",["D",1756839724543],"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;",[],[177,249],"50a3d780-882f-11f0-9954-0224a6c84d84","mcp.ts","01990bce-c638-714e-97a3-fc479d85e2be",["D",1756839724543],"import { Hono } from \"npm:hono\";\n\nconst mcp = new Hono();\n\n// Demo tool: getFavoriteFood with some test data\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\n// MCP Tools definition\nconst tools = [\n {\n name: \"getFavoriteFood\",\n description: \"Returns the favorite food for specific people\",\n inputSchema: {\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n description: \"The person's name to look up\"\n }\n },\n required: [\"name\"]\n }\n }\n];\n\n// Handle MCP JSON-RPC requests\nmcp.post(\"/\", async (c) => {\n const body = await c.req.json();\n \n console.log(\"MCP Request:\", body);\n\n // Handle initialize method\n if (body.method === \"initialize\") {\n const clientVersion = body.params?.protocolVersion || \"2025-06-18\";\n return c.json({\n jsonrpc: \"2.0\",\n id: body.id,\n result: {\n protocolVersion: clientVersion,\n capabilities: {\n tools: {\n listChanged: true // Critical: tells OpenAI to fetch tools\n }\n },\n serverInfo: {\n name: \"hello-mcp\",\n version: \"1.0.0\"\n }\n }\n });\n }\n\n // Handle tools/list method\n if (body.method === \"tools/list\") {\n return c.json({\n jsonrpc: \"2.0\",\n id: body.id,\n result: {\n tools: tools\n }\n });\n }\n\n // Handle tools/call method\n if (body.method === \"tools/call\") {\n const { name, arguments: args } = body.params || {};\n \n if (name === \"getFavoriteFood\") {\n const personName = args?.name?.toLowerCase() || \"\";\n const favoriteFood = favoriteFoods[personName];\n \n const result = favoriteFood \n ? {\n success: true,\n data: {\n person: args.name,\n favoriteFood: favoriteFood\n }\n }\n : {\n success: false,\n error: `I don't know ${args.name}'s favorite food. I know about: ${Object.keys(favoriteFoods).join(\", \")}`\n };\n \n return c.json({\n jsonrpc: \"2.0\",\n id: body.id,\n result: {\n content: [\n {\n type: \"text\",\n text: JSON.stringify(result)\n }\n ]\n }\n });\n }\n \n // Tool not found\n return c.json({\n jsonrpc: \"2.0\",\n id: body.id,\n error: {\n code: -32601,\n message: `Tool not found: ${name}`\n }\n });\n }\n\n // Handle unknown notifications (like notifications/initialized)\n if (body.method?.startsWith(\"notifications/\")) {\n return c.json({\n jsonrpc: \"2.0\",\n id: body.id,\n result: {}\n });\n }\n\n // Unknown method\n return c.json({\n jsonrpc: \"2.0\",\n id: body.id,\n error: {\n code: -32601,\n message: `Method not found: ${body.method}`\n }\n });\n});\n\n// Debug endpoint to list tools\nmcp.get(\"/tools\", async (c) => {\n return c.json({\n tools: tools\n });\n});\n\nexport default mcp;",[],[177,256],["D",1756839724543],[200,201,202,203,204],[177],"50a3ab34-882f-11f0-9954-0224a6c84d84","index.html","01990bce-c637-779b-aded-90c65c11e441",["D",1756839724543],"\n\n \n \n \n OpenAI Realtime API Voice Agent\n \n \n \n \n\n

\n\n

\n\n \n \n",[],[183,266],["D",1756839724543],[198],[183],["D",1756839724543],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":51,"_100":101,"_102":24},{"_13":82,"_31":83,"_40":39,"_84":41,"_85":86,"_87":88,"_89":47,"_90":91,"_92":61,"_93":42,"_94":95},"ctx",{"_75":-5,"_125":312,"_313":314,"_315":316,"_317":24,"_318":24,"_319":24,"_320":55,"_321":-5,"_322":-7,"_323":-7,"_324":59,"_325":24,"_326":24,"_327":-5,"_328":24,"_329":24,"_330":24,"_331":-5},"ENV",{"_283":284,"_285":286,"_287":83,"_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","811aa22498c9b0b5a47e8d778de579cdb990f332","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

Diff · v2