Pipecat Voice UI for React

createPipecatAdapter wraps the standard PipecatClient and consumes its RTVI events. It is transport-agnostic: the same orb-ui adapter works with Pipecat Cloud and Daily, self-hosted SmallWebRTC, or another Pipecat client transport.

The simple setup

Pipecat applications already choose a client transport. Configure that normal PipecatClient, then give orb-ui the client and the callback your app uses to connect it. The adapter owns RTVI event mapping, remote audio playback, input/output level shaping, and cleanup. Transport selection and agent deployment remain in your application.

Install

Install Pipecat’s client and the transport used by your agent:

npm install orb-ui @pipecat-ai/client-js

# Pipecat Cloud and managed Daily deployments
npm install @pipecat-ai/daily-transport

# Self-hosted Pipecat's default WebRTC path
npm install @pipecat-ai/small-webrtc-transport

Pipecat Cloud or Daily

Your server endpoint should start the deployed agent and return Daily connection details. Keep private service credentials on the server.

import { PipecatClient } from '@pipecat-ai/client-js'
import { DailyTransport } from '@pipecat-ai/daily-transport'
import { Orb } from 'orb-ui'
import { createPipecatAdapter } from 'orb-ui/adapters'

const client = new PipecatClient({
  transport: new DailyTransport({ bufferLocalAudioUntilBotReady: true }),
  enableMic: true,
})

const adapter = createPipecatAdapter(client, {
  connect: () =>
    client.startBotAndConnect({
      endpoint: '/api/pipecat-start',
    }),
})

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

Pipecat Cloud’s public start API returns dailyRoom and dailyToken; DailyTransport normalizes those fields automatically.

Self-hosted SmallWebRTC

Point the transport at the /api/offer endpoint exposed by a matching server-side SmallWebRTCTransport.

import { PipecatClient } from '@pipecat-ai/client-js'
import { SmallWebRTCTransport } from '@pipecat-ai/small-webrtc-transport'
import { Orb } from 'orb-ui'
import { createPipecatAdapter } from 'orb-ui/adapters'

const client = new PipecatClient({
  transport: new SmallWebRTCTransport(),
  enableMic: true,
})

const adapter = createPipecatAdapter(client, {
  connect: () => client.connect({ webrtcUrl: 'https://agent.example.com/api/offer' }),
})

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

State mapping

transport initialization/authentication/connection -> connecting
bot ready and user speaking -> listening
user stopped speaking, LLM started, or TTS started -> thinking (generation events do not interrupt an active speaking state)
bot started speaking -> speaking
bot stopped speaking -> listening
client, message, or device error -> error
disconnected -> idle

LLM and TTS generation can overlap playback of an earlier sentence. Bot playback events retain the speaking state during that work, so the animation continues to follow output volume. User speech can still interrupt the bot and return the UI to listening. RTVI LocalAudioLevel becomes inputVolume; bot RemoteAudioLevel becomes outputVolume. The adapter also meters the PipecatClient local and bot MediaStreamTrack values directly when they are available. That browser fallback keeps both levels working with SmallWebRTC and with transports whose RTVI level events are unavailable or sparse. The adapter maps low raw gain values and attaches remote bot audio tracks automatically. Use isBotParticipant to filter audio in a multi-participant session, or set playRemoteAudio: false when your app owns playback.

Directional calibration

Pipecat ships with separate input and output profiles for both RTVI level events and browser-track RMS samples. Most applications should use them unchanged. A custom transport or materially different audio path can provide partial directional overrides:

const adapter = createPipecatAdapter(client, {
  connect,
  outputVolumeCalibration: {
    amplitude: { speechPeak: 0.22 },
  },
  onOutputVolumeSample: ({ raw, mapped, normalized }) => {
    console.debug({ raw, mapped, normalized })
  },
})

Pass a getter instead of an object to apply generated values while a session is active. See volume calibration for the anchor contract and guided runner. Set createAudioContext to a custom factory—or return undefined—when your runtime needs to own or disable browser-track metering.

Custom session startup

The connect callback can call any Pipecat client startup path and pass transport-specific parameters. disconnect defaults to client.disconnect() and can also be overridden.

Start

Reference

Adapters

Recipes

Guides

Pipecat Voice UI for React

The simple setup

Install

Pipecat Cloud or Daily

Self-hosted SmallWebRTC

State mapping

Directional calibration

Custom session startup

​The simple setup

​Install

​Pipecat Cloud or Daily

​Self-hosted SmallWebRTC

​State mapping

​Directional calibration

​Custom session startup

​Related

The simple setup

Install

Pipecat Cloud or Daily

Self-hosted SmallWebRTC

State mapping

Directional calibration

Custom session startup

Related