AI Tool-Call Cards in Chat
Problem statement
Modern agent UIs don't only stream text. Mid-reply, the model emits a tool call — search, run code, fetch a doc — and the chat has to render that as a first-class card with lifecycle states, then continue streaming text after the tool resolves. ChatGPT, Claude, and Cursor all do a version of this.
Build a chat where a single assistant message is a heterogeneous parts list: text segments and tool cards interleaved. Each tool card moves pending → running → done|error, supports expand/collapse for args and results, and freezes cleanly when the user hits Stop.
The architectural tell: if you store the assistant reply as one string, you lose. Model the message as an event list from the start.
Requirements & constraints
- Assistant messages are a list of parts: text and tool cards interleaved
- Tool cards show pending → running → done and error states
- Expand/collapse reveals args and result/error JSON without breaking the stream
- Stop cancels the in-flight simulation and freezes cards mid-state
- Text streams before the tool and continues after the tool completes (or errors)
- Send becomes Stop while streaming; empty input cannot send
- Mock only — no real LLM network calls; include a way to demo the error path
How to approach AI Tool-Call Cards in Chat
The strategy an interviewer expects you to reach for.
How I'd Think About This Problem String-shaped messages are a junior trap. The moment a tool call appears mid-stream, you need a structure that can hold non-text events. I model an assistant message as parts: Array<TextPart | ToolPart> and render a switch on part.type. Before coding I draw the timeline on the whiteboard: text → tool card → text. Each segment is appended or patched by id. Cancellation is cooperative: the async loop checks a ref between awaits and exits without inventing fake completions.
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.