Overview
How might we let people audit an answer’s reasoning without turning every reply into a wall of text?
When the reasoning itself carries decision value
- 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 steps add noise without an audit need
- 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.
Working
The assistant works through the problem. Nothing is shown yet beyond a brief in-progress cue.
Collapsed
Reasoning finishes and condenses into a compact control with a step count. It stays closed by default.
Expanded
The person opens the disclosure. Numbered steps appear in the order the assistant used them.
Answered
The final answer renders below the disclosure and stays visible whether the panel is open or closed.
Reviewed
The person scans the steps to spot check the logic before acting on the number or claim.
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.
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.
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.
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.
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.
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.
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.
Anti-patterns to avoid
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.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | Thought / Activity surfaces for deeper runs without crowding the main answer. |
| Claude | Extended thinking and tool traces can be inspected for agentic or hard tasks. |
| Gemini | Shows planning or research steps on complex queries alongside the answer. |
| Cursor / coding agents | Exposes plan and file/tool steps so developers can follow agent work. |
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 "Chain of Thought" AI interface design pattern.
Pattern Definition:Frequently asked questions
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.