Avatar Studio

Create a personalized robot avatar for your profile, team chat, app, or AI assistant. Avatar Studio combines a browser-based creator with a local MCP server so people and agents can generate avatars from the same accessory catalog.

Built on Agent Robot Avatar by CX ArtLab, using SVG and vanilla JavaScript. The website runs without a backend or account; the MCP server runs separately as a local Node.js subprocess.

Live creator · Documentation · Releases · Changelog · npm package

The documentation covers creator guides, npm integration, MCP setup, API controls, and visual use cases.

Glossy 3D preview

The creator includes an optional Glossy 3D style with rounded vinyl bodies, reflective materials, raised eyes, and the existing shape-fitting accessory catalog. Switch styles in the editor; colors, eye controls, and body shapes carry over. Expression buttons control the 3D face directly, including heart eyes, happy arcs, sleeping eyes, and error crosses. PNG captures the transparent 3D view; GIF records the selected expression with floating and blinking motion. SVG retains the original vector appearance.

This first version requires browser WebGL. Devices without it keep the SVG editor. Reduced-motion preferences stop the floating motion. Accessory outlines curve around the actual body surface, and headphone bands and cushions fit the silhouette. Individually sculpted accessories and full gesture parity are future work. The npm component and local MCP image tools continue to render the existing SVG style.

The creator loads its self-hosted Three.js renderer only when 3D is selected. For local development, npm run dev builds the renderer automatically; npm run build:glossy rebuilds it after changes. Three.js is MIT licensed; its license is included in the deployed bundle directory.

Glossy 3D examples

Eight animated examples rendered with the creator’s actual Glossy 3D renderer: reflective vinyl bodies, shape-fitting accessories, fluid silhouettes, and different expressions. Click an animation to open its GIF, or download its transparent PNG. These are browser renders; the npm component and MCP exports currently use the 2D SVG style below.

| | | | | | --- | --- | --- | --- | | Music lover<br><br>PNG | Botanical love<br><br>PNG | Royal surprise<br><br>PNG | Happy wizard<br><br>PNG | | Sleepy beanie<br><br>PNG | Curious fox<br><br>PNG | Bookworm<br><br>PNG | Party hearts<br><br>PNG |

Try Glossy 3D in the live creator. The glossy example manifest records each design, expression, and shape seed. To regenerate these assets from a local checkout, install the development dependencies and Playwright Chromium, then run node scripts/build-glossy-examples.mjs. For smaller GIF files with adaptive color palettes, run python3 scripts/optimize-glossy-examples.py afterward (requires Pillow).

Avatar examples

Try the live creator or use MCP to make your own. These 24 GIF examples were generated through the Avatar Studio MCP server, using different colors, accessories, expressions, classic and seeded fluid bodies, and profile badges. Each preview links to its downloadable GIF.

MCP GIFs use a deterministic blink cycle with a selected expression. Sleeping eyes stay closed. For full actions, cursor following, and gestures, embed the live npm component.

| | | | | | --- | --- | --- | --- | | Classic square<br> | Music lover<br> | Royal surprise<br> | Fluid fox<br> | | Wizard<br> | Botanical<br> | Sleepy beanie<br> | Cyber visor<br> | | Bookworm<br> | Party time<br> | Fluid bunny<br> | Cowboy<br> | | Chef<br> | Pirate<br> | Little angel<br> | Tiny trouble<br> | | Winter scarf<br> | Graduate<br> | Fluid bear<br> | Alien signal<br> | | Top hat<br> | Lightning hero<br> | Heart glasses<br> | Space goggles<br> |

SVG, PNG, and sprite examples

The same designs can be exported as transparent SVGs, profile PNGs, or sprite sheets with frame coordinates.

Classic SVG · Headphones SVG · Crown SVG · Fluid fox SVG · Wizard SVG · Flower SVG · Sleeping SVG · Visor SVG

Reproduce the GIFs using the exact create_avatar arguments in the example manifest. See sprite coordinates and configs for the PNG sheet. All assets are committed to this repository; no external image host is required.

Avatars in real applications

48 illustrated use cases, from account profiles to agent workflows. These are documentation mockups made with real avatar exports, not bundled integrations. Your application supplies messaging, presence, notifications, accounts, game logic, and state transitions. Platform support for animated profile images varies; use PNG when GIF is not supported.

Profiles and communities

| Example | How to use it | Tool or export | | --- | --- | --- | | User profile | Your own recognizable account picture. | create_avatar | | Team chat | Recognizable faces beside every message. | create_avatar_batch | | Comments and replies | Give authors a consistent identity. | generate_identity | | Community forum | Pseudonymous profiles without photo uploads. | generate_identity | | Team directory | Create a coordinated set of team avatars. | create_avatar_batch | | Notification sender | Distinguish people, bots, and app events. | create_avatar |

Assistants and support

| Example | How to use it | Tool or export | | --- | --- | --- | | Product copilot | Embed a companion beside useful suggestions. | create_avatar_component | | Support chat | Use a friendly identity for support agents. | create_avatar_component | | Command palette | Give your in-app assistant a face. | npm component | | Onboarding guide | Explain the next step with a character. | create_expression_pack | | Documentation guide | Add a recognizable guide to documentation. | npm component | | Browser extension | Fit a tiny helper into an extension popup. | npm component |

Presence and workflow states

| Example | How to use it | Tool or export | | --- | --- | --- | | No presence badge | Use the avatar without a state indicator. | create_avatar | | Online presence | Show an available person or assistant. | create_avatar | | Away or idle | Show a temporary absence with a badge. | create_avatar | | Busy or processing | Show an agent working on a request. | create_avatar | | Offline presence | Keep unavailable users visible in a roster. | create_avatar | | Success and error feedback | Map avatar expressions to app outcomes. | create_expression_pack |

Collaboration and work

![Collaboration and work: six avatar use cases](docs/use-cases/col