Use case · Chatbot avatar
A chatbot avatar that listens, thinks and talks.
Put a character next to your assistant that reacts to the conversation: it leans in while people type, ponders while the model works, and talks while the reply streams.
Free to start · ~8 KB player · No card
Try it
Type a message and watch it react.
This is the chatbot canvas running live: the same state machine you ship, driven by the demo chat on the left.
Yuzu
idleHi, I'm Yuzu. Ask me anything.
State graph · chatbot
now: idleWhy an avatar
The wait is where a chatbot feels broken.
Latency feels like thinking
A visible thinking state turns three seconds of silence into something that reads as effort, not a frozen widget.
Turn-taking you can see
Listening while people type and talking while tokens stream makes it obvious whose turn it is.
Personality without extra copy
A nod, a small celebrate when a task is done, a sad face on an error: tone carried by motion, not more words.
On-brand in every state
Every state poses the same rigged drawing, so the avatar never drifts off-model the way generated clips can.
Kilobytes, not video
Vector shapes drawn by a ~8 KB player instead of looping video files for every state.
Accessible by default
Respects reduced-motion settings, labels itself for screen readers, and sleeps when it scrolls out of view.
Wire it up
Four inputs, one element.
- 01
Make the character
Upload your brand mascot or describe one. Pick the chatbot canvas template.
- 02
Embed it
One script tag and a <lumorig-player> element, or the React component.
- 03
Set inputs
listening, thinking and talking from your chat events; fire greet when the widget opens.
- 04
Ship
The canvas handles transitions and blends. Update the character later and embeds pick it up.
const pip = document.querySelector("lumorig-player");
input.addEventListener("input", () => pip.setInput("listening", true));
chat.on("request", () => pip.setInput("thinking", true));
chat.on("token", () => pip.setInput("talking", true));
chat.on("done", () => pip.setInput("talking", false));Examples
Characters built for conversation.
- NovaHas zero judgment about your variable names.Pair-programming buddy for an AI code editorSee Nova move
- MothleyHas read every page of your docs, twice, by lamplight.Search helper for a knowledge base.See Mothley move
- HushA pocket cloud that breathes slower than you do, on purpose.Wind-down guide for a sleep and meditation app.See Hush move
FAQ
Chatbot avatar questions.
How does the avatar know what the chatbot is doing?
Your code tells it. The chatbot canvas has three inputs, listening, thinking and talking, plus a greet trigger. Set them from your chat events (input focus, request sent, tokens streaming, reply done) and the avatar blends between states on its own.
Does it work with my chat UI?
Any chat UI you control, in plain HTML or React: the avatar is a <lumorig-player> web component or a React component. If a third-party widget exposes events such as message sent or reply received, you can drive the avatar from those.
Will it slow the page down?
The player is ~8 KB gzipped and the character is a few KB of vector data, so it weighs less than one small image. Nothing animates while it isn't playing: the render loop stops when a clip ends or the element leaves the page.
What about people who prefer reduced motion?
Under prefers-reduced-motion nothing plays on its own; the avatar shows its first frame and only moves when someone clicks it. The SVG carries role="img" and the character's name as its label.
Can I use our existing brand character as the avatar?
Yes. Upload it and it is rebuilt as a rigged vector (120 credits), then the chatbot template works with it straight away. Or describe a new character in a sentence (80 credits).
What does it cost to run?
Nothing per conversation. Canvases, preset motions and the player are free on every plan; credits are only used when a character is created or given a custom motion. The free plan includes 200 credits a month.
Keep exploring
- AI agent mascot A mascot that shows what your AI agent is doing: working, waiting for you, done or failed.
- App mascot A guide character for onboarding, empty states and streaks that weighs kilobytes, not megabytes.
- Animate your mascot Upload the mascot you already have and get it back rigged, with 15 motions and custom animation.
- Player guide Attributes, methods, events and React usage for <lumorig-player>.
Give your assistant a face.
Drop in your mascot or start from a sentence, then pick the chatbot template.