I built an avatar component for a Grok Bot-like AI app, then realized it could also work as a standalone open-source project.

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.

Comments

[Svg/icons]

Have you considered prefers-reduced-motion plus a semantic state hook? The avatar can stay visual while waiting/error states remain accessible to assistive technology.