agentemblem

UI pattern

Build an animated
AI status row.

Pair a built-in mark or your own logo with clear status copy so people can see whether an agent is sending, thinking, researching, or writing.

No artwork is required: circle, square, spark, and cursor are included. For complete typed recipes and defaults, read the agent implementation guide.

The compact status-row pattern

Use a 20–24 pixel animated mark with short live copy: “Sending…”, “Thinking…”, “Searching the docs…”, or “Writing response…”.

"use client";

import { AgentEmblemThinking, type AgentEmblemState } from "agent-emblem";

export function AgentStatus({ logoSvg, state, text }: {
  logoSvg?: string;
  state: AgentEmblemState;
  text: string;
}) {
  return (
    <AgentEmblemThinking
      preset="circle"
      source={logoSvg}
      state={state}
      text={text}
      size={20}
      gap={8}
      animateVisibility
      animateMotion
      animateText
      label={`Assistant status: ${text}`}
    />
  );
}

Model the complete request sequence

1. Sending

Show loading immediately after submission so the interface acknowledges the action.

2. Thinking

Use thinking during reasoning or planning without displaying private reasoning text.

3. Researching

Use researching while tools, retrieval, or external sources are active.

4. Composing

Switch to composing when user-visible answer text begins streaming.

Keep motion accessible

AgentEmblem follows prefers-reduced-motion and pauses automatically. Keep the text visible so the status never depends on motion alone. Give the canvas a short accessible label and use a polite live region for changing copy.

Tune the mark for your interface

Set light and dark colors for contrast in both themes. At small sizes, use a simplified mark and test each particle shape. Secondary ink separates the moving region while keeping the full logo visible.

A solid baseline. Start with a 20px mark, an 8px gap, inherited UI type, visible status copy, and motion only while the agent is active.

Where this pattern works