https://github.com/openai/openai-realtime-console
React app for inspecting, building and debugging with the Realtime API
https://github.com/openai/openai-realtime-console
javascript nodejs openai react typescript
Last synced: 5 days ago
JSON representation
React app for inspecting, building and debugging with the Realtime API
- Host: GitHub
- URL: https://github.com/openai/openai-realtime-console
- Owner: openai
- License: mit
- Created: 2024-09-30T19:00:38.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-11T22:18:59.000Z (about 2 months ago)
- Last Synced: 2025-04-29T14:17:46.630Z (5 days ago)
- Topics: javascript, nodejs, openai, react, typescript
- Language: JavaScript
- Homepage:
- Size: 1.61 MB
- Stars: 3,181
- Watchers: 51
- Forks: 1,205
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - openai/openai-realtime-console - React app for inspecting, building and debugging with the Realtime API (JavaScript)
- awesome-ChatGPT-repositories - openai-realtime-console - React app for inspecting, building and debugging with the Realtime API (Openai)
- AiTreasureBox - openai/openai-realtime-console - 04-30_3185_2](https://img.shields.io/github/stars/openai/openai-realtime-console.svg)|React app for inspecting, building and debugging with the Realtime API| (Repos)
README
# OpenAI Realtime Console
This is an example application showing how to use the [OpenAI Realtime API](https://platform.openai.com/docs/guides/realtime) with [WebRTC](https://platform.openai.com/docs/guides/realtime-webrtc).
## Installation and usage
Before you begin, you'll need an OpenAI API key - [create one in the dashboard here](https://platform.openai.com/settings/api-keys). Create a `.env` file from the example file and set your API key in there:
```bash
cp .env.example .env
```
Running this application locally requires [Node.js](https://nodejs.org/) to be installed. Install dependencies for the application with:
```bash
npm install
```
Start the application server with:
```bash
npm run dev
```
This should start the console application on [http://localhost:3000](http://localhost:3000).
This application is a minimal template that uses [express](https://expressjs.com/) to serve the React frontend contained in the [`/client`](./client) folder. The server is configured to use [vite](https://vitejs.dev/) 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](https://github.com/openai/openai-realtime-agents) demo built with Next.js, using an agentic architecture inspired by [OpenAI Swarm](https://github.com/openai/swarm).
## Previous WebSockets version
The previous version of this application that used WebSockets on the client (not recommended in browsers) [can be found here](https://github.com/openai/openai-realtime-console/tree/websockets).
## License
MIT