Gemini Live Voice UI for React

npm install orb-ui @google/genai

import { GoogleGenAI, Modality } from '@google/genai'

export async function POST() {
  const model = 'gemini-3.1-flash-live-preview'
  const config = {
    responseModalities: [Modality.AUDIO],
    speechConfig: {
      voiceConfig: { prebuiltVoiceConfig: { voiceName: 'Kore' } },
    },
    systemInstruction: 'You are a concise, friendly voice assistant.',
    realtimeInputConfig: {
      automaticActivityDetection: { disabled: true },
    },
  }
  const client = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY })
  const token = await client.authTokens.create({
    config: {
      uses: 1,
      liveConnectConstraints: { model, config },
      httpOptions: { apiVersion: 'v1alpha' },
    },
  })

  return Response.json({ value: token.name, model, config })
}

import { GoogleGenAI } from '@google/genai'
import { Orb } from 'orb-ui'
import { createGeminiLiveAdapter } from 'orb-ui/adapters'

const adapter = createGeminiLiveAdapter({
  connect: async (callbacks) => {
    const response = await fetch('/api/gemini-live-token', { method: 'POST' })
    const token = await response.json()
    if (!response.ok) throw new Error(token.error ?? 'Could not create a Gemini Live session')

    const client = new GoogleGenAI({
      apiKey: token.value,
      httpOptions: { apiVersion: 'v1alpha' },
    })
    return client.live.connect({
      model: token.model,
      config: token.config,
      callbacks,
    })
  },
})

export function GeminiLiveVoiceUI() {
  return <Orb adapter={adapter} theme="circle" aria-label="Start Gemini voice assistant" />
}

const adapter = createGeminiLiveAdapter({
  connect,
  outputVolumeCalibration: () => currentCalibration,
  onOutputVolumeSample: ({ raw, mapped, normalized }) => {
    console.debug({ raw, mapped, normalized })
  },
})