React app for inspecting, building and debugging with the Realtime API
This is an example application showing how to use the OpenAI Realtime API with WebRTC.
Before you begin, you’ll need an OpenAI API key - create one in the dashboard here. Create a .env file from the example file and set your API key in there:
cp .env.example .env
Running this application locally requires Node.js to be installed. Install dependencies for the application with:
npm install
Start the application server with:
npm run dev
This should start the console application on http://localhost:3000.
This application is a minimal template that uses express to serve the React frontend contained in the /client folder. The server is configured to use vite to build the React frontend.
This application shows how to send and receive Realtime API events over the WebRTC data channel and configure client-side function calling. You can also view the JSON payloads for client and server events using the logging panel in the UI.
For a more comprehensive example, see the OpenAI Realtime Agents demo built with Next.js, using an agentic architecture inspired by OpenAI Swarm.
The previous version of this application that used WebSockets on the client (not recommended in browsers) can be found here.
MIT