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",[],[250],"f5b60d30-4a60-11f1-81de-ee650bb23af1","main.tsx",["D",1778191572392],"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 \"blob_rw\",\n \"sqlite_rw\",\n \"telemetry_rw\",\n ],\n },\n app.fetch,\n);\n",[],[259],"f5b600a6-4a60-11f1-81de-ee650bb23af1","README.md","019e047a-1dec-7658-a6b9-d668dc115a09",["D",1778191572392],"# 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)",[],[265],["D",1778191572392],[],[18,77],["D",1778191572392],[],[18,89],["D",1778191572392],[],[18,95],["D",1778191572392],[],[18,101],["D",1778191572392],[],[18,106],["D",1778191572392],[241,242,243,244,245],[18],"f5b527bc-4a60-11f1-81de-ee650bb23af1","index.html","019e047a-1deb-775e-8b46-bb858d8a4357","019e047a-1deb-775e-8b46-bf278e524ae9",["D",1778191572392],"\n\n \n \n \n OpenAI Realtime API Voice Agent\n \n \n \n \n \n\n

\n\n

\n\n \n \n",[],[297,290],"frontend","f5b5b3c6-4a60-11f1-81de-ee650bb23af1",["D",1778191572392],[239],[297],["D",1778191572392],["D",1789510872811],{"_11":12,"_162":83},{"_11":12,"_157":158,"_82":83,"_31":81,"_159":160,"_161":30},{"_39":40,"_13":16,"_33":36,"_147":110,"_148":72,"_149":73,"_150":114,"_151":152,"_153":154,"_155":14,"_156":12},"ctx",{"_52":-5,"_183":340,"_341":342,"_343":344,"_345":30,"_346":30,"_347":30,"_348":24,"_349":-5,"_350":-7,"_351":-7,"_352":26,"_353":30,"_354":30,"_355":-5,"_356":30,"_357":30,"_358":30,"_359":-5},"ENV",{"_311":312,"_313":314,"_315":16,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339},"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