AI Agent Trace Renderer
Problem statement
Modern AI agents — Claude, ChatGPT, Devin, browser-use — produce a stream of steps as they work: think, search, fetch, verify, write. Users want to see what the agent is doing and why. The trace UI is how the agent narrates itself, and it's quickly becoming the defining surface of agentic products.
Build a trace renderer that shows steps as they execute: each step has a status (pending → running → done/error), a tool name, an optional thinking note, structured input/output, and is collapsible. The currently-running step pulses, finished steps are static, and errors halt execution. Provide a Run button to start the agent and a Stop button while it's running.
The architectural insight is that this is a state machine over a sequence. You're not just rendering a list — you're advancing a pointer through it, with each step transitioning through statuses, and any cancellation has to be cooperative (the in-flight step finishes its current async wait before the loop bails). Doing this with raw async/await in React is a focus area.
Requirements & constraints
- Steps execute sequentially with visible status transitions
- Running step pulses; done steps are green; errored steps are red
- Each step is collapsible; auto-opens when it starts running
- Step body shows: thinking, input (pretty JSON), output (pretty JSON)
- Errors halt the run; remaining steps stay pending
- Stop button cancels mid-run cooperatively
- Run again resets state and re-runs from the top
How to approach AI Agent Trace Renderer
The strategy an interviewer expects you to reach for.
How I'd Think About This Problem The agent trace has become the defining UI of agentic products: Claude, ChatGPT agents, Devin, Cursor's agent mode, browser-use, OpenHands — all converged on the same shape. A vertical list of expandable steps. Each step shows what the agent is doing, why, and what came back. The trace is how the agent narrates itself — and that narration is the user's only window into a process that may take minutes and call dozens of tools. Build this poorly and your product feels like a black box. Build it well and users trust the agent enough to let it work autonomously. The clarifying question I'd ask before writing code: is this a sequence or a graph? A pure sequence (one step at a time, no branching) is what you draw on a whiteboard.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.