I’m working on a small AI project that’s somewhat similar in spirit to Grok Bot. One of the first things I needed was a character/avatar, so I started there.
After spending more time on the avatar than I expected, I realized it didn’t really need to stay tied to that project.
So I pulled it out and turned it into Agent Robot Avatar, a standalone open-source component.
The component itself is pretty simple: vanilla JavaScript + SVG, wrapped as a native Web Component. No runtime dependencies.
You can drop it into a page:
<agent-robot-avatar id="avatar"></agent-robot-avatar>
and control it from your app:
avatar.play('waiting');
avatar.play('success');
avatar.play('failure');
There are also states for things like warning, inspect, blocked, error, sleep and wake.
I wanted the avatar to handle only the visual side. It doesn’t know anything about your LLM, prompts, agent framework or backend.
So whether you’re using OpenAI, Claude, Gemini, a local model, or something completely different doesn’t really matter.
There are also a few interactions that aren’t controlled by the app: blinking, pointer following, small head movements, idle behavior, and a jelly-like deformation when you drag the head around.
I kept it dependency-free partly because this is such a small UI element. Pulling in an animation framework just to make a little robot react to things felt unnecessary.
Right now I can imagine using it for AI assistants, agent interfaces, desktop companions, or small AI pets.
Demo:
https://cx-artlab.github.io/agent-robot-avatar/?lang=en
GitHub:
https://github.com/CX-ArtLab/agent-robot-avatar
It’s MIT licensed and also on npm:
npm install agent-robot-avatar
I’m still working on the original AI project, and I’m thinking about turning this avatar into a little AI pet next.
If you have other weird or fun ideas for what it could be used for, let me know.