bitHuman

Developers · Web

A talking avatar for your website or web app

Paste an iframe or load the floating widget. bitHuman's managed agent runs the conversation with your persona, and with your own language model or voice keys if you want them, so there is no voice server to run.

From 12 October 2026, API and SDK use requires the Creator plan or higher.

First frame in the docsWebsite widget

Install

Install

One iframe
<iframe src="https://www.bithuman.ai/embed/A23WJF0199" allow="microphone *" style="width:100%;height:600px;border:0"></iframe>

What you need: nothing (from the docs)

Your first frame, step by step The full Web guide

Conversation

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.

Where it renders

In the bitHuman cloud by default, or in the visitor's tab with WebGPU (render=local), falling back to cloud rendering when the browser has no usable GPU.

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)

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.

React
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)

Requirements

Requirements

  • HTTPS (or localhost) and allow="microphone *" on the iframe, or the browser blocks the microphone.
  • The page that holds the iframe must not send Cross-Origin-Embedder-Policy.
  • A private agent needs an embed token minted on your server; a public agent needs no credential.

Performance

Measured on real hardware

Every configuration we publish for this platform renders faster than real time.
Seconds of avatar video rendered per second, Web
DeviceEssence 2Expression 2
Web browser (WebGPU)Chrome on Apple M41.72× real time2026-09-271.95× real time2026-09-27
Web browser (WebGPU) · held 10 minChrome on Apple M42.16× real time2026-09-272.05× real time2026-09-25
“× real time” is seconds of avatar video rendered per second of wall-clock time: end-to-end audio in to frame out, one session, unpaced; the slowest of three quiet runs at least ten minutes apart on the published release. Read from docs performance.json (generated 2026-09-27). How we measure →

Pricing

What it costs

What it costs to run an avatar in your app
ItemOn the device (Essence 2, Expression 2)bitHuman cloud avatarManaged voice chat (all-inclusive)
Credits per minute of active session time2410
At top-up rates ($1 = 100 credits)about $0.02about $0.04about $0.10

From 12 October 2026, API and SDK use requires the Creator plan or higher.

Rates from GET https://api.bithuman.ai/v1/pricing, as published on docs.bithuman.ai/pricing.

The full table, with a worked example Budget an app (docs)

Examples

Examples you can clone

  • Screenshot coming

    Next.js

    A browser front end for an avatar agent in a LiveKit room.

    Runs on
    Web
    Conversation
    Yes, through the agent in the room
    Needs
    LiveKit and an avatar agent (which needs an API secret)

    integrations/nextjs-ui

  • Screenshot coming

    Gradio web demo

    Talk to an avatar in the browser through a Gradio page.

    Runs on
    Web (Python)
    Conversation
    Yes
    Needs
    API secret, an OpenAI key

    integrations/gradio-web

All examples

Checklist

Before you ship

A public agent needs no credential in the page. A private agent needs an embed token that your server mints with your API secret, so the secret never reaches the browser. Embed tokens (docs) →

The full checklist

Limits

Not available on this platform

  • An npm package: the embed is an iframe, or one script tag for the widget, in any framework.
  • Offline operation: the web embed needs a connection throughout.

More

Other platforms