Small details. More human software.

What it feels like to build with agentmascots, from picking a character to mapping your agent's state.

Four states, one prop

Idle, thinking, celebrating, sleeping. Map your agent's lifecycle to a single state value.

Real source, not a runtime

Each pack is a typed .tsx file plus animated SVGs. No SDK, no dependencies beyond React.

Feels alive, stays light

CSS-driven motion with reduced-motion support baked in. No heavy runtime.

Keyboard-first browsing

Press ⌘K anywhere to jump to a character, page, or save to your collection.

Shortlist your crew

Save favorites to a browser-local collection before you buy.

Customize before you pay

The Studio is free to play with. You only pay when you export your version.

Developer experience

From “it works” to “it’s alive.”

Designed to drop into the components you already have. One import, one prop, and your agent's status gets a personality.

1
Find a mascot
Browse the marketplace and pick the one that fits.
2
Make it yours
Tune colors, eyes, expression, accessories, and speed in the Studio.
3
Ship it
Drop the .tsx into your app and map state to your agent's lifecycle.

agent-status.tsx

import { SpaceMascot } from "agentmascots/space";

type AgentStatus = "idle" | "planning" | "running" | "replying" | "done" | "away";

export function AgentStatus({ status }: { status: AgentStatus }) {
  const state = {
    idle: "idle",
    planning: "thinking",
    running: "working",
    replying: "speaking",
    done: "celebrating",
    away: "sleeping",
  } as const;
  return <SpaceMascot character="luna" state={state[status]} size={96} />;
}