Components

The Pipecat React SDK provides several components for handling audio, video, and visualization in your application.

PipecatClientProvider

The root component for providing Pipecat client context to your application. It also includes built-in conversation state management, so any descendant component can use the usePipecatConversation hook to access messages without adding a separate provider.

<PipecatClientProvider client={pcClient}>
  {/* Child components can use usePipecatConversation, usePipecatClient, etc. */}
</PipecatClientProvider>

Props

client

PipecatClient

required

A singleton instance of PipecatClient

PipecatClientAudio

Creates a new <audio> element that mounts the bot’s audio track.

<PipecatClientAudio />

Props No props required

PipecatClientVideo

Creates a new <video> element that renders either the bot or local participant’s video track.

<PipecatClientVideo
  participant="local"
  fit="cover"
  mirror
  onResize={({ aspectRatio, height, width }) => {
    console.log("Video dimensions changed:", { aspectRatio, height, width });
  }}
/>

Props

participant

('local' | 'bot')

required

Defines which participant’s video track is rendered

fit

('contain' | 'cover')

Defines whether the video should be fully contained or cover the box. Default: ‘contain’

mirror

boolean

Forces the video to be mirrored, if set

onResize(dimensions: object)

function

Triggered whenever the video’s rendered width or height changes

PipecatClientCamToggle

A headless component to read and set the local participant’s camera state.

<PipecatClientCamToggle
  onCamEnabledChanged={(enabled) => console.log("Camera enabled:", enabled)}
  disabled={false}
>
  {({ disabled, isCamEnabled, onClick }) => (
    <button disabled={disabled} onClick={onClick}>
      {isCamEnabled ? "Disable Camera" : "Enable Camera"}
    </button>
  )}
</PipecatClientCamToggle>

Props

onCamEnabledChanged(enabled: boolean)

function

Triggered whenever the local participant’s camera state changes

disabled

boolean

If true, the component will not allow toggling the camera state. Default: false

children

function

A render prop that provides state and handlers to the children

PipecatClientMicToggle

A headless component to read and set the local participant’s microphone state.

<PipecatClientMicToggle
  onMicEnabledChanged={(enabled) => console.log("Microphone enabled:", enabled)}
  disabled={false}
>
  {({ disabled, isMicEnabled, onClick }) => (
    <button disabled={disabled} onClick={onClick}>
      {isMicEnabled ? "Disable Microphone" : "Enable Microphone"}
    </button>
  )}
</PipecatClientMicToggle>

Props

onMicEnabledChanged(enabled: boolean)

function

Triggered whenever the local participant’s microphone state changes

disabled

boolean

If true, the component will not allow toggling the microphone state. Default: false

children

function

A render prop that provides state and handlers to the children

VoiceVisualizer

Renders a visual representation of audio input levels on a <canvas> element.

<VoiceVisualizer
  participantType="local"
  backgroundColor="white"
  barColor="black"
  barGap={1}
  barWidth={4}
  barMaxHeight={24}
/>

Props

participantType

string

required

The participant type to visualize audio for

backgroundColor

string

The background color of the canvas. Default: ‘transparent’

barColor

string

The color of the audio level bars. Default: ‘black’

barCount

number

The number of bars to display. Default: 5

barGap

number

The gap between bars in pixels. Default: 12

barWidth

number

The width of each bar in pixels. Default: 30

barMaxHeight

number

The maximum height at full volume of each bar in pixels. Default: 120

Pipecat Server

Client SDKs

Pipecat Flows

Pipecat Cloud

CLI

Pipecat Context Hub

PipecatClientProvider

PipecatClientAudio

PipecatClientVideo

PipecatClientCamToggle

PipecatClientMicToggle

VoiceVisualizer

​PipecatClientProvider

​PipecatClientAudio

​PipecatClientVideo

​PipecatClientCamToggle

​PipecatClientMicToggle

​VoiceVisualizer

PipecatClientProvider

PipecatClientAudio

PipecatClientVideo

PipecatClientCamToggle

PipecatClientMicToggle

VoiceVisualizer