AI
Agent steps
Show an agent’s work as it happens: pending steps wait in outline, the running one spins and shimmers, finished ones pop a check and fill the thread of light to the next.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { AgentSteps } from '@vizzele/react';
<AgentSteps
aria-label="Agent progress"
steps={[
{ label: 'Read the brief', detail: 'brief.md', status: 'done' },
{ label: 'Search the codebase', detail: 'grep · 14 files', status: 'running' },
{ label: 'Write the component', status: 'pending' },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | AgentStep[] | — | { id?, label, detail?, status: 'pending' | 'running' | 'done' | 'error' } |
Accessibility
- An ordered list; each step ends with its status in text ("done", "in progress"…).
- Wrap it in a live region or pair it with <Agent> if updates should be announced.