Developers

Agent status,
ready to build.

Thinking, loading, writing, searching, listening, and talking. Start with an included mark or bring your own artwork.

AgentEmblem is an MIT-licensed React library. It renders in your application with React and React DOM 18+. The library and public reference endpoints need no account, API key, or payment.

Start with a built-in mark

npm install agent-emblem

"use client";

import { AgentEmblemThinking } from "agent-emblem";

export function AssistantStatus() {
  return (
    <AgentEmblemThinking
      preset="spark"
      state="thinking"
      text="Thinking…"
      label="Assistant is thinking"
      size={24}
      color={{ light: "#18181b", dark: "#fafafa" }}
      animateVisibility
      animateMotion
    />
  );
}

Circle, square, spark, and cursor are included. Replace preset with source for SVG or PNG artwork. Both animation flags default to false in the library; enable them for animated state feedback. Your application controls the real activity and matching status text.

React guide · Connect an existing AI SDK chat · Markdown implementation guide

Configuration sandbox

Choose a mark and activity to generate a complete React component. Nothing is installed or uploaded. See the motion in the visual playground.

Public catalog API

These read-only HTTP endpoints expose the package's identity, supported inputs, and included artwork. They return static resources generated from the package source. Rendering and AI activity remain in your app; there is no hosted model or rendering API.

GET /api/manifest.jsonPackage version, installation, states, default marks, and documentation.
GET /api/presets.jsonAll four included marks as MIT-licensed SVG strings.
GET /api/configuration.schema.jsonJSON Schema for the snippet generator's accepted configuration.
GET /openapi.jsonOpenAPI 3.1 specification for these endpoints and the text references.

curl https://agent-emblem.vercel.app/api/manifest.json

No authorization header is required. Endpoints support GET; they have no write operations. Network clients should check the HTTP status before parsing a response and retry transient hosting failures with backoff. For npm integration, use the exported TypeScript declarations rather than treating the catalog as the entire component API.

Tools for coding agents

llms.txt is a small documentation map. llms-full.txt contains the full README and implementation guide. The npm package also includes docs/agent-guide.md.

In a browser with WebMCP available, this page and the homepage register two read-only tools:

agent_emblem_get_reference reads the package catalog, presets, guide, or API specification.
agent_emblem_create_snippet validates configuration and returns React code, without installing anything or changing the playground.

WebMCP is experimental and requires a supporting browser. The reference endpoints and sandbox work independently of it.

Choose the right integration

Use AgentEmblem for visible activity feedback in React: a thinking indicator, streamed writing, tool execution, a voice state, or an optional branded mark. It does not run agents, call language models, record or transcribe audio, measure completion percentages, or export animated SVG/video. AI SDK is optional; you can set state from any backend.

Agent status,ready to build.