{p.user_name || id.slice(-4)}
{isPermissionsLoading &&
);
};
```
Listening for conversation events...
;
};
```
setMessage(e.target.value)}
placeholder="Type a message"
/>
If you use Cursor, use this pre-built prompt to get started faster:
## ✅ **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 (
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.
# Conversational Flow
Source: https://docs.tavus.io/sections/conversational-video-interface/persona/conversational-flow
Learn how to configure the Conversational Flow layer to fine-tune turn-taking and interruption handling behavior.
The **Conversational Flow Layer** in Tavus gives you precise control over the natural dynamics of conversation. This layer allows you to customize how your replica handles turn-taking and interruptions to create conversational experiences that match your specific use case.
## Understanding Conversational Flow
Conversational flow encompasses the subtle dynamics that make conversations feel natural:
* **Turn-taking**: How the replica decides when to speak and when to listen
* **Interruptibility**: How easily the replica can be interrupted by the user