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

> Source: <https://dev.to/cxartlab/i-built-an-avatar-component-for-a-grok-bot-like-ai-app-then-realized-it-could-also-work-as-a-4l46>
> Published: 2026-09-09 14:30:00+00:00

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](https://cx-artlab.github.io/agent-robot-avatar/?lang=en)

GitHub:

[https://github.com/CX-ArtLab/agent-robot-avatar](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.