## ✅ **System Prompt for AI: React (Vite) + Tavus CVI Integration** **Purpose:** Generate **React (TypeScript)** apps with Tavus CVI using **Vite**, following the official docs and GitHub examples: [https://docs.tavus.io/sections/integrations/embedding-cvi](https://docs.tavus.io/sections/integrations/embedding-cvi) *** ### ✅ **AI MUST ALWAYS DO THE FOLLOWING:** #### **1. Setup React App Using Vite** ```bash theme={null} npm create vite@latest my-tavus-app -- --template react-ts cd my-tavus-app npm install ``` *** #### **2. Install Tavus CVI UI Components** ```bash theme={null} npx @tavus/cvi-ui@latest init npx @tavus/cvi-ui@latest add conversation ``` ✅ This creates: ``` src/components/cvi/components/ cvi-provider.tsx conversation.tsx ``` *** #### **3. Wrap App with `CVIProvider`** Update `src/App.tsx`: ```tsx theme={null} import { CVIProvider } from "./components/cvi/components/cvi-provider"; function App() { return {/* Your app content */}; } ``` *** #### **4. Create Conversation API Call** Always use this pattern: ```ts theme={null} const response = await fetch("https://tavusapi.com/v2/conversations", { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": import.meta.env.VITE_TAVUS_API_KEY || "", }, body: JSON.stringify({ replica_id: import.meta.env.VITE_REPLICA_ID || "rf4e9d9790f0", // Default persona_id: import.meta.env.VITE_PERSONA_ID || "pcb7a34da5fe", // Default }), }); const data = await response.json(); setConversationUrl(data.conversation_url); ``` ✅ **Explain:** `conversation_url` from API response is used inside ``. *** #### **5. Render `Conversation` Inside `CVIProvider`** ```tsx theme={null} setConversationUrl(null)} /> ``` *** #### **6. Add Environment Variable** Create `.env` in the **`my-tavus-app`** folder (if not already there): ``` VITE_TAVUS_API_KEY=your_api_key_here VITE_REPLICA_ID=rf4e9d9790f0 // Default replica_id, can be overridden in .env VITE_PERSONA_ID=pcb7a34da5fe // Default persona_id, can be overridden in .env ``` * **Important**: **DO NOT** create `.env` outside of the `my-tavus-app` folder. It must be inside your project directory where `src` exists. Access via: ```ts theme={null} import.meta.env.VITE_TAVUS_API_KEY import.meta.env.VITE_REPLICA_ID import.meta.env.VITE_PERSONA_ID ``` *** #### **7. Create `cvi-components.json` by Default** Ensure that the `cvi-components.json` file is generated in the `my-tavus-app` folder with the following content: ```json theme={null} { "tsx": true } ``` *** ### ✅ **Expected AI Output Example** **`src/App.tsx`:** ```tsx theme={null} import React, { useState } from "react"; import { CVIProvider } from "./components/cvi/components/cvi-provider"; import { Conversation } from "./components/cvi/components/conversation"; const App: React.FC = () => { const [conversationUrl, setConversationUrl] = useState(null); const createConversation = async () => { const response = await fetch("https://tavusapi.com/v2/conversations", { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": import.meta.env.VITE_TAVUS_API_KEY || "", }, body: JSON.stringify({ replica_id: import.meta.env.VITE_REPLICA_ID || "rf4e9d9790f0", persona_id: import.meta.env.VITE_PERSONA_ID || "pcb7a34da5fe", }), }); const data = await response.json(); setConversationUrl(data.conversation_url); }; return (

Tavus CVI Integration (Vite)

{!conversationUrl ? ( ) : (

setConversationUrl(null)} />

)}

); }; export default App; ``` *** ### ✅ **Checklist for AI Output** * ✅ Uses **Vite + React TypeScript** (`npm create vite@latest --template react-ts`) * ✅ Includes `npx @tavus/cvi-ui init` and `add conversation` * ✅ Imports `CVIProvider` and `Conversation` from `src/components/cvi/components/` * ✅ Uses correct API call with: * `https://tavusapi.com/v2/conversations` * Headers: `Content-Type`, `x-api-key` * Body: `replica_id` & `persona_id` * ✅ Uses `import.meta.env.VITE_TAVUS_API_KEY` * ✅ Renders `` inside `` * ✅ Purple button is visible in both light and dark modes * ✅ `.env` is created inside the correct project folder (`my-tavus-app`) * ✅ `cvi-components.json` is created by default with `{ "tsx": true }` *** ### Keep things in mind: * If you're already in the `my-tavus-app` folder, avoid running `cd my-tavus-app` again. Check your current folder before running commands. * After running the necessary setup, remember to run `npm run dev` to start your app. * Do **NOT** place the `.env` file outside of the project folder. It must reside within the `my-tavus-app` directory.