GitHub - openai/realtime-voice-component

realtime-voice-component React/browser voice controls for tool-constrained UIs built on OpenAI Realtime. Warning This repository is an open-source reference implementation. It is useful for education, demos, and local adoption, but it is not a promise of long-term product support or a production-ready UI kit. This repo is intended to be shared as a GitHub reference implementation. It is not currently published to npm, and package.json remains marked as private. The code is licensed under Apache-2.0. See LICENSE. This package is for apps where: your app defines the exact actions the assistant can take tools stay app-owned and narrow the UI remains responsible for the visible state change you want a React-friendly controller and an optional launcher widget The package is intentionally opinionated about browser UI flows. It is not a general-purpose orchestration framework and it is not a replacement for raw Realtime transports. Use this package when you want a React/browser layer for voice-driven UI: a reusable controller with React bindings a packaged launcher widget optional visible confirmation via the ghost cursor a pattern centered on app-owned tools, not free-form browser automation Use raw Realtime when you want lower-level transport and session control: your own UI surface and state model from scratch Use openai-agents-js when you need a broader headless SDK: agent orchestration and handoffs richer hosted-tool and MCP flows server-side or multi-runtime agent systems beyond a browser UI package The repo’s demo/ app is the main runnable teaching surface. It shows: a starter theme-switching flow a richer shared-state chess flow shared controller reuse across multiple screens optional wake-word experimentation layered on top of the runtime cp demo/.env.example demo/.env.local # edit demo/.env.local and set OPENAI_API_KEY npm install npm run demo defineVoiceTool() turns a Zod-backed app action into a Realtime function tool. createVoiceControlController() owns the session, transport, tool execution, transcript assembly, and connection lifecycle. useVoiceControl() binds React to either an external controller or an internally owned one. VoiceControlWidget is a launcher UI on top of the controller. useGhostCursor() and GhostCursorOverlay are optional visible confirmation helpers. Recommended Default Flow For most browser apps in this repo, the recommended path…