@tavus/cvi-ui 0.0.2-beta.0 → 0.0.3-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -17
- package/dist/index.js +352 -33
- package/package.json +40 -39
package/README.md
CHANGED
|
@@ -28,11 +28,7 @@ npx @tavus/cvi-ui@latest add conversation
|
|
|
28
28
|
import { CVIProvider } from './components/cvi/components/cvi-provider';
|
|
29
29
|
|
|
30
30
|
function App() {
|
|
31
|
-
|
|
32
|
-
<CVIProvider>
|
|
33
|
-
{/* Your app content */}
|
|
34
|
-
</CVIProvider>
|
|
35
|
-
);
|
|
31
|
+
return <CVIProvider>{/* Your app content */}</CVIProvider>;
|
|
36
32
|
}
|
|
37
33
|
```
|
|
38
34
|
|
|
@@ -42,21 +38,78 @@ function App() {
|
|
|
42
38
|
import { Conversation } from './components/cvi/components/conversation';
|
|
43
39
|
|
|
44
40
|
function CVI() {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
41
|
+
return (
|
|
42
|
+
<div
|
|
43
|
+
style={{
|
|
44
|
+
width: '100%',
|
|
45
|
+
height: '100%',
|
|
46
|
+
maxWidth: '1200px',
|
|
47
|
+
margin: '0 auto',
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
<Conversation conversationUrl="YOUR_TAVUS_MEETING_URL" onLeave={() => {}} />
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
57
53
|
}
|
|
58
54
|
```
|
|
59
55
|
|
|
56
|
+
**(Optional) Install the server-side conversation lifecycle**:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npx @tavus/cvi-ui@latest add tavus-api
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Detects your framework (Next.js / Remix / TanStack Start) and installs a server route that creates and ends Tavus conversations using your `TAVUS_API_KEY` — kept on the server. Use `createTavusConversation()` from your UI to obtain the `conversation_url` you pass into `<Conversation />` above. See [Conversation lifecycle](#conversation-lifecycle-creating--ending-calls) below for the Vite-with-server opt-in.
|
|
63
|
+
|
|
64
|
+
## Conversation lifecycle (creating & ending calls)
|
|
65
|
+
|
|
66
|
+
To open a conversation you need a `conversation_url`. Tavus issues those via its REST API — and that API requires your `TAVUS_API_KEY`. The key must **never** ship in your client bundle. The CLI installs the right pieces for your framework so the key stays on the server:
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
npx @tavus/cvi-ui@latest add tavus-api
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
| Detected framework | What gets installed |
|
|
73
|
+
| ----------------------------------- | --------------------------------------------------------------- |
|
|
74
|
+
| Next.js (App Router) | `app/api/tavus/route.ts` + `lib/tavus-client.ts` |
|
|
75
|
+
| Next.js (Pages Router) | `pages/api/tavus.ts` + `lib/tavus-client.ts` |
|
|
76
|
+
| Remix | `app/routes/api.tavus.ts` + `lib/tavus-client.ts` |
|
|
77
|
+
| TanStack Start | `app/routes/api/tavus.ts` + `lib/tavus-client.ts` |
|
|
78
|
+
| Anything else (plain Vite, Expo, …) | **Exits with an error.** See the Vite-with-server opt-in below. |
|
|
79
|
+
|
|
80
|
+
Set the server-side env var (no client prefix). [Create your API key in the Tavus Developer Portal →](https://platform.tavus.io/api-keys)
|
|
81
|
+
|
|
82
|
+
```env
|
|
83
|
+
TAVUS_API_KEY=sk_...
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Then call from your UI — your key is never touched on the client:
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { createTavusConversation, endTavusConversation } from './components/cvi/lib/tavus-client';
|
|
90
|
+
|
|
91
|
+
const { conversation_id, conversation_url } = await createTavusConversation({
|
|
92
|
+
replica_id: 'rf4e9d9790f0',
|
|
93
|
+
persona_id: 'pcb7a34da5fe',
|
|
94
|
+
});
|
|
95
|
+
// …pass conversation_url into <Conversation />, then later:
|
|
96
|
+
await endTavusConversation(conversation_id);
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
`createTavusConversation()` accepts every field on `POST /v2/conversations` — see the [create-conversation API reference](https://docs.tavus.io/api-reference/conversations/create-conversation) for the full schema. Unknown fields are forwarded as-is, so new Tavus fields work without a CLI update.
|
|
100
|
+
|
|
101
|
+
### Vite (or any setup) with a server runtime
|
|
102
|
+
|
|
103
|
+
If you're on Vite + a server (Vinxi, Hono, vike-server, custom Express, Bun, Cloudflare Workers, …), opt in to a runtime-agnostic handler:
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
npx @tavus/cvi-ui@latest add tavus-api-vite-ssr
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
That installs `lib/tavus-api-vite-ssr.ts` exporting `handleTavusRequest(request: Request): Promise<Response>` — wire it into your middleware. The file header has examples for Hono, h3/Vinxi, and Express + a Web Fetch adapter. The matching `lib/tavus-client.ts` is installed alongside, so once you mount the handler at `POST /api/tavus`, the existing browser code Just Works.
|
|
110
|
+
|
|
111
|
+
> **No client-only mode.** We deliberately do not ship a browser-direct client. Calling Tavus directly from the browser would put your API key in the bundle, which is unsafe in any deployed context.
|
|
112
|
+
|
|
60
113
|
## Documentation
|
|
61
114
|
|
|
62
115
|
- [CVI Documentation](https://docs.tavus.io/sections/conversational-video-interface/component-library/overview)
|