Blocks

Conversation block

The Conversation component provides a complete video chat interface for one-to-one conversations with AI replicas. Two variants are available: conversation-01 (full-featured, default) and conversation-02 (minimal).

conversation-01 (full-featured, default)

npx @tavus/cvi-ui@latest add conversation-01

Description
Code

The default Conversation block — a full-featured video chat surface for one-to-one conversations with AI replicas.Features:

Main Video Display: Large video area showing the AI replica or screen share
Top-right Self-View: Square self-view preview pinned to the top-right of the main video
Chat: Slide-in chat side panel with toggle button (built on the Chat module)
Closed Captions: Live captions overlay with toggle button (built on the Closed Captions module)
Screen Sharing: Automatic switching between replica video and screen share
Animated Connect / Leave States: Animated transitions when joining and leaving the call
Device Controls: Integrated microphone, camera, and screen share controls
Error Handling: Graceful handling of camera/microphone permission errors
Responsive Layout: Adaptive design for different screen sizes

Props:

conversationUrl (string): Daily.co room URL for joining
onLeave (function): Callback when user leaves the conversation

import { Conversation } from './components/cvi/components/conversation';

<Conversation
  conversationUrl={conversationUrl}
  onLeave={() => handleLeaveCall()}
/>

Preview

conversation-02 (minimal)

npx @tavus/cvi-ui@latest add conversation-02

Description
Code

A minimal Conversation block — video plus the essential device and leave controls, without chat or captions. Use this when you want to compose your own UI around the call surface.Features:

Main Video Display: Large video area showing the AI replica or screen share
Self-View Preview: Small preview window showing local camera feed
Device Controls: Microphone, camera, and screen share toggle buttons
Leave Button: Disconnects from the call and fires onLeave
Animated Connect / Leave States: Animated transitions when joining and leaving the call
Error Handling: Graceful handling of camera/microphone permission errors
Responsive Layout: Adaptive design for different screen sizes

Props:

conversationUrl (string): Daily.co room URL for joining
onLeave (function): Callback when user leaves the conversation

import { Conversation } from './components/cvi/components/conversation';

<Conversation
  conversationUrl={conversationUrl}
  onLeave={() => handleLeaveCall()}
/>

Preview

Hair Check

The HairCheck component provides a pre-call interface for users to test and configure their audio/video devices before joining a video chat.

npx @tavus/cvi-ui@latest add hair-check-01

Description
Code

The HairCheck component provides a pre-call interface for users to test and configure their audio/video devices before joining a video chat.Features:

Device Testing: Live preview of camera feed with mirror effect
Permission Management: Handles camera and microphone permission requests
Device Controls: Integrated microphone and camera controls
Join Interface: Call-to-action button to join the video chat
Responsive Design: Works on both desktop and mobile devices

Props:

isJoinBtnLoading (boolean): Shows loading state on join button
onJoin (function): Callback when user clicks join
onCancel (function, optional): Callback when user cancels

import { HairCheck } from './components/cvi/components/hair-check';

<HairCheck
  isJoinBtnLoading={isLoading}
  onJoin={handleJoinCall}
  onCancel={handleCancel}
/>

Preview

Getting started

Build

Deploy

Debug

Guides

Resources

Conversation block

conversation-01 (full-featured, default)

conversation-02 (minimal)

Hair Check

Getting started

Build

Deploy

Debug

Guides

Resources

Documentation Index

​Conversation block

​conversation-01 (full-featured, default)

​conversation-02 (minimal)

​Hair Check

Conversation block

conversation-01 (full-featured, default)

conversation-02 (minimal)

Hair Check