Components

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, for state hooks see Hooks, and for init + embed flows see Embed CVI.

CVI Provider

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

npx @tavus/cvi-ui@latest add cvi-provider

Description
Code

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

import { CVIProvider } from './cvi-provider';

<CVIProvider>
  {/* your app components */}
</CVIProvider>

Import paths such as ./cvi-provider are relative to your file and to where the CLI copied components. Paths in Embed CVI (for example ./components/cvi/components/cvi-provider) show another valid layout—adjust imports to match your project tree.

AudioWave

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

npx @tavus/cvi-ui@latest add audio-wave

Description
Code

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

import { AudioWave } from './audio-wave';

<AudioWave id={participantId} />

Device Select

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

npx @tavus/cvi-ui@latest add device-select

Description
Code

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

import { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from './device-select';

<MicSelectBtn />
<CameraSelectBtn />
<ScreenShareButton />

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.

Media Controls

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

npx @tavus/cvi-ui@latest add media-controls

Description
Code

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

import { MicToggleButton, CameraToggleButton, ScreenShareButton } from './media-controls';

<MicToggleButton />
<CameraToggleButton />
<ScreenShareButton />

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.

npx @tavus/cvi-ui@latest add closed-captions

Description
Code

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.

import {
  ClosedCaptions,
  ClosedCaptionsButton,
  ClosedCaptionsProvider,
} from './closed-captions';

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

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.

npx @tavus/cvi-ui@latest add chat

Description
Code

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, 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.

import {
  ChatButton,
  ChatPanel,
  ChatProvider,
} from './chat';

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

Getting started

Build

Deploy

Debug

Guides

Resources

CVI Provider

AudioWave

Device Select

Media Controls

Closed Captions

Chat

Getting started

Build

Deploy

Debug

Guides

Resources

Documentation Index

​CVI Provider

​AudioWave

​Device Select

​Media Controls

​Closed Captions

​Chat

CVI Provider

AudioWave

Device Select

Media Controls

Closed Captions

Chat