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

​
RTVIClientProvider

The root component for providing Pipecat client context to your application.

​
Props

  • client (RTVIClient, required): A singleton instance of RTVIClient
<RTVIClientProvider client={rtviClient}>
  {/* Child components */}
</RTVIClientProvider>

​
RTVIClientAudio

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

​
Props

No props required

<RTVIClientAudio />

​
RTVIClientVideo

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

​
Props

  • participant (“local” | “bot”): Defines which participant’s video track is rendered
  • fit (“contain” | “cover”, optional): Defines whether the video should be fully contained or cover the box. Default: ‘contain’
  • mirror (boolean, optional): Forces the video to be mirrored, if set
  • onResize(dimensions: object) (function, optional): Triggered whenever the video’s rendered width or height changes
<RTVIClientVideo
  participant="local"
  fit="cover"
  mirror
  onResize={({ aspectRatio, height, width }) => {
    console.log("Video dimensions changed:", { aspectRatio, height, width });
  }}
/>

​
RTVIClientCamToggle

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

​
Props

  • onCamEnabledChanged(enabled: boolean) (function, optional): Triggered whenever the local participant’s camera state changes
  • disabled (boolean, optional): If true, the component will not allow toggling the camera state. Default: false
  • children (function, optional): A render prop that provides state and handlers to the children
<RTVIClientCamToggle
  onCamEnabledChanged={(enabled) => console.log("Camera enabled:", enabled)}
  disabled={false}
>
  {({ disabled, isCamEnabled, onClick }) => (
    <button disabled={disabled} onClick={onClick}>
      {isCamEnabled ? "Disable Camera" : "Enable Camera"}
    </button>
  )}
</RTVIClientCamToggle>

​
RTVIClientMicToggle

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

​
Props

  • onMicEnabledChanged(enabled: boolean) (function, optional): Triggered whenever the local participant’s microphone state changes
  • disabled (boolean, optional): If true, the component will not allow toggling the microphone state. Default: false
  • children (function, optional): A render prop that provides state and handlers to the children
<RTVIClientMicToggle
  onMicEnabledChanged={(enabled) => console.log("Microphone enabled:", enabled)}
  disabled={false}
>
  {({ disabled, isMicEnabled, onClick }) => (
    <button disabled={disabled} onClick={onClick}>
      {isMicEnabled ? "Disable Microphone" : "Enable Microphone"}
    </button>
  )}
</RTVIClientMicToggle>

​
VoiceVisualizer

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

​
Props

  • participantType (string, required): The participant type to visualize audio for
  • backgroundColor (string, optional): The background color of the canvas. Default: ‘transparent’
  • barColor (string, optional): The color of the audio level bars. Default: ‘black’
  • barCount (number, optional): The number of bars to display. Default: 5
  • barGap (number, optional): The gap between bars in pixels. Default: 12
  • barWidth (number, optional): The width of each bar in pixels. Default: 30
  • barMaxHeight (number, optional): The maximum height at full volume of each bar in pixels. Default: 120
<VoiceVisualizer
  participantType="local"
  backgroundColor="white"
  barColor="black"
  barGap={1}
  barWidth={4}
  barMaxHeight={24}
/>