openai-realtime-console - GitLite

KO | EN

gitlite — search

#python #react #typescript #llm #go #deep-learning #docker #java #cli #kubernetes #vue #pytorch #openai #mcp

openai-realtime-console

(★ 3,614)

React app for inspecting, building and debugging with the Realtime API

File Explorer

Download Latest Version (.zip)

- - openai-logomark.svg
- - App.jsx
  - Button.jsx
  - EventLog.jsx
  - SessionControls.jsx
  - ToolPanel.jsx
- - index.jsx
- base.css
- entry-client.jsx
- entry-server.jsx
- index.html
- index.js
.env.example
.gitignore
.prettierrc
LICENSE
package-lock.json
package.json
postcss.config.cjs
README.md
server.js
tailwind.config.js
vite.config.js

# Installation Guide

1. Get the code

git clone https://github.com/openai/openai-realtime-console

Downloads the entire project code from GitHub to your computer.

cd openai-realtime-console

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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