Chronological stream of an AI agent's reasoning, searches, terminal work and tool execution.
import { GlobalIcon } from '@solar-icons/react/linear/global'
import { PenNewSquareIcon } from '@solar-icons/react/linear/pen-new-square'
import { ShieldCheckIcon } from '@solar-icons/react/linear/shield-check'
import { Widget4Icon } from '@solar-icons/react/linear/widget-4'
import AgentActivity from '@/components/ui/agent-activity'
export default function Demo() {
return (
<AgentActivity
className="w-full max-w-lg"
items={[
{
id: '1',
icon: <Widget4Icon />,
label: 'Inspected the component inventory',
status: 'complete',
},
{
id: '2',
icon: <GlobalIcon />,
label: 'Searched AI-focused registries',
detail: '576 directory items compared',
status: 'complete',
},
{
id: '3',
icon: <PenNewSquareIcon />,
label: 'Authoring approval and execution surfaces',
detail: '4 of 7 surfaces drafted',
status: 'running',
},
{
id: '4',
icon: <ShieldCheckIcon />,
label: 'Run production verification',
status: 'waiting',
},
]}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.