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

# Components

> Learn about our pre-built React components to accelerate integrating the Tavus Conversational Video Interface (CVI) into your application.

These pages document **installable** UI pieces from **`@tavus/cvi-ui`** (`npx @tavus/cvi-ui@latest add …`). Wrap your app with **`CVIProvider`** so Daily’s React context and hooks work under this tree. For composed layouts see [Blocks](/sections/conversational-video-interface/component-library/blocks), for state hooks see [Hooks](/sections/conversational-video-interface/component-library/hooks), and for init + embed flows see [Embed CVI](/sections/integrations/embedding-cvi).

| Module            | Add command                                    | Import path pattern                            | Exports                                                            | Props / parameters                               | Required context                                           | Generated location pattern                       |
| ----------------- | ---------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------- | ------------------------------------------------ |
| `cvi-provider`    | `npx @tavus/cvi-ui@latest add cvi-provider`    | `<components-path>/components/cvi-provider`    | `CVIProvider`                                                      | `children: ReactNode`                            | None; this creates the Daily provider context              | `<components-path>/components/cvi-provider.*`    |
| `audio-wave`      | `npx @tavus/cvi-ui@latest add audio-wave`      | `<components-path>/components/audio-wave`      | `AudioWave`                                                        | `id: string` participant/session ID              | `CVIProvider` ancestor and active Daily call               | `<components-path>/components/audio-wave.*`      |
| `device-select`   | `npx @tavus/cvi-ui@latest add device-select`   | `<components-path>/components/device-select`   | `MicSelectBtn`, `CameraSelectBtn`, `ScreenShareButton`             | No component props                               | `CVIProvider` ancestor and active Daily call               | `<components-path>/components/device-select.*`   |
| `media-controls`  | `npx @tavus/cvi-ui@latest add media-controls`  | `<components-path>/components/media-controls`  | `MicToggleButton`, `CameraToggleButton`, `ScreenShareButton`       | No component props                               | `CVIProvider` ancestor and active Daily call               | `<components-path>/components/media-controls.*`  |
| `closed-captions` | `npx @tavus/cvi-ui@latest add closed-captions` | `<components-path>/components/closed-captions` | `ClosedCaptionsProvider`, `ClosedCaptionsButton`, `ClosedCaptions` | Provider: `children`, `defaultEnabled?: boolean` | `CVIProvider`; wrap caption UI in `ClosedCaptionsProvider` | `<components-path>/components/closed-captions.*` |
| `chat`            | `npx @tavus/cvi-ui@latest add chat`            | `<components-path>/components/chat`            | `ChatProvider`, `ChatButton`, `ChatPanel`                          | Provider: `children`, `defaultOpen?: boolean`    | `CVIProvider`; wrap chat UI in `ChatProvider`              | `<components-path>/components/chat.*`            |

<Note>
  `CVIProvider` is the React wrapper that makes Daily React context available. Components and hooks that read call state must render under it.
</Note>

### CVI Provider

The `CVIProvider` component wraps your app with the Daily.co provider context, enabling all Daily React hooks and components to function.

```bash theme={null}
npx @tavus/cvi-ui@latest add cvi-provider
```

<Tabs>
  <Tab title="Description">
    The `CVIProvider` component wraps your app with the Daily.co provider context, enabling all Daily React hooks and components to function.

    **Features:**

    * Provides Daily.co context to all child components
    * Required for using Daily React hooks and video/audio components
    * Simple wrapper for app-level integration

    **Props:**

    * `children` (ReactNode): Components to be wrapped by the provider
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { CVIProvider } from './cvi-provider';
    ```

    ```tsx theme={null}
    <CVIProvider>
      {/* your app components */}
    </CVIProvider>
    ```
  </Tab>
</Tabs>

<Note>
  Import paths such as `./cvi-provider` are **relative to your file** and to where the CLI copied components. Paths in [Embed CVI](/sections/integrations/embedding-cvi) (for example `./components/cvi/components/cvi-provider`) show another valid layout—adjust imports to match your project tree.
</Note>

### AudioWave

The `AudioWave` component provides real-time audio level visualization for video chat participants, displaying animated bars that respond to audio input levels.

```bash theme={null}
npx @tavus/cvi-ui@latest add audio-wave
```

<Tabs>
  <Tab title="Description">
    The `AudioWave` component provides real-time audio level visualization for video chat participants, displaying animated bars that respond to audio input levels.

    **Features:**

    * **Real-time Audio Visualization**: Three animated bars that respond to audio levels
    * **Active Speaker Detection**: Visual distinction between active and inactive speakers
    * **Performance Optimized**: Uses `requestAnimationFrame` for smooth animations
    * **Responsive Design**: Compact circular design that fits well in video previews
    * **Audio Level Scaling**: Intelligent volume scaling for consistent visual feedback

    **Props:**

    * `id` (string): The participant's session ID to monitor audio levels for
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { AudioWave } from './audio-wave';
    ```

    ```tsx theme={null}
    <AudioWave id={participantId} />
    ```
  </Tab>
</Tabs>

### Device Select

The `device-select` module provides advanced device selection controls, including dropdowns for choosing microphones and cameras, and integrated toggle buttons.

```bash theme={null}
npx @tavus/cvi-ui@latest add device-select
```

