> ## Documentation Index
> Fetch the complete documentation index at: https://daily-docs-pr-5482.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Ready-to-use React components from the Pipecat React SDK: PipecatClientProvider, audio and video rendering, and visualizers.

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>

<ParamField path="autoInitDevices" type="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
</ParamField>

<ParamField path="jotaiStore" type="JotaiStore">
  Override the default Jotai store. Relevant for apps already using Jotai, or
  running more than one client
</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="trackType" type="('video' | 'screenVideo')">
  Which of the participant's video tracks to render. Default: 'video'. Use
  'screenVideo' to render a screen share
</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>

## PipecatClientScreenShareToggle

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

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

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

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

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

<Note>
  Starting a screen share opens the browser's own picker, so it must run from a
  user gesture — a click handler, as above. Render the shared surface with
  [`PipecatClientVideo`](#pipecatclientvideo) using `trackType="screenVideo"`.
</Note>

## 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="'local' | 'bot'" 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="barLineCap" type="('round' | 'square')">
  The shape of each bar's ends. Default: 'round'
</ParamField>

<ParamField path="barOrigin" type="('top' | 'bottom' | 'center')">
  Where each bar grows from. Default: 'center'
</ParamField>

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