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

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

('local' | 'bot')

required

Defines which participant’s video track is rendered

('contain' | 'cover')

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

boolean

Forces the video to be mirrored, if set

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

function

Triggered whenever the local participant’s camera state changes

boolean

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

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

function

Triggered whenever the local participant’s microphone state changes

boolean

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

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

string

required

The participant type to visualize audio for

string

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

string

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

number

The number of bars to display. Default: 5

number

The gap between bars in pixels. Default: 12

number

The width of each bar in pixels. Default: 30

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