Agent Progress

A collapsible progress block for multi-step AI work. It introduces steps with a soft stagger, advances the active task with synchronized circular progress, preserves progress while minimized, and exposes completion timing for handing the UI back to an agent response.

5 steps left
Read project files
Update light mode tokens
Implement dark mode tokens
Register the theme toggle
Run lint and production build

Installation

Agent Progress is part of BoardUI Pro.

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

Pro access

Agent Progress is a Pro component.

Your BoardUI Pro license unlocks this component and all of its source files. Activate your license once, then install it directly into your project with the CLI.

01

Activate your license

Use the key from your Lemon Squeezy purchase email. You only need to do this once per machine.

npx boardui@latest login YOUR_LICENSE_KEY
02

Install the component

The CLI copies the source and resolves every BoardUI and npm dependency for you.

npx boardui@latest add agent-progress

This component is included in BoardUI Pro

Get BoardUI Pro now and install it right away.

Custom steps

Pass any ordered list through steps. The block calculates its expanded height, countdown, active state, and overall progress from that list.

<AgentProgress steps={[ "Analyze the request", "Generate the component", "Run accessibility checks", "Prepare the response", ]}/>

Timing and completion

Set the time per task with stepDuration. After the final checkmark, completionDelay controls how long the completed state remains before onFinished fires.

<AgentProgress steps={steps} stepDuration={2400} completionDelay={1000} onFinished={() => { sendAgentResponse(); }}/>