React voice agent UI documentation

orb-ui is a React UI layer for realtime voice agents. It gives your app an animated voice orb, audio-reactive themes, provider adapters, and a controlled mode that can sit on top of custom voice AI stacks. Use orb-ui when you want users to understand whether a voice agent is idle, connecting, listening, thinking, speaking, or in an error state.

Start here

Install orb-ui.
Choose an adapter for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Live, OpenAI Realtime, or Gemini Live, or use controlled mode.
Pick a visual theme.
Map your voice agent state into the Orb component.

import { Orb } from 'orb-ui'

export function VoiceAgentStatus({ state, inputVolume, outputVolume }) {
  return <Orb signal={{ state, inputVolume, outputVolume }} theme="circle" />
}

What orb-ui handles

A small React component for visible voice agent state.
Audio-reactive orb and bars themes.
Provider adapters for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Live, OpenAI Realtime, and Gemini Live.
Controlled mode for telephony, custom WebRTC/WebSocket transports, and other speech pipelines.
A stable state model for idle, connecting, listening, thinking, speaking, and error.

What orb-ui does not handle

orb-ui is not a voice agent platform. It does not host calls, manage prompts, run speech recognition, or replace Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Live, OpenAI Realtime, Gemini Live API, or your own backend. It is the frontend UI layer that makes those systems feel understandable inside a product.

Start

Reference

Adapters

Guides

React voice agent UI documentation

Start here

What orb-ui handles

What orb-ui does not handle

Next steps

​Start here

​What orb-ui handles

​What orb-ui does not handle

​Next steps

Start here

What orb-ui handles

What orb-ui does not handle

Next steps