Components

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 });
  }}
/>

​

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’
• 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}
/>