Tool Use Trace Visualizer

Visualize multi-step LLM tool-use traces as a clear step-by-step flow.

Ad placeholder (leaderboard)

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.

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.
Ad placeholder (rectangle)