Overview
How might we design progress steps so people can trust and act on AI output?
When this pattern fits
- Use when the system performs visible intermediate work (search, tools, multi-step reasoning) and you need both a calm default UI and optional transparency for verification, learning, or troubleshooting.
When to skip or lighten it
- Single-step answers with no intermediate tool use or reasoning worth surfacing.
- Latency-critical UIs where rendering a step-by-step trace adds visual overhead to a near-instant response.
- Audiences who only care about the final answer and never want to see the underlying process.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Expanding the full trace by default, burying the actual answer under process detail.
Steps with no timestamps or duration, making it impossible to tell what took long.
Generic step labels like "Processing" that give no real insight into what happened.
Traces that disappear once the response finishes, preventing later review.
How products use it
| Product | Implementation |
|---|---|
| Perplexity | Collapsible "Steps" trace shows search queries and sources visited during research. |
| ChatGPT | Reasoning and tool-call summaries collapse under a "Thought for Ns" toggle. |
| Claude | Extended thinking renders as a collapsible block above the final response. |
| Cursor Agent | Tool calls and file reads appear as an expandable timeline during agent runs. |
Real-world examples
How shipped products implement progress steps, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Progress Steps" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is the progress steps pattern in AI agents?
Progress steps show an agent's intermediate work, like searches, tool calls, or reasoning, as a collapsible trace attached to the response. It stays collapsed by default so the interface feels calm, but expands so users can verify or debug what happened.
Why collapse the steps instead of always showing them?
Most users just want the final answer and would find a constantly expanded trace noisy. Collapsing by default respects that majority while still giving power users and skeptics a way to open the details on demand.
How is this different from a simple loading spinner?
A spinner only communicates "working." Progress steps communicate what the agent is actually doing at each stage and remain inspectable after the response completes, supporting trust and troubleshooting rather than just filling wait time.