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

Trust

Chain of Thought

Show the intermediate plan, tool steps, or expandable Thought / Activity trail so people can see how the answer was made. It is rarely raw model tokens. It is an audit trail for trust, debugging, and teaching.

Interactive demo

A store marks up a $40 jacket by 25%, then takes 20% off during a flash sale. What does it cost now?

It's $40, the same as before the sale. A 20% discount only offsets a 25% markup when it lands on the marked-up price, which is what happens here.

Overview

How might we let people audit an answer’s reasoning without turning every reply into a wall of text?

When to use

  • Math, logic, and multi-step problems where the path to the answer matters as much as the result.
  • Agentic or coding tasks where people need to follow tool calls and intermediate decisions.
  • High-stakes or regulated work where an audit trail helps people verify before they act.
  • Educational tools where seeing the steps is the point, not just the final number.

When to skip

  • Casual Q&A where showing reasoning adds noise and latency for no decision value.
  • Regulated domains where incorrect step narratives create liability even when the final answer is fine.
  • Cases where the model’s “thoughts” are unreliable after-the-fact stories rather than true traces.

States

Design the disclosure lifecycle, not only a static thinking block parked under every answer.

  1. 01

    Working

    The assistant works through the problem. Nothing is shown yet beyond a brief in-progress cue.

  2. 02

    Collapsed

    Reasoning finishes and condenses into a compact control with a step count. It stays closed by default.

  3. 03

    Expanded

    The person opens the disclosure. Numbered steps appear in the order the assistant used them.

  4. 04

    Answered

    The final answer renders below the disclosure and stays visible whether the panel is open or closed.

  5. 05

    Reviewed

    The person scans the steps to spot check the logic before acting on the number or claim.

  6. 06

    Re-collapsed

    Closing the panel keeps the thread scannable. The steps remain available if anyone needs them again.

Key UX elements

The parts that must be present for step-by-step reasoning to build trust instead of clutter.

Trigger

Show reasoning only when it earns its place.

Turn on the disclosure for multi-step math, agentic runs, or high-stakes claims. Skip it for a one-line answer to a simple question.

Disclosure

Collapse the reasoning behind a named control.

A compact Reasoning row with a step count beats an open block of thinking text under every reply.

Steps

Number the intermediate steps in order.

Each step should read as one discrete move, a calculation, a lookup, a decision, not a paragraph of prose.

Answer

Keep the final answer separate and always visible.

The answer should stand on its own whether the reasoning panel is open or closed, not depend on someone expanding it first.

Collapse

Let people close the panel again.

Reasoning is a reference, not a permanent fixture. Collapsing it back keeps the thread scannable once someone has checked the steps.

Progressive

Match depth to the task, not the model.

A one-line summary suits simple lookups. Full numbered steps suit math, planning, or tool use. Avoid full traces on every reply by default.

Rules

  • Dumping wall-of-text “thinking” with no collapse or summary.

  • Presenting fabricated step-by-step justifications as factual audit trails.

  • Hiding tool calls users need while showing only decorative CoT prose.

  • Forcing CoT open by default on every message in a dense chat.

Evidence

ProductImplementation
ChatGPTThought / Activity surfaces for deeper runs without crowding the main answer.
ClaudeExtended thinking and tool traces can be inspected for agentic or hard tasks.
GeminiShows planning or research steps on complex queries alongside the answer.
Cursor / coding agentsExposes plan and file/tool steps so developers can follow agent work.

FAQ

What is chain-of-thought UX in AI products?

Chain-of-thought UX means showing selected intermediate reasoning, plans, or tool steps so users can understand how the answer was produced, usually behind an expandable Thought or Activity control rather than as the only answer.

Should every AI reply show its reasoning?

No. Show reasoning for complex, high-stakes, or agentic tasks where users need an audit trail. Keep it collapsed or off for simple answers to avoid cognitive and visual load.

Is visible CoT the same as the model’s hidden chain of thought?

Not always. Product CoT is a designed disclosure of plans, tools, or summaries. Model-internal tokens may differ and can be incomplete or stylized, so treat UI reasoning as an aid, not a legal proof.