Integrate a Voice Agent with React

export const TOKEN = "YOUR_ZRT_AUTH_TOKEN";
export const ROOM_ID = "YOUR_MEETING_ID"; // Create using the Zero Runtime API (curl -X POST https://api.videosdk.live/v2/rooms)

import React, { useEffect, useRef, useState } from "react";
import { MeetingProvider, MeetingConsumer, useMeeting, useParticipant } from "@videosdk.live/react-sdk";
import { TOKEN, ROOM_ID } from "./config";

function ParticipantAudio({ participantId }) {
  const { micStream, micOn, isLocal, displayName } = useParticipant(participantId);
  const audioRef = useRef(null);

  useEffect(() => {
    if (!audioRef.current) return;
    if (micOn && micStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(micStream.track);
      audioRef.current.srcObject = mediaStream;
      audioRef.current.play().catch(() => {});
    } else {
      audioRef.current.srcObject = null;
    }
  }, [micStream, micOn]);

  return (
    <div>
      <p>Participant: {displayName} | Mic: {micOn ? "ON" : "OFF"}</p>
      <audio ref={audioRef} autoPlay muted={isLocal} />
    </div>
  );
}

function Controls() {
  const { leave, toggleMic } = useMeeting();
  return (
    <div>
      <button onClick={() => leave()}>Leave</button>
      <button onClick={() => toggleMic()}>Toggle Mic</button>
    </div>
  );
}

function MeetingView({ meetingId, onMeetingLeave }) {
  const [joined, setJoined] = useState(null);
  const { join, participants } = useMeeting({
    onMeetingJoined: () => setJoined("JOINED"),
    onMeetingLeft: onMeetingLeave,
  });

  const joinMeeting = () => {
    setJoined("JOINING");
    join();
  };

  return (
    <div>
      <h3>Meeting Id: {meetingId}</h3>
      {joined === "JOINED" ? (
        <div>
          <Controls />
          {[...participants.keys()].map((pid) => (
            <ParticipantAudio key={pid} participantId={pid} />
          ))}
        </div>
      ) : joined === "JOINING" ? (
        <p>Joining the meeting...</p>
      ) : (
        <button onClick={joinMeeting}>Join</button>
      )}
    </div>
  );
}

export default function App() {
  const [meetingId] = useState(ROOM_ID);

  const onMeetingLeave = () => {
    // no-op; simple sample
  };

  return (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: false,
        name: "Agent React User",
        multiStream: false,
      }}
      token={TOKEN}
    >
      <MeetingConsumer>
        {() => <MeetingView meetingId={meetingId} onMeetingLeave={onMeetingLeave} />}
      </MeetingConsumer>
    </MeetingProvider>
  );
}

# Google API Key for the Gemini Live API
GOOGLE_API_KEY=your_google_api_key_here

# Option A: pre-generated ZRT auth token
ZRT_AUTH_TOKEN=your_zrt_auth_token_here

# Option B: SDK auto-generates the token (omit ZRT_AUTH_TOKEN)
# ZRT_API_KEY=your_zrt_api_key
# ZRT_SECRET_KEY=your_zrt_secret_key

import os
import zrt
from zrt import Agent, Pipeline, Room
from zrt.plugins import GeminiRealtime, GeminiLiveConfig
from zrt.inference import AICousticsDenoise
from dotenv import load_dotenv

load_dotenv()

AGENT_ID = "react-voice-agent"

pipeline = Pipeline(
    llm=GeminiRealtime(
        api_key=os.getenv("GOOGLE_API_KEY"),  # optional when GOOGLE_API_KEY is in .env
        config=GeminiLiveConfig(model="gemini-3.1-flash-live-preview", voice="Leda", response_modalities=["AUDIO"]),
    ),
    denoise=AICousticsDenoise(model_id="quail-vf-2.2-l-16khz"),
)


class MyVoiceAgent(Agent):
    def __init__(self) -> None:
        super().__init__(
            name="MyVoiceAgent",
            agent_id=AGENT_ID,
            instructions="You are a high-energy game-show host guiding the caller to guess a secret number from 1 to 100 to win 1,000,000$.",
            pipeline=pipeline,
        )

    async def on_enter(self) -> None:
        await self.session.say(
            "Welcome to the Zero Runtime AI Agent game show! I'm your host, and we're about to play for 1,000,000$. Are you ready to play?"
        )

    async def on_exit(self) -> None:
        await self.session.say("Goodbye!")


def invoke_agent() -> None:
    # Join the same room the frontend created (its meeting ID).
    zrt.invoke(AGENT_ID, room=Room(room_id="YOUR_MEETING_ID"))


if __name__ == "__main__":
    zrt.serve(MyVoiceAgent, on_ready=invoke_agent)