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
bot started speaking -> speaking
bot stopped speaking -> listening
client, message, or device error -> error
disconnected -> idle

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 shapes 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.

Output calibration

The default output curve is tuned against a real Pipecat Cloud agent session using the cloud theme and works for both RTVI gain events and browser-track RMS samples. It is a provider baseline, so a different theme, transport, or audio mix may benefit from a partial override:

const adapter = createPipecatAdapter(client, {
  connect,
  outputVolumeCalibration: {
    gain: 3.5,
  },
  onOutputVolumeSample: ({ raw, shaped, normalized }) => {
    console.debug({ raw, shaped, normalized })
  },
})

Pass a getter instead of an object to tune the values while a session is active. 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

Guides

Pipecat Voice UI for React

The simple setup

Install

Pipecat Cloud or Daily

Self-hosted SmallWebRTC

State mapping

Output calibration

Custom session startup

​The simple setup

​Install

​Pipecat Cloud or Daily

​Self-hosted SmallWebRTC

​State mapping

​Output calibration

​Custom session startup

​Related

The simple setup

Install

Pipecat Cloud or Daily

Self-hosted SmallWebRTC

State mapping

Output calibration

Custom session startup

Related