BoopFace: an MIT-licensed SVG robot avatar Web Component for AI agents
Hey everyone, about two months ago I shared an early black-and-white version of this component here (back when it was called agent-robot-avatar). I've kept iterating on it since then, gave it an official name (BoopFace) and built a website. Everything finally went live yesterday, so I wanted to share how it looks now.
If you haven't seen it before: it's an MIT-licensed native Web Component (<boop-face>), written in vanilla JS and SVG with zero runtime dependencies. When an LLM or Agent runs tool calls, you can directly call avatar.startWaiting(), avatar.play('wary'), or avatar.play('refuse') to turn states into expressions.
What's new since my last post:
- Expressions are now up to 18, plus press-and-hold squeeze and a draggable spring antenna (it gets angry after you pull it).
- 188 3D-style skins completed so far. Every skin is still drawn in pure SVG with pointer-following light, using no bitmap images at all. The lite build is only 45 KB, and even with all skin code included it stays under 200 KB, very lightweight.
One more thing:
BoopFace Embedded v0.1.0 for embedded devices also launched alongside it. This is still an early experimental release, a lightweight C++11 expression engine with the exact same eye expressions and timing as the web version. It supports ESP32, ESP32-S3, STM32, and Raspberry Pi Pico, with 28 board and display configs passing compilation. I also built an online embedded simulator where you can preview 32 screens, tune the settings, and export them directly for compiling.
- Website: https://boopface.com
- GitHub (MIT): https://github.com/CX-ArtLab/BoopFace
- Embedded simulator: https://boopface.com/hardware/
This is a completely free, MIT-licensed open-source project. It's free to use and also available on npm (npm install boopface).
I'm still improving it. My next plan is to make animated skins, which will probably take a ton of effort and time (but it's going to be really fun).
If anyone has other weird/fun ideas for what this could be used for, let me know!