​
Overview

Tavus CVI delivers AI-powered video conversations directly in your application. You can integrate it using:
MethodBest ForComplexityCustomization
@tavus/cvi-uiReact apps, advanced featuresLowHigh
iframeStatic websites, quick demosLowLow
Vanilla JSBasic dynamic behaviorLowMedium
Node.js + ExpressBackend apps, dynamic embeddingMediumHigh
Daily SDKFull UI control, advanced featuresHighVery High

​
Implementation Steps

This method provides a full-featured React component library. It offers pre-built, customizable components and hooks for embedding Tavus CVI in your app.

​
Overview

The Tavus Conversational Video Interface (CVI) React component library provides a complete set of pre-built components and hooks for integrating AI-powered video conversations into your React applications. This library simplifies setting up Tavus in your codebase, allowing you to focus on your application’s core features.Key features include:
  • Pre-built video chat components
  • Device management (camera, microphone, screen sharing)
  • Real-time audio/video processing
  • Customizable styling and theming
  • TypeScript support with full type definitions

​
Quick Start

​
Prerequisites

Before getting started, ensure you have a React project set up.Alternatively, you can start from our example project: CVI UI Haircheck Conversation Example - this example already has the HairCheck and Conversation blocks set up.

​
1. Initialize CVI in Your Project

npx @tavus/cvi-ui@latest init
  • Creates a cvi-components.json config file
  • Prompts for TypeScript preference
  • Installs npm dependencies (@daily-co/daily-react, @daily-co/daily-js, jotai)

​
2. Add CVI Components

npx @tavus/cvi-ui@latest add conversation

​
3. Wrap Your App with the CVI Provider

In your root directory (main.tsx or index.tsx):
import { CVIProvider } from './components/cvi/components/cvi-provider';

function App() {
  return <CVIProvider>{/* Your app content */}</CVIProvider>;
}

​
4. Add a Conversation Component

Learn how to create a conversation URL at https://docs.tavus.io/api-reference/conversations/create-conversation.Note: The Conversation component requires a parent container with defined dimensions to display properly.
Ensure your body element has full dimensions (width: 100% and height: 100%) in your CSS for proper component display.
import { Conversation } from './components/cvi/components/conversation';

function CVI() {
  const handleLeave = () => {
    // handle leave
  };
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        maxWidth: '1200px',
        margin: '0 auto',
      }}
    >
      <Conversation
        conversationUrl='YOUR_TAVUS_MEETING_URL'
        onLeave={handleLeave}
      />
    </div>
  );
}

​
Documentation Sections

  • Overview – Overview of the CVI component library
  • Blocks – High-level component compositions and layouts
  • Components – Individual UI components
  • Hooks – Custom React hooks for managing video call state and interactions

​
FAQs

How can I reduce background noise during calls?

Can I add event listeners to the call client?