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","children",[],[275],"9a27a96a-53a2-11f1-9ba2-ee650bb23af1","main.tsx",["D",1779209326110],7,"import { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.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.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\n// Lightweight session probe used by the frontend to render login state.\napp.get(\"/me\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) return c.json({ loggedIn: false });\n return c.json({\n loggedIn: true,\n username: session.user.username,\n profileImageUrl: session.user.links.profileImageUrl,\n });\n});\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/favicon.ico\", async (c) => {\n const entry = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\"));\n const file = await blob.get(`${entry.name}/favicon.ico`);\n if (!file) {\n return c.text(\"favicon not found\", 404);\n }\n return new Response(file.body, {\n headers: {\n \"Content-Type\": \"image/x-icon\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n});\n\napp.onError((err) => Promise.reject(err));\n\n// Wrap the app with std/oauth so users log in with their Val Town account.\n// The user's access token is then passed through to the embedded Val Town\n// MCP server (api.val.town/v3/mcp) so it can act on their behalf.\n//\n// Valid scopes (from /oauth/.well-known/openid-configuration):\n// openid, offline_access, profile, email,\n// user_r, user_rw, val_r, val_rw, project_rw,\n// blob_rw, sqlite_rw, email_rw, telemetry_r, telemetry_rw\n//\n// Note: if you change scopes and login starts failing with what looks like a\n// redirect loop, delete the cached OAuth client blob:\n// blob key: oauth_client:/auth/callback\n// (val.town's OAuth issuer can invalidate clients that attempted invalid\n// scopes, and std/oauth caches the dead client_id in blob storage forever.)\n//\n// Available routes added by the middleware:\n// GET /auth/login – start the OAuth flow\n// GET /auth/callback – OAuth callback (handled internally)\n// POST /auth/logout – clear the session cookie\n// GET /auth/logo – Val Town logo SVG (use ?theme=light for dark bg)\nexport default oauthMiddleware(\n {\n scopes: [\n \"openid\",\n \"offline_access\",\n \"profile\",\n \"user_r\",\n \"val_rw\",\n \"project_rw\",\n \"blob_rw\",\n \"sqlite_rw\",\n \"telemetry_rw\",\n ],\n },\n app.fetch,\n);\n",[],[284],"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)",[],[291],["D",1779206316505],[],[18,97],["D",1779206316505],[],[18,91],["D",1779206316505],[],[18,108],["D",1779206316505],[],[18,79],["D",1779206316505],[],[18,103],["D",1779206316505],[266,267,268,269,270],[18],"98550a1c-539b-11f1-b21e-ee650bb23af1","index.html","019e40f5-e221-74ab-85ab-f4ad8ce139ad","019e40f5-e221-74ab-85ab-f9a994a70407",["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",[],[323,316],"frontend","985591b2-539b-11f1-b21e-ee650bb23af1",["D",1779206316505],[264],[323],["D",1779206316505],["D",1789498239291],{"_11":12,"_186":85},{"_11":12,"_181":182,"_84":85,"_31":83,"_183":184,"_185":30},{"_41":170,"_13":16,"_35":38,"_171":133,"_172":74,"_173":75,"_174":137,"_175":176,"_177":178,"_179":14,"_180":12},"ctx",{"_54":-5,"_207":366,"_367":368,"_369":370,"_371":30,"_372":30,"_373":30,"_374":24,"_375":-5,"_376":-7,"_377":-7,"_378":26,"_379":30,"_380":30,"_381":-5,"_382":30,"_383":30,"_384":30,"_385":-5},"ENV",{"_337":338,"_339":340,"_341":16,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365},"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

History · routes