AgentProgress

AG-UI React Multi-step progress tracker for agent runs. Animated spinner, elapsed timers, ETA, error states. Zero external deps.

Light theme

Dark theme

Copy-paste snippet

// Controlled usage
import { AgentProgress } from './AgentProgress.jsx';

const steps = [
  { id: 'search', label: 'Searching knowledge base', status: 'done' },
  { id: 'reason', label: 'Reasoning over results',  status: 'running' },
  { id: 'write',  label: 'Writing response',          status: 'pending' },
];

return <AgentProgress steps={steps} startTime={Date.now()} theme="light" />;

// AG-UI auto-wiring
import { AgentProgressContainer } from './AgentProgress.jsx';
const bus = new EventTarget();

// Dispatch AG-UI events from your agent runtime:
bus.dispatchEvent(new CustomEvent('TOOL_CALL_START', {
  detail: { toolCallId: 'step-1', toolName: 'search_kb' }
}));
bus.dispatchEvent(new CustomEvent('TOOL_CALL_END', {
  detail: { toolCallId: 'step-1' }
}));

return <AgentProgressContainer eventSource={bus} theme="dark" />;