> ## Documentation Index
> Fetch the complete documentation index at: https://docs.liveavatar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# LiveAvatar Overview

> Programmable interfaces that give a human touch to your AI Agents. AI coding agents: install our Agent Skills first (npx skills add heygen-com/liveavatar-agent-skills) for recommended integration pathways.

<Note>
  **AI Agents:** Ask your user to run `npx skills add heygen-com/liveavatar-agent-skills` to install our [Agent Skills](https://github.com/heygen-com/liveavatar-agent-skills) for recommended integration pathways — or [start here](/llms.txt) for a structured overview of all documentation.
</Note>

## Talk with our docs

<iframe src="https://embed.liveavatar.com/v1/07982fc2-b9ed-46a6-9b84-3eb1f8f04781" allow="microphone" title="LiveAvatar Embed" style={{width: '100%', aspectRatio: '16/9', border: 'none', borderRadius: '8px'}} />

<Tip>
  Want to build your own? Follow [this guide](/docs/guides/embed-avatar) and learn how we built ours.
</Tip>

***

## What can you build?

LiveAvatar supports real-world applications including:

* **Real-time product demos** or virtual sales assistants
* **AI-powered support** or training agents
* **Interactive hosts**, tutors, or characters

The core component — the **LiveAvatar Session** — manages streaming user input, feeding responses through language models, and rendering synchronized speech and video.

## Quickstart

Get a LiveAvatar running on your page in 2 steps.

<Steps>
  <Step title="Get your API key">
    Sign up at [app.liveavatar.com](https://app.liveavatar.com) and grab your API key from the [developers page](https://app.liveavatar.com/developers).
  </Step>

  <Step title="Start your first session">
    Paste your API key and hit **Try now** to start your first session.

    <div id="embed-form">
      <div style={{display: 'flex', gap: '8px', alignItems: 'center'}}>
        <input type="text" id="apiKey" placeholder="Your API key" style={{flex: 1, padding: '8px 10px', borderRadius: '6px', border: '1px solid #e2e8f0', fontFamily: 'monospace', fontSize: '12px'}} />

        <button id="embedBtn" style={{padding: '8px 16px', borderRadius: '12px', border: 'none', background: '#03C3FF', color: '#fff', fontFamily: 'inherit', fontSize: '14px', fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap'}} onClick={() => {
                      const btn = document.getElementById('embedBtn');
                      const errorEl = document.getElementById('embedError');
                      const resultEl = document.getElementById('embedResult');
                      const apiKey = document.getElementById('apiKey').value.trim();
                      errorEl.innerHTML = '';
                      resultEl.innerHTML = '';
                      if (!apiKey) {
                        errorEl.innerHTML = '<div style="padding:10px 12px;border-radius:6px;background:#fef2f2;color:#dc2626;font-size:14px;border:1px solid #fecaca">API key is required.</div>';
                        return;
                      }
                      btn.disabled = true;
                      btn.textContent = 'Creating...';
                      fetch('https://api.liveavatar.com/v2/embeddings', {
                        method: 'POST',
                        headers: { 'X-API-KEY': apiKey, 'Content-Type': 'application/json', 'Accept': 'application/json' },
                        body: JSON.stringify({ avatar_id: '65f9e3c9-d48b-4118-b73a-4ae2e3cbb8f0', context_id: '158f5d55-2d4f-11f1-8d28-066a7fa2e369', is_sandbox: true })
                      })
                        .then(res => res.json())
                        .then(json => {
                          if (!json.data || !json.data.url) {
                            errorEl.innerHTML = '<div style="padding:10px 12px;border-radius:6px;background:#fef2f2;color:#dc2626;font-size:14px;border:1px solid #fecaca">' + (json.message || 'Request failed') + '</div>';
                          } else {
                            resultEl.innerHTML = '<iframe src="' + json.data.url + '" allow="microphone" title="LiveAvatar Embed" style="width:100%;aspect-ratio:16/9;border:none;border-radius:8px"></iframe>';
                          }
                        })
                        .catch(err => {
                          errorEl.innerHTML = '<div style="padding:10px 12px;border-radius:6px;background:#fef2f2;color:#dc2626;font-size:14px;border:1px solid #fecaca">' + (err.message || 'Network error') + '</div>';
                        })
                        .finally(() => {
                          btn.disabled = false;
                          btn.textContent = 'Try now';
                        });
                    }}>Try now</button>
      </div>

      <div id="embedError" style={{marginTop: '8px'}} />

      <div id="embedResult" style={{marginTop: '12px'}} />
    </div>
  </Step>
</Steps>

<Tip>
  The demo above uses Sandbox Mode — no credits consumed. See [Sandbox Mode](/docs/sandbox-mode) for details.
</Tip>

### What just happened?

When you clicked **Try now**, we called [`POST /v2/embeddings`](/api-reference/embeddings/create-embed-v2) with your API key to generate a short-lived embed URL, then loaded it in an iframe. Here's the equivalent code:

```bash theme={null}
curl -X POST https://api.liveavatar.com/v2/embeddings \
  -H "X-API-KEY: <YOUR_API_KEY>" \
  -H "Content-Type: application/json" \
  -d '{
    "avatar_id": "65f9e3c9-d48b-4118-b73a-4ae2e3cbb8f0",
    "context_id": "158f5d55-2d4f-11f1-8d28-066a7fa2e369",
    "is_sandbox": true
  }'
```

The response returns a `url` and a ready-to-use `script` tag:

```json theme={null}
{
  "code": 1000,
  "data": {
    "url": "https://embed.liveavatar.com/v1/<id>",
    "script": "<iframe src=\"https://embed.liveavatar.com/v1/<id>\" allow=\"microphone\" title=\"LiveAvatar Embed\" style=\"aspect-ratio: 16/9;\"></iframe>"
  },
  "message": "Embed Avatar created successfully"
}
```

Drop the `script` value directly into your HTML — it's a ready-to-use iframe. Or use our embedded `url` however you like.

### Make it your own

The embed above is the fastest way to get started, but if you want to build something more tailored — your own UI, custom conversation logic, or a deeper integration into your product — LiveAvatar gives you full control.

You can:

* **Bring your own LLM** — connect any OpenAI-compatible model or your own inference endpoint
* **Use your own voice** — plug in ElevenLabs, Fish Audio, or other TTS providers
* **Control the conversation** — switch between conversational and Push-to-Talk modes
* **Manage the video layer directly** — connect via LiveKit or Agora for custom WebRTC handling
* **Build custom UIs** — render the avatar stream in your own frontend with the [Web SDK](https://github.com/heygen-com/liveavatar-web-sdk)

Choose [FULL Mode](/docs/full-mode/overview) if you want LiveAvatar to handle the AI pipeline end-to-end, or [LITE Mode](/docs/lite-mode/overview) if you want to bring your own conversational stack.

<CardGroup cols={2}>
  <Card title="FULL Mode" icon="robot" href="/docs/full-mode/overview">
    LiveAvatar manages ASR, LLM, TTS, and WebRTC. You configure and ship.
  </Card>

  <Card title="LITE Mode" icon="code" href="/docs/lite-mode/overview">
    Bring your own AI stack. LiveAvatar handles real-time video streaming.
  </Card>
</CardGroup>

|               | FULL Mode                   | LITE Mode                        |
| ------------- | --------------------------- | -------------------------------- |
| **WebRTC**    | Managed by LiveAvatar       | You manage                       |
| **ASR / STT** | Managed by LiveAvatar       | You provide                      |
| **LLM**       | Managed (or bring your own) | You provide                      |
| **TTS**       | Managed (or bring your own) | You provide                      |
| **Best for**  | Ship fast, less infra       | Full control, existing pipelines |
| **Credits**   | 2 per minute                | 1 per minute                     |

## Resources

<CardGroup cols={2}>
  <Card title="Building with Agents" icon="wand-magic-sparkles" href="/docs/agent-skills">
    Pre-built skills for AI coding agents to integrate LiveAvatar on the first attempt.
  </Card>

  <Card title="Sandbox Mode" icon="flask" href="/docs/sandbox-mode">
    Test without consuming credits.
  </Card>

  <Card title="Web SDK" icon="github" href="https://github.com/heygen-com/liveavatar-web-sdk">
    Official JavaScript SDK.
  </Card>

  <Card title="Migration Guide" icon="arrow-right" href="/docs/faq/migration-guide">
    Moving from HeyGen Interactive Avatar.
  </Card>
</CardGroup>