Chat-Thread-Viewer

Wozu ist das gut?

LLM-Anwendungen protokollieren ihre Konversationen als JSON-Arrays von Nachrichten — das wird an die API geschickt und taucht in Audit-Logs, Evaluation-Traces, Fine-Tuning-Datensätzen und SDK-Debug-Output auf. Diese Arrays als Mensch zu lesen ist grauenhaft: Mauern aus escapten Strings, Tool-Call-Argumente in escaptem JSON-in-JSON, System-Prompts mit dem Rest vermischt. Dieses Tool rendert dir schnell Chat-Bubbles, damit du die tatsächliche Konversation überblickst, siehst welche Nachrichten Tool-Calls enthielten und den einen Prompt findest, der schiefging.

Welche Formate erkannt werden

• OpenAI Chat Completions. [{role, content}, ...] mit optionalen tool_calls auf Assistant-Nachrichten und role: "tool" für Tool-Ergebnisse. Die häufigste Form.
• Anthropic Messages API. [{role, content: [...]}] wo content ein Array von Blöcken ist (text, tool_use, tool_result, image). System-Prompt ist meist Top-Level — füg ihn als System-Message ein, wenn du ihn sehen willst.
• LangChain-Message-Dumps. [{type: "human" | "ai" | "system", content: ...}] — ältere LangChain-Form, in gespeicherten Traces noch häufig.
• Wrapper-Objekte. Bei {"messages": [...]} oder {"input": [...]} wird der Wrapper automatisch entpackt.

Was gerendert wird

• Rollenfarbige Bubbles. System = grau zentriert, User = indigo rechts, Assistant = neutral links, Tool-Ergebnis = grün.
• Tool-Calls. Standardmäßig aufgeklappt mit hübsch gedruckten Argumenten. OpenAIs tool_calls und Anthropics tool_use-Blöcke werden beide unterstützt. Tool-Ergebnis-Nachrichten erscheinen als eigene Bubble.
• Code-Fences und Inline-Code. Dreifach-Backtick-Blöcke werden zu <pre> in Monospace, einfache Backticks zu Inline-Code. Kein Syntax-Highlighting (wir liefern keinen Tokenizer dafür), Einrückung bleibt erhalten.
• Bildverweise. Anthropic-Image-Blöcke werden als kleine Pille mit Source-URL oder Media-Type angezeigt — das Bild wird nicht geladen (Tool bleibt offline).
• Stats-Zeile. Erkanntes Format, Nachrichtenzahl, Tool-Call-Zahl und grobe Token-Schätzung mit derselben Heuristik wie unser Token Counter.

Typische Stolperfallen

• Trailing commas. Standard-JSON erlaubt sie nicht. Aus Debugger- oder REPL-Output musst du eventuell {...},] → {...}] säubern.
• Single Quotes. Pythons repr nutzt Single Quotes. Lass es durch json.dumps laufen, oder nutze einen Python-Literal-zu-JSON-Konverter.
• Anthropic-System-Prompt. Die System-Anweisung ist in Anthropics API ein Top-Level-Feld, keine Nachricht. Wenn dein Dump nur das Messages-Array enthält, ist der System-Prompt nicht drin — füg ihn als {"role": "system", "content": "..."} am Anfang ein.
• Tool-Call-Argumente als escapte JSON. OpenAI gibt arguments als JSON-String zurück. Wir entescape und hübsch drucken. Wenn das JSON im String kaputt ist, wird der rohe String gezeigt.
• Privacy. Nichts verlässt die Seite. Alles läuft in JS auf dem JSON, das du einfügst. Füg nichts ein, was du nicht in einen Notepad einfügen würdest.