Voice Orb UI Example for React

import { Orb } from 'orb-ui'

export function VoiceOrbExample() {
  return <Orb state="listening" volume={0.45} theme="circle" size={260} />
}

import { useState } from 'react'
import { Orb, type OrbState } from 'orb-ui'

const states: OrbState[] = ['idle', 'connecting', 'listening', 'thinking', 'speaking', 'error']

export function OrbStatePreview() {
  const [state, setState] = useState<OrbState>('idle')

  return (
    <section>
      <Orb state={state} volume={state === 'idle' ? 0 : 0.45} theme="circle" interactive={false} />
      <label>
        Voice state
        <select value={state} onChange={(event) => setState(event.target.value as OrbState)}>
          {states.map((value) => (
            <option key={value}>{value}</option>
          ))}
        </select>
      </label>
    </section>
  )
}

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 ProviderOrb() {
  return <Orb adapter={adapter} theme="circle" aria-label="Start voice assistant" />
}

export function VoiceSurface() {
  return (
    <section aria-label="Voice assistant">
      <Orb adapter={adapter} theme="cloud" interactive={false} />
      <button onClick={() => void adapter.start?.()}>Start conversation</button>
      <button onClick={() => void adapter.stop?.()}>End conversation</button>
      <p aria-live="polite">Voice assistant controls</p>
    </section>
  )
}

export function CustomOrb({ voiceSignal }) {
  return <Orb signal={voiceSignal} theme="bars" />
}

<Orb
  signal={{ state: 'listening', inputVolume: microphoneVolume, outputVolume: agentVolume }}
  theme="radial"
/>

const labels = {
  idle: 'Ready to start',
  connecting: 'Connecting',
  listening: 'Listening',
  thinking: 'Preparing a response',
  speaking: 'Assistant speaking',
  error: 'Connection failed',
}

export function AccessibleVoiceStatus({ signal }) {
  return (
    <div>
      <Orb signal={signal} theme="radial" interactive={false} />
      <p aria-live="polite">{labels[signal.state]}</p>
    </div>
  )
}