I ended up spending more time on the avatar than I expected. Somewhere along the way I realized it didn’t really need to stay tied to the original project.

So I pulled it out and turned it into Agent Robot Avatar, a standalone open-source Web Component.

The basic idea is simple: the avatar handles the visual side, while the app decides what the AI is actually doing.

It’s built with vanilla JavaScript + SVG and wrapped as a native Web Component. There are no runtime dependencies.

Using it can be as simple as:

<agent-robot-avatar id="avatar"></agent-robot-avatar>

Then the app can control its state:

avatar.play('waiting');
avatar.play('success');
avatar.play('failure');

There are also states for things like warning, inspect, blocked, error, sleep and wake.

The avatar itself also has some behaviors that don’t need to be triggered manually. It blinks, looks toward the pointer, has a bit of head inertia, does occasional idle movements, and reacts with a jelly-like deformation when dragged.

Keeping the AI part separate

One thing I wanted from the beginning was to keep the actual AI completely outside the component.

The avatar doesn’t know anything about your LLM, prompts, backend or agent framework. It just receives a state and reacts visually.

So it doesn’t really matter whether the app behind it is using OpenAI, Claude, Gemini, a local model, or something else.

That separation also makes the component useful outside the original project.

I can imagine it being used for AI assistants, agent interfaces, desktop companions, small AI pets, or probably some things I haven’t thought of yet.

Why no dependencies?

Mostly because it’s a small UI component.

Pulling in an animation framework just to make a little robot blink, move its head and react to state changes felt unnecessary.

So I kept it to vanilla JavaScript, SVG and the native Web Component API.

That also means it can be dropped into different kinds of projects without requiring React, Vue or another framework around it.

Try it

Live 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 available on npm:

npm install agent-robot-avatar

I’m still working on the original AI project, and I’m also thinking about turning this avatar into a little AI pet next.

If you have other interesting or slightly weird ideas for what it could be used for, let me know.