> ## 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 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`](https://docs.pipecat.ai/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**

**client** `PipecatClient` *required*

A singleton instance of `PipecatClient`

**autoInitDevices** `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

**jotaiStore** `JotaiStore`

Override the default Jotai store. Relevant for apps already using Jotai, or
running more than one client

## PipecatClientAudio

Creates a new `<audio>` element that mounts the bot's audio track. To render your own `<audio>` element instead, use [`usePipecatClientAudioElement`](https://docs.pipecat.ai/api-reference/client/react/hooks#usepipecatclientaudioelement).

```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**

**participant** `('local' | 'bot')` *required*

Defines which participant's video track is rendered

**trackType** `('video' | 'screenVideo')`

Which of the participant's video tracks to render. Default: 'video'. Use
'screenVideo' to render a screen share

**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

Other `<video>` attributes and a `ref` are passed through to the underlying element.

## 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**

**onCamEnabledChanged(enabled: boolean)** `function`

Triggered when this toggle's `onClick` changes the camera state, with the new
value. Changes made elsewhere don't trigger it.

**disabled** `boolean`

If true, the component will not allow toggling the camera state. Default:
false

**children** `function` *required*

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.

```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**

**onMicEnabledChanged(enabled: boolean)** `function`

Triggered when this toggle's `onClick` changes the microphone state, with the
new value. Changes made elsewhere don't trigger it.

**disabled** `boolean`

If true, the component will not allow toggling the microphone state. Default:
false

**children** `function` *required*

A render prop that provides state and handlers to the children

## 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**

**onScreenShareEnabledChanged(enabled: boolean)** `function`

Triggered whenever the local participant's screen share state changes

**disabled** `boolean`

If true, the component will not allow toggling the screen share state.
Default: false

**children** `function` *required*

A render prop that provides state and handlers to the children

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

## 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**

**participantType** `'local' | 'bot'` *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

**barLineCap** `('round' | 'square')`

The shape of each bar's ends. Default: 'round'

**barOrigin** `('top' | 'bottom' | 'center')`

Where each bar grows from. Default: 'center'

**barMaxHeight** `number`

The maximum height at full volume of each bar in pixels. Default: 120

## UIJobGroupsProvider

Collects the bot's UI job groups for [`useUIJobGroups`](https://docs.pipecat.ai/api-reference/client/react/hooks#useuijobgroups). Place it inside `PipecatClientProvider`.

```jsx theme={null}
<UIJobGroupsProvider maxGroups={20}>
  <App />
</UIJobGroupsProvider>
```

**Props**

**maxGroups** `number`

Maximum number of groups to retain. When exceeded, the oldest groups that
aren't running are dropped first; running groups are never dropped. Default:
unbounded


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.