Chat Thread Viewer

Waar is dit voor?

LLM-apps loggen hun conversaties als JSON-arrays van messages — dat is wat naar de API gaat en wat je ziet in audit logs, evaluatie-traces, fine-tuning datasets en SDK debug-output. Die arrays met het blote oog lezen is verschrikkelijk: muren van geëscapete strings, tool-call argumenten verpakt in geëscapete JSON-in-JSON, system prompts vermengd met de rest. Deze tool geeft je een snelle chat-bubble render zodat je de echte conversatie kan scannen, ziet welke berichten tool-calls bevatten, en die ene prompt vindt die uit de bocht ging.

Welke formats het begrijpt

• OpenAI Chat Completions. [{role, content}, ...] met optionele tool_calls op assistant-berichten en role: "tool" voor tool-resultaten. De meest voorkomende vorm.
• Anthropic Messages API. [{role, content: [...]}] waar content een array van blokken is (text, tool_use, tool_result, image). System prompt zit meestal top-level — plak hem als system-bericht als je hem wil zien.
• LangChain message dumps. [{type: "human" | "ai" | "system", content: ...}] — oudere LangChain-vorm, nog steeds gangbaar in opgeslagen traces.
• Wrapper-objecten. Als je {"messages": [...]} of {"input": [...]} plakt, wordt de wrapper automatisch uitgepakt.

Wat er gerenderd wordt

• Rol-gekleurde bubbels. System = grijs gecentreerd, user = indigo rechts, assistant = neutraal links, tool result = groen.
• Tool-calls. Standaard uitgeklapt met pretty-printed argumenten. Zowel OpenAI's tool_calls als Anthropic's tool_use-blokken worden afgehandeld. Tool-resultaat berichten verschijnen in een aparte bubbel.
• Code fences en inline code. Triple-backtick blokken renderen als <pre> monospace, enkele backticks als inline code. Geen syntax highlighting (we leveren geen tokenizer daarvoor), indentatie blijft behouden.
• Image-verwijzingen. Anthropic image-blokken tonen een klein pilletje met de bron-URL of media-type — we laden de image zelf niet (tool blijft offline).
• Stats-regel. Gedetecteerd format, aantal berichten, aantal tool-calls en een ruwe token-schatting met dezelfde heuristiek als onze Token Counter.

Veelvoorkomende valkuilen

• Trailing comma's. Standaard-JSON staat ze niet toe. Als je vanuit een debugger of REPL-output kopieerde, moet je misschien {...},] → {...}] opschonen voor je plakt.
• Enkele aanhalingstekens. Python's repr gebruikt enkele. Loop het door json.dumps, of gebruik een Python-literal-naar-JSON converter.
• Anthropic system prompt. De system-instructie in Anthropic's API is een top-level veld, geen bericht. Als je dump alleen de messages-array bevat, zit de system prompt er niet in — plak hem als {"role": "system", "content": "..."} aan het begin.
• Tool-call argumenten als geëscapete JSON. OpenAI retourneert arguments als een JSON-string. Wij unescapen en pretty-printen het. Als de JSON-in-string kapot is, wordt de rauwe string getoond.
• Privacy. Niets verlaat de pagina. De hele render draait in JS op de JSON die je plakt. Plak niets wat je niet in een notitie-app zou plakken.