Skip to main content
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. 
<PipecatClientProvider client={pcClient}>
  {/* Child components */}
</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
⌘I