A live stream of the tools the assistant is calling, updating in real time as each one runs — across Brand, Neutral, and Outline styles.
Loading demo: tool-activity-feed-real-world
npx sdaia-ui@latest add tool-activity-feed
import { ToolActivityFeed } from "sdaia-ui"1<ToolActivityFeed2variant="brand"3state="live"4title="Agent Processing Feed"5count="3 Jobs Active"6items={[7{ type: 'code', title: 'tool::code_execution', status: 'Running...' },8{ type: 'web', title: 'tool::web_action', status: 'Awaiting pipe' },9]}10/>
A raised surface with a default border — the default style, shown in the live state.
Loading demo: tool-activity-feed-brand
A subtle surface with a subtle border.
Loading demo: tool-activity-feed-neutral
A transparent surface with a default border.
Loading demo: tool-activity-feed-outline
The completed state — a success tick replaces the live dot, the count turns neutral, and each row shows a result line plus a metric badge.
Loading demo: tool-activity-feed-completed
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
state | 'live' | 'completed' | 'live' | optional |
title | ReactNode | — | required |
items | ToolActivityFeedItem[] | — | required |
count | ReactNode | — | optional |
showCount | boolean | true | optional |
headerIcon | ReactNode | — | optional |
showMetrics | boolean | true | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |