Blocks - Tavus

Blocks are composed React layouts generated by npx @tavus/cvi-ui@latest add .... They are copied into your app, so import paths are relative to your generated component directory.

Block	Add command	Import path pattern	Props	Required context	Generated location pattern
`Conversation` full layout	`npx @tavus/cvi-ui@latest add conversation-01` or `add conversation`	`<components-path>/components/conversation`	`conversationUrl: string`, `onLeave: () => void`	`CVIProvider` ancestor	`<components-path>/components/conversation.*` plus supporting components/hooks/styles
`Conversation` minimal layout	`npx @tavus/cvi-ui@latest add conversation-02`	`<components-path>/components/conversation`	`conversationUrl: string`, `onLeave: () => void`	`CVIProvider` ancestor	`<components-path>/components/conversation.*` plus supporting components/hooks/styles
`HairCheck`	`npx @tavus/cvi-ui@latest add hair-check-01`	`<components-path>/components/hair-check`	`isJoinBtnLoading: boolean`, `onJoin: () => void`, `onCancel?: () => void`	`CVIProvider` ancestor	`<components-path>/components/hair-check.*` plus device hooks/styles

The docs below use relative imports such as ./components/cvi/components/conversation. Replace the prefix with the components path configured in your generated cvi-components.json.

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

​Conversation block

​conversation-01 (full-featured, default)

​conversation-02 (minimal)

​Hair Check

Conversation block

conversation-01 (full-featured, default)

conversation-02 (minimal)

Hair Check