Progress Steps
Progress steps is an AI UX pattern that surfaces an agent's intermediate work, thinking, tool calls, search steps, as a collapsible trace. Collapsed by default to keep the interface calm, it expands on demand so users who want provenance or debugging detail can inspect what happened without leaving the conversation thread.
When to use
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 not to use
- 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.
Anti-patterns
- 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. |
Use this pattern in your project
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:Real-world examples
How shipped products implement progress steps, from our teardown guides.
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.