> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pipecat.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`](/api-reference/client/react/hooks#usepipecatconversation) hook to access messages without adding a separate provider.

```jsx theme={null}
<PipecatClientProvider client={pcClient}>
  {/* Child components can use usePipecatConversation, usePipecatClient, etc. */}
</PipecatClientProvider>
```

**Props**

<ParamField path="client" type="PipecatClient" required>
  A singleton instance of `PipecatClient`
</ParamField>

## PipecatClientAudio

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

```jsx theme={null}
<PipecatClientAudio />
```

**Props**

No props required

## PipecatClientVideo

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

```jsx theme={null}
<PipecatClientVideo
  participant="local"
  fit="cover"
  mirror
  onResize={({ aspectRatio, height, width }) => {
    console.log("Video dimensions changed:", { aspectRatio, height, width });
  }}
/>
```

**Props**

<ParamField path="participant" type="('local' | 'bot')" required>
  Defines which participant's video track is rendered
</ParamField>

<ParamField path="fit" type="('contain' | 'cover')">
  Defines whether the video should be fully contained or cover the box. Default:
  'contain'
</ParamField>

<ParamField path="mirror" type="boolean">
  Forces the video to be mirrored, if set
</ParamField>

<ParamField path="onResize(dimensions: object)" type="function">
  Triggered whenever the video's rendered width or height changes
</ParamField>

## PipecatClientCamToggle

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

```jsx theme={null}
<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**

<ParamField path="onCamEnabledChanged(enabled: boolean)" type="function">
  Triggered whenever the local participant's camera state changes
</ParamField>

<ParamField path="disabled" type="boolean">
  If true, the component will not allow toggling the camera state. Default:
  false
</ParamField>

<ParamField path="children" type="function">
  A render prop that provides state and handlers to the children
</ParamField>

## PipecatClientMicToggle

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

```jsx theme={null}
<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**

<ParamField path="onMicEnabledChanged(enabled: boolean)" type="function">
  Triggered whenever the local participant's microphone state changes
</ParamField>

<ParamField path="disabled" type="boolean">
  If true, the component will not allow toggling the microphone state. Default:
  false
</ParamField>

<ParamField path="children" type="function">
  A render prop that provides state and handlers to the children
</ParamField>

## VoiceVisualizer

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

```jsx theme={null}
<VoiceVisualizer
  participantType="local"
  backgroundColor="white"
  barColor="black"
  barGap={1}
  barWidth={4}
  barMaxHeight={24}
/>
```

**Props**

<ParamField path="participantType" type="string" required>
  The participant type to visualize audio for
</ParamField>

<ParamField path="backgroundColor" type="string">
  The background color of the canvas. Default: 'transparent'
</ParamField>

<ParamField path="barColor" type="string">
  The color of the audio level bars. Default: 'black'
</ParamField>

<ParamField path="barCount" type="number">
  The number of bars to display. Default: 5
</ParamField>

<ParamField path="barGap" type="number">
  The gap between bars in pixels. Default: 12
</ParamField>

<ParamField path="barWidth" type="number">
  The width of each bar in pixels. Default: 30
</ParamField>

<ParamField path="barMaxHeight" type="number">
  The maximum height at full volume of each bar in pixels. Default: 120
</ParamField>