Tool Use Trace Visualizer

See an LLM tool-use trace as a readable flow

Debugging an agent means reading deeply nested JSON: assistant messages, tool_calls with stringified arguments, and tool results scattered across the array. This tool parses an OpenAI or Anthropic tool-use conversation and lays it out as a numbered, color-coded flow — model message → tool call → tool result → next model message — so you can follow the loop at a glance. It runs entirely in your browser.

How it works

The parser walks the messages/content array and classifies each element:

• Model text — assistant content strings (or Anthropic text blocks).
• Tool call — OpenAI tool_calls[].function (name + JSON arguments) or Anthropic tool_use blocks. Arguments are pretty-printed.
• Tool result — OpenAI role: "tool" messages or Anthropic tool_result blocks, linked back to their call by tool_call_id / tool_use_id when present.

Each step is rendered as a card with a type badge, so the model↔tool handshake is obvious and you can immediately see a malformed argument or an unexpected result.

What agent traces reveal

Reading a raw tool-use log in JSON is painful because the structure interleaves very different kinds of information without visual separation. The visualizer makes several problems immediately obvious that would otherwise require careful line-by-line reading:

Argument errors: If the model passes a malformed value — a number where a string was expected, a missing required field, or a date in the wrong format — the visualizer shows the pretty-printed argument block inline. You can see at a glance that "date": 20240315 was not quoted correctly, rather than hunting through minified JSON for the token.

Result mismatch: The model’s next response after a tool result often reveals whether it understood the result correctly. If the model ignores the tool result or repeats the same tool call with the same arguments, the flow shows the pattern clearly: tool call → result → identical tool call → same result → …

Parallel tool calls: Agents sometimes fan out multiple tool calls in a single turn to gather information in parallel. The visualizer groups sibling calls from one turn together, so you can confirm the model dispatched the right set of tools and that all results came back before the final synthesis step.

Loop detection: A long trace where the same tool name appears in every other step is a strong signal that the agent is stuck. The numbered step list makes this visible without counting entries in an array.

Getting a trace to paste

OpenAI traces come from the messages array in your API call or the response object. The cleanest approach is to log JSON.stringify(messages, null, 2) after each turn in your agent loop. Anthropic traces are structured similarly — log the full messages array passed to the API plus the content from the response. Many agent frameworks (LangChain, LlamaIndex, Pydantic AI) also expose a verbose=True or callback mode that dumps the raw message array to the console.

Tips and notes

• Paste the full messages array for the richest view — request-only shows the calls, response-only shows the results, and both together show the loop.
• If arguments are a JSON string (OpenAI style), they are parsed and pretty-printed; invalid JSON arguments are shown raw so you can spot the bug.
• Parallel tool calls in a single turn appear as sibling steps — handy for confirming the model fanned out the way you expected.
• Nothing you paste is uploaded; the parser runs locally, making it safe to use with traces that include sensitive tool arguments or results.