Claude Chat Tree Visualizer

A web-based tool to visualize your Claude conversations as a browsable tree diagrams with fast content search across the entire dataset.

Here's a video showing search within the conversation:

demo_compressed.mov

Quick Start

Claude's official data export is stripped of any parent uuid data for the message nodes themselves, and seems to be arranged entirely chronologically, making tree building hard. So I decided to go the browser console script route. Copy pasting the attached js script into your browser while at claude.ai will scrape all your conversations with their entire tree structures intact.

1. Go to claude.ai in your browser
2. Open DevTools (F12), go to console
3. Verify that what you're about to paste into the console isn't malicious!
4. Paste, enter
5. Open index.html in your browser
6. Load your exported JSON file

That's it!

Features

• Interactive Tree Visualization: See conversation branching with React Flow
• Powerful Search: Find any message across all conversations with fast indexing
• Smart Navigation:
  • Click conversations to auto-focus on the tree
  • Click search results to jump to specific messages
  • Cross-conversation navigation with "Jump" buttons
• Trackpad Navigation: No click and drag :)
• Visual Indicators:
  • Attachment icons for messages with files (📷 for images, 📄 for documents)
  • Relative timestamps ("2h ago", "3d ago")
  • Search result highlighting
• Keyboard Shortcuts: Press / to focus search, n/N to cycle through results

Files

• index.html - The complete visualization tool (just open in your browser)
• console_scraper.js - The console script that will scrape your conversations

Now you can actually find where you started talking about Lorentz transformations.