<Tabs>
  <Tab title="Description">
    The `device-select` module provides advanced device selection controls, including dropdowns for choosing microphones and cameras, and integrated toggle buttons.

    **Exported Components:**

    * **`MicSelectBtn`**: Microphone toggle button with device selection
    * **`CameraSelectBtn`**: Camera toggle button with device selection
    * **`ScreenShareButton`**: Button to toggle screen sharing

    **Features:**

    * Integrated device selection and toggling
    * Dropdowns for camera/microphone selection
    * Visual state indicators and accessibility support
    * Uses Daily.co device management hooks
    * CSS modules for styling
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from './device-select';
    ```

    ```tsx theme={null}
    <MicSelectBtn />
    <CameraSelectBtn />
    <ScreenShareButton />
    ```
  </Tab>
</Tabs>

<Note>
  **`ScreenShareButton`** exists in both **`device-select`** and **`media-controls`**. They are different exports from different modules—import from the path that matches the `npx @tavus/cvi-ui@latest add device-select` or `… add media-controls` command you ran.
</Note>

### Media Controls

The `media-controls` module provides simple toggle buttons for microphone, camera, and screen sharing, designed for direct use in video chat interfaces.

```bash theme={null}
npx @tavus/cvi-ui@latest add media-controls
```

<Tabs>
  <Tab title="Description">
    The `media-controls` module provides simple toggle buttons for microphone, camera, and screen sharing, designed for direct use in video chat interfaces.

    **Exported Components:**

    * **`MicToggleButton`**: Toggles microphone mute/unmute state
    * **`CameraToggleButton`**: Toggles camera on/off
    * **`ScreenShareButton`**: Toggles screen sharing on/off

    **Features:**

    * Simple, accessible toggle buttons
    * Visual state indicators (muted, unmuted, on/off)
    * Disabled state when device is not ready
    * Uses Daily.co hooks for device state
    * CSS modules for styling
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { MicToggleButton, CameraToggleButton, ScreenShareButton } from './media-controls';
    ```

    ```tsx theme={null}
    <MicToggleButton />
    <CameraToggleButton />
    <ScreenShareButton />
    ```
  </Tab>
</Tabs>

### Closed Captions

The `closed-captions` module renders live captions for both the user and the replica, plus a toggle button and a context provider that lets multiple components share the on/off state.

```bash theme={null}
npx @tavus/cvi-ui@latest add closed-captions
```

<Tabs>
  <Tab title="Description">
    The `closed-captions` module renders live captions for both the user and the replica, plus a toggle button and a context provider that lets multiple components share the on/off state.

    **Exported Components:**

    * **`ClosedCaptionsProvider`**: Context provider that owns the captions on/off state. Wrap your conversation tree with it.
    * **`ClosedCaptionsButton`**: Toggle button that flips captions on and off (uses `aria-pressed`).
    * **`ClosedCaptions`**: Overlay that displays the active caption with the speaker's role label. Shows the latest 3 lines and auto-clears 2 seconds after the final utterance.

    **Features:**

    * Streams captions from `conversation.utterance.streaming` for both `user` and `replica` roles
    * Auto-clears the caption after each final utterance
    * Anchors to the bottom of the overlay so the most recent text is always visible
    * CSS modules for styling, customizable via `--cc-line-height` and `--cc-max-lines`

    **Provider Props:**

    * `children` (ReactNode): Components to be wrapped by the provider
    * `defaultEnabled` (boolean, optional): Initial captions on/off state. Defaults to `false`.
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import {
      ClosedCaptions,
      ClosedCaptionsButton,
      ClosedCaptionsProvider,
    } from './closed-captions';
    ```

    ```tsx theme={null}
    <ClosedCaptionsProvider>
      <div className="video-area">
        {/* main video, self-view, etc. */}
        <ClosedCaptions />
      </div>
      <div className="footer-controls">
        <ClosedCaptionsButton />
        {/* other controls */}
      </div>
    </ClosedCaptionsProvider>
    ```
  </Tab>
</Tabs>

### Chat

The `chat` module renders a slide-in side panel for text chat alongside the live conversation, plus a toggle button and a context provider that owns the panel's open/closed state.

```bash theme={null}
npx @tavus/cvi-ui@latest add chat
```

<Tabs>
  <Tab title="Description">
    The `chat` module renders a slide-in side panel for text chat alongside the live conversation, plus a toggle button and a context provider that owns the panel's open/closed state.

    **Exported Components:**

    * **`ChatProvider`**: Context provider that owns the chat panel's open/closed state. Wrap your conversation tree with it.
    * **`ChatButton`**: Toggle button that opens and closes the chat panel (uses `aria-expanded` and `aria-controls`).
    * **`ChatPanel`**: Slide-in side panel containing the message list and composer. Renders a persistent ARIA live region so screen readers announce new messages, and is set to `inert` while closed so its contents stay out of the tab order.

    **Features:**

    * **Message list**: Renders the running transcript of `user` and `replica` messages tracked by [`useChat`](/sections/conversational-video-interface/component-library/hooks#usechat), with optimistic local echo for messages the user just sent.
    * **Composer**: Multi-line textarea with **Enter to send**, **Shift+Enter for newline**, and IME-safe input handling so composition (e.g. CJK input) is not interrupted by the send shortcut.

    **Provider Props:**

    * `children` (ReactNode): Components to be wrapped by the provider
    * `defaultOpen` (boolean, optional): Initial open/closed state of the chat panel. Defaults to `false`.
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import {
      ChatButton,
      ChatPanel,
      ChatProvider,
    } from './chat';
    ```

    ```tsx theme={null}
    <ChatProvider>
      <div className="conversation-layout">
        <div className="video-area">
          {/* main video, self-view, etc. */}
        </div>
        <ChatPanel />
      </div>
      <div className="footer-controls">
        <ChatButton />
        {/* other controls */}
      </div>
    </ChatProvider>
    ```
  </Tab>
</Tabs>