A talking avatar for your website or web app

1. 1

   Add a conversation

   The avatar needs something to say. On the web, bitHuman's managed agent runs the whole conversation for you.

   • The managed agent (the default)

     Your persona is the agent's system prompt; the conversation runs on bitHuman's servers.

     Persona →

   • Your own model, with no worker to run

     Point the agent at any OpenAI-compatible endpoint, or connect your own voice provider, through the Providers API.

     Providers →

   • A LiveKit web client for your own agent

     Build your own video UI and subscribe to a cloud-rendered avatar in your LiveKit room.

     LiveKit →

   With the web embed, the conversation runs on bitHuman's servers, even when the avatar renders in the tab.

2. 2

   Transparent background

   AI characters made on a plain green backdrop can stand right on your page. Turn it on with one line.

   The green around the character is removed in the visitor's browser as each frame arrives, so nothing extra is sent over the network. A character without a green backdrop keeps its normal frame.

   BitHumanGadget.init({ agentUrl, transparent: true })

   See Biscuit and Marmalade live →Transparent background in the docs →

3. 3

   Where it renders

   In the bitHuman cloud by default, or in the visitor's tab with WebGPU (render=local), with no fallback to the cloud.

   With the web embed, the conversation runs on bitHuman's servers, even when the avatar renders in the tab.

   Render in the visitor's tab (docs) →

4. 4

   React and Next.js

   There is no npm package: the embed is an iframe in any framework. For a floating avatar, one script tag adds the website widget to any page, Next.js included.

   export function Avatar({ code }) {
     return <iframe src={`https://www.bithuman.ai/embed/${code}`} allow="microphone *" style={{ width: "100%", height: 600, border: 0 }} title="Talking avatar" />;
   }

   Website widget, with a Next.js snippet (docs) →

Examples you can clone →