Agent Activity
One activity stream for reasoning, searches, tool calls and traces, led by a dotted thought orb whose motion follows what the agent is doing.
Thinking…0s
Install
Steps for Next.js.
Install the package
One package carries every component, the beUI base they build on, and the effect libraries.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | AgentActivityItem[] | — | Chronological entries: step, text, search, tool or trace. Append or update as events stream. A search result's url becomes a link only if it is http(s) or relative; any other scheme, mailto included, renders as plain text. |
| status | "working" | "complete" | "working" | Run phase. Working runs stay expanded and animate the orb. |
| contentType | "step" | "text" | "search" | "tool" | "trace" | "mixed" | — | Expected kind before the first item arrives. |
| orbSize | 20 | 32 | 64 | 20 | 20 sits inline in the status row; 32 and 64 stand beside the stream like an avatar. |
| orbState | OrbState | — | Pins the orb animation. By default it follows the newest item. |
| showElapsed | boolean | true | Shows a running timer next to the label while working. |
| duration | number | — | Seconds reported in the summary. Defaults to the time spent working. |
| activeLabel | ReactNode | — | Label while working. Derived from the item types by default. |
| summary | ReactNode | — | Completed summary. Derived from the item types by default. |
| open / defaultOpen | boolean | false | Controlled or initial expanded state after completion. |
| onOpenChange | (open: boolean) => void | — | Called when the completed disclosure is toggled. |
| collapseOnComplete | boolean | true | Collapses the stream when status becomes complete. |
| maxHeight | number | 208 | Visible height before the stream starts gliding. |