Vapi voice UI components for React
Vapi handles the voice agent platform layer. orb-ui handles the visible React UI layer: an animated voice orb, audio-reactive feedback, and predictable states that make a Vapi assistant feel present in your app.
Install
Install both orb-ui and the Vapi web SDK used by the adapter:
npm install orb-ui @vapi-ai/web
Use the adapter
import Vapi from '@vapi-ai/web'
import { Orb } from 'orb-ui'
import { createVapiAdapter } from 'orb-ui/adapters'
const vapi = new Vapi('your-public-key')
const adapter = createVapiAdapter(vapi, {
assistantId: 'your-assistant-id',
})
export function VapiVoiceUI() {
return <Orb adapter={adapter} theme="circle" aria-label="Start Vapi assistant" />
}
State mapping
The adapter maps Vapi conversation lifecycle events into orb-ui state changes. The UI can then communicate:
- connection startup
- listening state
- assistant speech
- errors
Accessibility
When an adapter or onStart/onStop handler is provided, clickable circle and bars themes render as <button type="button"> controls. Pass an aria-label when no visible text labels the orb.
When to use controlled mode instead
Use controlled mode if your app wraps Vapi in its own session layer or combines Vapi with custom state. The Orb component does not need to own the provider SDK if your app already knows the state and volume.
<Orb state={voiceState} volume={volume} theme="circle" />
Positioning
orb-ui is not a Vapi replacement. It is a frontend UI layer for teams already building with Vapi or comparing voice agent stacks.Last modified on June 5, 2026
