All Posts

Product

How to build a conversational video AI with a transparent background

Written by

Jack Virag

publish date

July 18, 2025

TABLE OF CONTENTS
Example H2

Creating an AI human that speaks directly to users is powerful. But creating one that can seamlessly blend into any product demo, presentation, or interface?

That’s next-level.

In this guide, we’ll show you how to build a conversational video AI with a transparent background using Tavus’s Conversational Video Interface (CVI) and our open-source example repo. This setup lets you overlay your replica anywhere—no video editing, no green screen studio, just clean, real-time compositing inside the browser.

Whether you're building product tours, interactive coaching overlays, or just want your AI human floating in a branded UI, this is the fastest way to bring it to life.

Why go transparent?

A replica on a green‑screen (chroma‑key) background lets you overlay your AI human on slides, product demos, or any branded scene without post‑production. The result feels more like a live newscast than a static video frame — perfect for coaching overlays, product walk‑throughs, or AR‑style widgets.

Prerequisites

Requirement Why you need it
Tavus API key Authenticate the Create‑Conversation request
Node ≥ 18 & npm Run the React example locally
Daily.co free account (optional) The repo uses Daily React hooks for quick WebRTC calling
Basic React/TypeScript comfort To tweak UI or shader parameters

Clone the official example

The README in the repo lists the same steps and includes a one‑click StackBlitz link if you prefer the cloud sandbox. GitHub

How the example works

Layer Key points
Conversation bootstrap createConversation() sends a POST /v2/conversations request with apply_greenscreen: true in properties. That flag tells Tavus to render your replica on a pure green background.
WebRTC The returned conversation_url is handed to Daily React hooks (useDaily, useParticipantIds, etc.) to join the call in real time.
Chroma key shader A lightweight WebGL fragment shader removes the green pixels in the remote video track and writes transparent alpha so you can overlay the canvas on anything.

Step‑by‑step guide

1. Add your API key

On first run the app prompts for a key. You can generate one in your Tavus dashboard → Settings → API Keys.‍

2. Start the dev server

3. Create the conversation

The UI calls:

The API returns conversation_url; Daily joins that room, and your replica appears against a solid key color. docs.tavus.ioGitHub

4. Chroma‑key the feed

The shader in src/App.tsx sets the key color to rgb(3,255,156) and a threshold of 0.3. Tweak these two uniforms to fine‑tune spill or match a different background hue.‍

5. Overlay the canvas

Because the WebGL canvas has premultipliedAlpha: false and the fragment shader writes transparent pixels, you can place it over any DOM element or background‑video.

Customising beyond the starter

Customisation How
Change persona or replica Pass your own persona_id / replica_id in the POST body.
Different key colour Edit the u_keyColor uniform in the fragment shader.
Higher video quality Call PATCH /conversations/:id with video_resolution or override Daily’s videoCodec.
Embed in production app Replace the local Vite app with