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

boolean

Call client.initDevices() when the provider mounts, if the client still needs it. Default: false, so nothing requests device permissions before the user does something deliberate. Set it true when consent is already handled elsewhere, such as a “join” button that initializes devices itself

JotaiStore

Override the default Jotai store. Relevant for apps already using Jotai, or running more than one client

PipecatClientAudio

Creates a new <audio> element that mounts the bot’s audio track. To render your own <audio> element instead, use usePipecatClientAudioElement.

<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

('video' | 'screenVideo')

Which of the participant’s video tracks to render. Default: ‘video’. Use ‘screenVideo’ to render a screen share

('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

Other <video> attributes and a ref are passed through to the underlying element.

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 when this toggle’s onClick changes the camera state, with the new value. Changes made elsewhere don’t trigger it.

boolean

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

function

required

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 when this toggle’s onClick changes the microphone state, with the new value. Changes made elsewhere don’t trigger it.

boolean

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

function

required

A render prop that provides state and handlers to the children

PipecatClientScreenShareToggle

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

<PipecatClientScreenShareToggle
  onScreenShareEnabledChanged={(enabled) =>
    console.log("Screen share enabled:", enabled)
  }
>
  {({ disabled, isScreenShareEnabled, onClick }) => (
    <button disabled={disabled} onClick={onClick}>
      {isScreenShareEnabled ? "Stop Sharing" : "Share Screen"}
    </button>
  )}
</PipecatClientScreenShareToggle>

Props

Triggered whenever the local participant’s screen share state changes

boolean

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

function

required

A render prop that provides state and handlers to the children

Starting a screen share opens the browser’s own picker, so it must run from a user gesture, such as a click handler as above. Render the shared surface with PipecatClientVideo using trackType="screenVideo".

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

'local' | 'bot'

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

('round' | 'square')

The shape of each bar’s ends. Default: ‘round’

('top' | 'bottom' | 'center')

Where each bar grows from. Default: ‘center’

number

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

UIJobGroupsProvider

Collects the bot’s UI job groups for useUIJobGroups. Place it inside PipecatClientProvider.

<UIJobGroupsProvider maxGroups={20}>
  <App />
</UIJobGroupsProvider>

Props

number

Maximum number of groups to retain. When exceeded, the oldest groups that aren’t running are dropped first; running groups are never dropped. Default: unbounded

Get Started

Standards

Pipecat Server

Client SDKs

Pipecat Flows

Pipecat Cloud

CLI

Pipecat Context Hub

PipecatClientProvider

PipecatClientAudio

PipecatClientVideo

PipecatClientCamToggle

PipecatClientMicToggle

PipecatClientScreenShareToggle

VoiceVisualizer

UIJobGroupsProvider