Run a Live API demo web app

This tutorial shows you how to set up and run a React-based demo application for the Live API. The application features real-time audio and video streaming and uses a Python WebSocket proxy to handle secure authentication with Google Cloud.

The following diagram shows the structure of the project:

Diagram depicting the file structure for the demo app. At the root is a directory labeled '/', with two subdirectories labeled 'src/' and 'public/', as well as a single file labeled 'server.py' with the sublabel 'WebSocket proxy & auth handler'. Within the src/ subdirectory, there is one singleton file labeled 'App.jsx', which is the root component, and two subdirectories. The first subdirectory is labeled 'components/' and contains one file: 'LiveAPIDemo.jsx', which is the main application logic file. The other subdirectory is labeled 'utils/' and contains two files: 'gemini-api.js', which is the Gemini WebSocket client; and 'media-utils.js', which is for audio/video processing. In the public/ subdirectory, it contains one further subdirectory labeled 'audio-processors/', which contains the audio worklets.
Diagram showing the directory and file structure of The Live API demo web app.

Before you begin

Ensure you have the following installed:

  • Python 3.9 or later
  • pip
  • git

Set up the environment

To set up your local environment:

  1. Clone the repository.

    git clone https://github.com/GoogleCloudPlatform/generative-ai.git
cd generative-ai/gemini/multimodal-live-api/native-audio-websocket-demo-apps/react-demo-app

  2. Create and activate a Python virtual environment.

    # Create the virtual environment
python -m venv .venv

# Activate the virtual environment in each new terminal
# For macOS or Linux:
source .venv/bin/activate

# For Windows CMD:
.venv\Scripts\activate.bat

# For Windows PowerShell:
.venv\Scripts\Activate.ps1

  3. Install the required Python dependencies.

    pip install -r requirements.txt

  4. Authenticate with Google Cloud.

    gcloud auth application-default login

Run the application

After you set up the environment, run the application:

  1. Start the Python proxy server.

    python server.py

  2. In a new terminal, install the Node modules and start the React development server.

    # Install Node modules
npm install

# Start development server
npm run dev

  3. Open http://localhost:5173 in your browser to view the application.

What's next