AI Tracer: Visualize LogFire-captured AI SDK Traces

Have you ever stared at a wall of JSON with your user/assistant/tool messages, trying to understand what your AI agent actually said to a user?

I kept running into this problem while building observability for a TS project I was working on. LogFire is excellent for collecting PydanticAI traces, but when you need to debug a conversation flow collected from Vercel's AI SDK, you're stuck parsing through cryptic JSON blobs like this:

What I really wanted was to see the actual conversation—who said what, when, and how the AI performed.

What I built

This tool transforms those cryptic message blobs into readable conversations. Just copy-paste the JSON output from LogFire and get:

• Clean conversation view - Messages displayed as actual chat bubbles
• Performance metrics - Tokens, timing, and model info at a glance
• Tool call visualization - See exactly which tools were called and when
• Error handling - Clear warnings for malformed or incomplete traces

Benefits?

The biggest win wasn't just the visual clarity—it was how much faster I could debug conversation issues. Instead of mentally parsing JSON, I could immediately see:

• Where conversations went off track
• Errors from bad transcription / STT
• Bad formatting in my system prompt / missing variables
• Not following the correct conversation flow

Should I call it an Evals platform and sell it to Vercel? Just kidding.

How to use it

Using the tool is straightforward:

1. Switch to the App tab
2. Copy the JSON trace output from LogFire
3. Paste it into the text area in the App tab
4. Click "Render Trace"
5. Browse the conversation and metadata

The tool handles all the JSON parsing, validates the structure, and presents any errors clearly if something's malformed.

What it won't do

This tool is specifically designed for Vercel's AI SDK traces captured by LogFire. It won't work with anything else!