How to Add a Realtime Avatar to an ElevenLabs ElevenAgent

If you already have an ElevenLabs ElevenAgent, you do not need to rebuild it to add a face. Keep ElevenLabs handling the realtime conversation, voice, prompts, tools and knowledge. Liforma can take the agent's generated audio and turn it into a realtime animated character with lip-sync, appearance, backdrop and the wider Liforma Experience layer.

Can you add an avatar to an ElevenLabs voice agent?

Yes. Liforma provides a dedicated ElevenLabs bridge: connectElevenLabsAgent() from @liforma/client/elevenlabs. It connects an existing ElevenAgent to a Liforma Experience without replacing the ElevenLabs agent.

This is useful if you already chose ElevenLabs because of its voices, agent tooling or existing production setup and simply want to put a visual character on top of it.

What stays in ElevenLabs?

• speech input and turn handling;
• your ElevenAgent configuration;
• LLM / reasoning configuration;
• system prompts and conversation rules;
• knowledge and tools;
• ElevenLabs voice generation; and
• the conversational audio stream.

What does Liforma add?

• the visual character;
• realtime speech-to-animation and lip-sync;
• character appearance, hair and costumes;
• backdrops and scenes;
• browser-native avatar playback;
• multi-character / multi-scene Experience features if you need them; and
• the ability to embed the resulting character experience in a website or application.

Minimal ElevenLabs + Liforma integration

Install the Liforma and ElevenLabs clients:

npm install @liforma/client @elevenlabs/client

Once your Liforma Experience has started, connect the existing ElevenAgent:

import { connectElevenLabsAgent } from '@liforma/client/elevenlabs';

const bridge = await connectElevenLabsAgent(experience, {
  signedUrl
});

// Later:
await bridge.end();

The Liforma helper receives the ElevenLabs agent audio, determines the configured PCM output format, streams it into the active Liforma utterance and forwards transcript information for improved lip-sync. It also maps interruption events so avatar playback stops when the user barges in.

See the complete ElevenLabs → Liforma implementation guide.

Use a signed URL in production

Do not put an ElevenLabs API key in a production browser. Mint the ElevenLabs signed URL on your server and pass that short-lived URL to the browser integration.

const signedUrl = await fetch('/api/elevenlabs-signed-url', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ agentId: 'YOUR_AGENT_ID' })
}).then((r) => r.json()).then((x) => x.signedUrl);

const bridge = await connectElevenLabsAgent(experience, {
  signedUrl
});

Why keep ElevenLabs as the speech-to-speech brain?

ElevenLabs is often chosen specifically for voice quality and expressive speech. If that is already working for your application, there is little value in replacing the entire conversational stack just because you now want an avatar.

This is the Liforma Motion model: your existing voice agent remains authoritative and Liforma becomes the visual layer.

It is particularly attractive when you have an existing production ElevenAgent, cloned or carefully chosen voices, provider credits, established tools or prompts, or simply want the most expressive voice ElevenLabs can provide.

How is this different from ElevenLabs' HeyGen LiveAvatar integration?

ElevenLabs also documents an integration with HeyGen LiveAvatar. In that configuration ElevenLabs handles the conversational audio while HeyGen renders a realtime photorealistic video avatar.

Liforma solves the same high-level problem — adding a visual character to an ElevenAgent — but with a different visual and product architecture. Liforma is designed around browser-native interactive characters and complete Experiences, including scenes, state, reusable appearances and multi-character experiences.

If your main requirement is a photorealistic video-call-style digital human, compare both approaches. If you want the avatar to become part of a larger interactive character experience, Liforma's model is deliberately broader.

See ElevenLabs' LiveAvatar integration documentation for the alternative architecture.

What if my ElevenLabs Agent uses WebRTC?

The direct connectElevenLabsAgent() path is designed around the PCM audio emitted by the ElevenLabs client. When ElevenLabs is running over WebRTC, the agent audio arrives as a LiveKit remote media track instead.

In that case, bridge the remote track with Liforma's LiveKit integration. The voice still comes from ElevenLabs; Liforma simply consumes the audio track at the media layer.

See How to Add an Avatar to a LiveKit Agent.

Can I keep my existing ElevenLabs voice?

Yes. In this architecture Liforma does not synthesize the speech. Whatever voice ElevenLabs produces is the audio Liforma animates.

Does Liforma replace my ElevenLabs prompts, tools or knowledge?

No. Your ElevenAgent stays in control of the conversation. You can keep the existing prompts, knowledge, function calls and agent logic unchanged.

Does this work with interruptions?

Yes. The bridge maps ElevenLabs interruption events to Liforma so the active avatar utterance is cancelled when the user interrupts.

Is Liforma streaming another video?

No. The Liforma integration is not simply a second server-rendered talking-head video stream. Liforma uses the speech to drive the character and visual experience, which makes it possible to combine the avatar with scenes, state and other browser-native experience features.

When is this a good fit?

• you already have an ElevenLabs ElevenAgent in production;
• you want to keep ElevenLabs' voice quality;
• you want to add a face without rebuilding the conversational agent;
• you want a website character or visual assistant driven by ElevenLabs;
• you want a reusable character rather than only an audio interface; or
• you want ElevenLabs speech inside a larger Liforma Experience.