> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tensorstudio.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Realtime Console

> Deploy interactive console to integrate with your web app

### 1. Install Realtime Console

First, install the OpenAI Realtime Console globally:

```bash theme={"system"}
git clone https://github.com/soketlabs/realtime-console.git
cd realtime-console
npm install
```

### 2. Set environment variables for realtime-console

Create a `.env` file in realtime-console directory

```bash theme={"system"}
OPENAI_API_KEY=<your-api-key>
REACT_APP_LOCAL_RELAY_SERVER_URL=http://localhost:8081
```

### 3. Start realtime-console

```bash theme={"system"}
cd realtime-console
npm run start
```

This will start realtime-console in `port:3005` by default. \
Change port:  `PORT=<your port>` in `package.json{}` file in realtime-console directory.

<Frame>
  <img className="block" style={{ borderRadius: '15px' }} src="https://mintcdn.com/soketailabs/zzRBKl5ewf0AUcSU/images/realtime_console_port.png?fit=max&auto=format&n=zzRBKl5ewf0AUcSU&q=85&s=24b7c058426dda1aef4b74f813059840" alt="Hero Light" width="1294" height="296" data-path="images/realtime_console_port.png" />
</Frame>

### 5. Connect and test realtime-console

Select `vad` mode and click `connect` to connect realtime-console to tensorstudio.\
You should be able to see event logs without any errors if connection is established properly after authentication.\
Note: disconnect after testing to avoid unnecessary consumption.

<Frame>
  <img className="block" style={{ borderRadius: '15px' }} src="https://mintcdn.com/soketailabs/zzRBKl5ewf0AUcSU/images/realtime_console_example.png?fit=max&auto=format&n=zzRBKl5ewf0AUcSU&q=85&s=50e58d143b15864d37ccd0638383a655" alt="Hero Light" width="2880" height="1800" data-path="images/realtime_console_example.png" />
</Frame>