A Firefox browser extension that visualizes your ChatGPT conversations as interactive tree graphs, letting you navigate branching conversations visually.
GPTree adds a sidebar panel to ChatGPT that renders the hidden conversation mapping as an interactive node graph. Every time ChatGPT branches (regenerating answers, editing prompts), those branches become visible as alternate paths you can click to revisit.
- ChatGPT → Graph: Navigating branches in ChatGPT instantly updates the graph highlight
- Graph → ChatGPT: Click any node in the graph to switch ChatGPT to that branch
- Search & Hover: Find messages by content or preview them by hovering
git clone https://github.com/corbin-c/gptree.git
cd gptree
npm install
npm run buildThen load in Firefox:
- Navigate to
about:debugging - Click This Firefox → Load Temporary Add-on
- Select
build/firefox-mv3-dev/manifest.json
The sidebar icon will appear in your toolbar. Open any ChatGPT conversation page, then click the icon to toggle the tree view.
- Firefox 128+
- Works on
https://chatgpt.com/c/*andhttps://chatgpt.com/g/*/c/*URLs
| Feature | Description |
|---|---|
| Tree Visualization | Full branching structure rendered top-down with dagre layout |
| Two-Way Binding | Navigate in ChatGPT → graph updates. Click nodes → ChatGPT switches branches |
| Active Path Highlight | Blue borders trace the currently visible conversation lineage |
| Search with Auto-Zoom | Toggle search (🔍), type to highlight matching nodes in yellow, viewport auto-fits results |
| Hover Preview Panel | Hover any node to see its full message content at the bottom of the sidebar |
| Branch Navigation | Click idle (non-active-path) nodes to switch ChatGPT to that branch |
| TOC Fallback | Large conversations with virtualized turns work via ChatGPT's table of contents |
| Role Filtering | System and tool messages are hidden from the graph but edges are preserved |
GPTree uses Plasmo (a browser extension framework) with React 18, ReactFlow, and dagre running in TypeScript.
Two content scripts run on ChatGPT pages:
src/contents/chatgpt.ts— MAIN world. Intercepts the conversation API, polls the DOM for branch changes, and drives branch switching by clicking ChatGPT's Previous/Next response buttons or using the table of contents fallback.src/contents/isolated-bridge.ts— ISOLATED world. Bridgeswindow.postMessage(main world) andbrowser.runtime(extension world) across the security boundary.
Rendered in Firefox's sidebar panel:
src/tabs/tree.tsx— Sidebar root. Manages state, search, hover preview, and node click routing.src/components/TreeView.tsx— ReactFlow renderer with auto-zoom and edge styling.src/components/TreeNode.tsx— Single node with role badge, preview text, branch count, and contextual highlights.
src/lib/tree-model.ts— Parses ChatGPT's raw API response into aConversationTreewith nodes, parent/child relationships, and active path computation.src/lib/tree-layout.ts— Computes dagre positions, filters hidden roles, and re-wires edges to skip invisible nodes.src/lib/interceptor.ts— Monkey-patcheswindow.fetchto capture conversation data.src/background.ts— Relays sidebar clicks to the correct ChatGPT tab.
# Install dependencies
npm install
# Development with hot reload
npm run dev
# Production build
npm run build
# Package as .zip for distribution
npm run packagesrc/
├── background.ts # Extension background (tab routing, sidebar toggle)
├── contents/
│ ├── chatgpt.ts # MAIN world: interceptor, DOM polling, navigation
│ └── isolated-bridge.ts # ISOLATED world: cross-world message relay
├── tabs/
│ └── tree.tsx # Sidebar panel root component
├── components/
│ ├── TreeView.tsx # ReactFlow graph container
│ └── TreeNode.tsx # Individual node rendering
├── lib/
│ ├── tree-model.ts # Conversation data model and parsing
│ ├── tree-layout.ts # Dagre layout computation
│ ├── interceptor.ts # fetch monkey-patch for API interception
│ └── bridge.ts # Cross-world message utilities
└── hooks/
└── useConversationTree.ts # React hook for conversation data subscription