> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tavus.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CVI App: AI Prompt

> Copy-paste checklist for Cursor, Copilot, or other AI coding agents to scaffold React (TypeScript, Vite) with Tavus CVI and @tavus/cvi-ui.

This page is a **single checklist** you paste into an AI coding agent so it scaffolds a **Vite + React (TypeScript)** app with **`@tavus/cvi-ui`**, creates conversations via the Tavus API, and wires **`CVIProvider`** and **`Conversation`**.

For how embedding fits in the product, see [Embed CVI](/sections/integrations/embedding-cvi). For UI primitives after `init` / `add`, see the [component library overview](/sections/conversational-video-interface/component-library/overview). API calls need a Tavus key from [Authentication](/api-reference/authentication); sessions use **`conversation_url`** from [Create Conversation](/api-reference/conversations/create-conversation).

<Prompt description="React (TypeScript, Vite) + Tavus CVI — copy for your AI agent" actions={["copy", "cursor"]}>
  ## ✅ **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 (embed guide: `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 <CVIProvider>{/* Your app content */}</CVIProvider>;
  }
  ```

  ***

  #### **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 || "r90bbd427f71",  // 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 `<Conversation>`.

  ***

  #### **5. Render `Conversation` Inside `CVIProvider`**

  ```tsx theme={null}
  <Conversation
    conversationUrl={conversationUrl}
    onLeave={() => 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=r90bbd427f71   // 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<string | null>(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 || "r90bbd427f71",
          persona_id: import.meta.env.VITE_PERSONA_ID || "pcb7a34da5fe",
        }),
      });

      const data = await response.json();
      setConversationUrl(data.conversation_url);
    };

    return (
      <CVIProvider>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: "100vw",
            height: "100vh",
            backgroundColor: "#1e1e1e",
            color: "#fff",
            textAlign: "center",
            flexDirection: "column",
            margin: 0,
            padding: 0,
          }}
        >
          <h1 style={{ marginBottom: "1rem" }}>Tavus CVI Integration (Vite)</h1>
          {!conversationUrl ? (
            <button
              onClick={createConversation}
              style={{
                padding: "0.75rem 1.5rem",
                fontSize: "1rem",
                background: "#6a0dad",  // Purple for light and dark modes
                color: "#fff",
                border: "none",
                borderRadius: "6px",
                cursor: "pointer",
              }}
            >
              Start Conversation
            </button>
          ) : (
            <div style={{ width: "100%", maxWidth: "800px" }}>
              <Conversation
                conversationUrl={conversationUrl}
                onLeave={() => setConversationUrl(null)}
              />
            </div>
          )}
        </div>
      </CVIProvider>
    );
  };

  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 `<Conversation>` inside `<CVIProvider>`
  * ✅ 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.
</Prompt>