Real-time 3D AI Avatar Examples

Runnable examples showing how to embed a 3D AI avatar into your app in minutes.

Demo avatar included — no account needed to see it in action. Voice and AI are disabled on the demo avatar. Load your own avatar ID to enable full conversation.

---

🚀 Try with your own avatar

Sign up free at dashboard.avatarium.ai → create your avatar → copy your Avatar ID → paste it into any example below.

---

Quick start

Example	Framework	Command
embed/	Widget embed (2 lines of HTML)	open embed/index.html
js/	JS SDK (no framework)	cd js && npm run dev
react/	React + Vite	cd react && npm install && npm run dev
nextjs/	Next.js	cd nextjs && npm install && npm run dev
vue/	Vue 3 + Vite	cd vue && npm install && npm run dev
react-native/	Expo	cd react-native && npx expo start

---

Enable voice & AI conversation

The demo avatar is silent by design. To unlock live voice conversation:

1. Sign up at dashboard.avatarium.ai
2. Create an avatar and configure:
   • AI provider — OpenAI, Anthropic, Google, or xAI (generates responses)
   • TTS provider — choose your voice quality tier:
     • Basic voice
     • Standard voice
     • ElevenLabs — Premium
3. Copy your Avatar ID from the dashboard
4. Paste it into the "Your Avatar ID" field and hit Load

Your avatar will load with full voice conversation enabled. The microphone button activates automatically.

---

SDK packages

Package	Install	For
@avatarium/react	npm i @avatarium/react	React, Next.js
@avatarium/react-native	npm i @avatarium/react-native	React Native / Expo
@avatarium/js	npm i @avatarium/js	Vue, Vanilla JS, any framework

---

What these examples cover

• Embedding a 3D avatar in a 16:9 panel
• Loading any avatar by ID at runtime
• Sending text to speak via the SDK (avatar.speak())
• Controlling playback (stop, volume)
• Reacting to avatar state changes (ready, speaking, idle)
• Demo mode — silent avatar with CTA to create your own

---

Links

• Dashboard — dashboard.avatarium.ai
• Docs — docs.avatarium.ai
• Website — avatarium.ai