AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Trust

Progress Steps

Surface intermediate work, thinking, and tool calls as a collapsible trace. Collapsed by default. Expand when someone wants provenance or a debug trail without leaving the thread.

Interactive demo

Review this project for brittle imports.
Thinking…

Overview

How might we design progress steps so people can trust and act on AI output?

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 to skip

  • 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.

Rules

  • 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.

Evidence

ProductImplementation
PerplexityCollapsible "Steps" trace shows search queries and sources visited during research.
ChatGPTReasoning and tool-call summaries collapse under a "Thought for Ns" toggle.
ClaudeExtended thinking renders as a collapsible block above the final response.
Cursor AgentTool calls and file reads appear as an expandable timeline during agent runs.

Real-world examples

See all

FAQ

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.