Docs / Tool calls /
StreamingIndicator
Live indicator while the agent is generating — animated pulse with a label.
Preview
Thinking⠋Generating⠋48 tok/sCalling read_file⠋DoneWaiting⠋
Variants
Inline variant
⠋Thinking⠋Generating· 52 tok/s⠋Running web_searchDone⠋Waiting
Sizes
Generating⠋61 tok/sGenerating⠋61 tok/s
Cursor variant
The migration will add a non-null column to the sessions table with a default value so existing rows are backfilled safely
Props
| Prop | Type | Description |
|---|---|---|
| state | "thinking" | "streaming" | "tool" | "done" | "stalled" | Streaming state — controls the dot colour, animation, default label, and whether the braille loader or a check icon is shown. Defaults to "streaming". |
| label | string | Overrides the default state label (e.g. "Calling read_file"). |
| tokensPerSec | number | When provided, renders a "· N tok/s" annotation next to the label. |
| size | "sm" | "md" | Controls padding and font size of the pill variant. Defaults to "md". |
| variant | "pill" | "inline" | "cursor" | "pill" is a rounded badge; "inline" is borderless text with an icon; "cursor" is a blinking caret for insertion points. Defaults to "pill". |
| className | string | Extra classes for the outermost element. |
Usage
import { StreamingIndicator } from "@/components/agent/streaming-indicator";
// Pill (default) — suitable for status bars
<StreamingIndicator state="streaming" tokensPerSec={48} />
// Inline — sits naturally in a message list
<StreamingIndicator state="thinking" variant="inline" />
// Cursor — appended directly to streaming prose
<p>Generating response<StreamingIndicator state="streaming" variant="cursor" /></p>