Install orb-ui for React

Install orb-ui from npm:

npm install orb-ui

orb-ui ships React components and TypeScript types. React and React DOM are peer dependencies, so your app should already include them.

import { Orb } from 'orb-ui'

export function VoiceAgentStatus() {
  return <Orb state="idle" theme="circle" />
}

Provider SDKs

Provider adapters live in the orb-ui/adapters entrypoint, but orb-ui does not bundle provider SDKs. Install the SDK for the provider you use:

# Vapi
npm install orb-ui @vapi-ai/web

# ElevenLabs Conversational AI
npm install orb-ui @elevenlabs/client

# LiveKit Agents
npm install orb-ui livekit-client

# Pipecat (add the transport used by your agent)
npm install orb-ui @pipecat-ai/client-js @pipecat-ai/small-webrtc-transport

# OpenAI Live and Realtime use browser WebRTC and need no additional client SDK
npm install orb-ui

# Gemini Live
npm install orb-ui @google/genai

import {
  createElevenLabsAdapter,
  createGeminiLiveAdapter,
  createOpenAILiveAdapter,
  createOpenAIRealtimeAdapter,
  createPipecatAdapter,
  createVapiAdapter,
} from 'orb-ui/adapters'
import { createLiveKitAdapter } from 'orb-ui/adapters/livekit'

Use an adapter when a supported provider owns the voice session. Use controlled mode when your app already has session state and audio volume.

Choose an integration path

Start with the adapter overview to compare the browser and server responsibilities for each provider.
Use controlled mode when you are prototyping or wiring a custom realtime voice stack.
Use the Vapi adapter for Vapi assistants.
Use the ElevenLabs adapter for ElevenLabs conversational agents.
Use the LiveKit adapter for LiveKit Agents.
Use the Pipecat adapter with Pipecat Cloud, Daily, or self-hosted SmallWebRTC agents.
Start with the OpenAI GPT-Live adapter for full-duplex voice sessions.
Use the OpenAI Realtime adapter for existing Realtime integrations.
Use the Gemini Live adapter for native-audio Live API sessions.

Start

Reference

Adapters

Guides

Install orb-ui for React

Provider SDKs

Choose an integration path

Next steps

​Provider SDKs

​Choose an integration path

​Next steps

Provider SDKs

Choose an integration path

Next steps