Components

Ready-to-use React components for Pipecat applications

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

UITasksProvider

Drives the in-flight task-group state surfaced by useUITasks. Subscribes to the ambient PipecatClient’s RTVIEvent.UITask event stream (every ui-task envelope: group_started, task_update, task_completed, group_completed) and reduces them into a groups array consumers can render.

Mount inside PipecatClientProvider. Apps that don’t surface in-flight task state to the user can skip this provider; useUITasks returns an empty list and a no-op cancelTask when no UITasksProvider is mounted.

<PipecatClientProvider client={pcClient}>
  <UITasksProvider maxGroups={20}>
    <App />
  </UITasksProvider>
</PipecatClientProvider>

Props

maxGroups · number

Maximum number of groups to retain. When exceeded, oldest non-running groups are dropped first; running groups are never dropped. Omitted means unbounded.

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