Every conversation you've ever had with Claude becomes a tree in your own personal 3D forest.
AI Forest is a Chrome extension that transforms your Claude.ai chat history into a breathtaking, interactive 3D forest. Instead of an endless scroll of chat titles, you get a living, explorable world where every conversation is a low-poly pine tree — and trees grow taller the deeper your conversation went.
Stop scrolling. See all your Claude chats at once — as a beautiful 3D forest.
Your forest becomes a visual map of your mind — everything you've learned, built, and explored with Claude, brought to life.
- Click the green Code button at the top of this repository and select Download ZIP
- Unzip the downloaded folder
- Open Chrome and go to
chrome://extensions/ - Enable Developer Mode (toggle in the top-right)
- Click Load unpacked and select the unzipped
Claude.AI-Forest-mainfolder - Go to claude.ai, open any chat, and click 🌲 AI Forest in the sidebar!
- Low-poly stylized pine trees rendered with Three.js and flat-shaded
MeshLambertMaterialfor a gorgeous game-art aesthetic - Full 360° orbit camera — zoom, pan, and rotate freely with mouse controls
- Hemisphere + directional PBR lighting that simulates natural sunlight and ground bounce
- Wind sway animation — every tree gently sways in the breeze
Height and width scale independently — big trees grow taller, not wider, so trees never overlap.
A cozy 3D log cabin sits at the center of your forest as your home base. When the extension successfully reads your Claude username, a glowing sign above the door reads "[Your Name]'s Forest".
Type in the search bar to find any conversation. Non-matching trees instantly disappear, leaving only your matching trees visible — no clutter, no dim-out.
Hovering over a tree turns its leaves blue and shows a tooltip with the conversation title and message count. Click the tree to jump straight to that chat.
- No external servers. All data is stored locally via
chrome.storage.local - No telemetry, no tracking. The extension only reads your Claude.ai sidebar
- Only the
storageandtabspermissions are required
| Action | Control |
|---|---|
| Zoom | Mouse scroll wheel |
| Rotate camera | Left-click + drag |
| Pan camera | Right-click + drag |
| Hover tree | Mouse over — shows title + message count |
| Open chat | Click a tree |
| Search chats | Type in the search box (top-right) |
# 1. Clone the repo
git clone https://github.com/ashp15205/AI-Forest
cd claude-forest
# 2. Install dependencies
npm install
# 3. Build the extension
npm run build
# 4. Load the claude-forest folder as an unpacked extension in chrome://extensions/The dist/ directory is generated by the build step and is what the extension actually uses at runtime.
| Layer | Technology |
|---|---|
| 3D Rendering | Three.js + React Three Fiber |
| UI Helpers | @react-three/drei |
| UI Overlay | React 18 |
| Build | Vite 5 |
| Extension API | Chrome Manifest V3 (MV3) |
| Storage | chrome.storage.local |
claude-forest/
├── content.js # Injected into claude.ai — scrapes sidebar chats & username
├── background.js # Service worker — handles tab navigation messages
├── content.css # Styles for the injected AI Forest button
├── popup.html # Extension popup
├── manifest.json # Chrome Extension Manifest V3
├── src/
│ ├── ForestApp.jsx # Main React app — HUD, stats, search bar
│ ├── index.css # Global styles for the forest overlay
│ └── components/
│ ├── Scene.jsx # Three.js canvas, lighting, camera, hut, tree placement
│ └── Tree.jsx # Low-poly pine tree geometry + hover/match effects
└── dist/ # Built output (generated by npm run build)
Pull requests are welcome! If you spot a bug or have an idea for a new feature, open an issue first to discuss what you'd like to change.
If AI Forest brings you joy, consider buying me a coffee!