Branching AI Conversations. Explore, branch, and visualize your thoughts as an interactive tree.
🌐 Try it live → jnrdhn.github.io/TreeChat
TreeChat is a modern, privacy-focused chat interface for Large Language Models. Instead of linear chat histories that lock you into a single path, TreeChat lets you branch out at any point, experiment with different prompts, and visualize the entire conversation as a living, growing tree.
Privacy note: All conversations are stored exclusively in your browser's IndexedDB — no account, no server, no data ever leaves your machine.
- 🌳 Interactive Tree Canvas — Every conversation grows into a navigable node graph. Pan, zoom, and click through your entire history.
- 🔀 Seamless Branching — Click any node on the canvas to jump back to that point, then send a new message. TreeChat creates a new branch with its own color-coded thread automatically.
- ✏️ Inline Editing — Hover over any user message and click the pencil icon to edit it inline. The AI re-runs from that point, and downstream branches are cleanly removed.
- 🧠 Advanced Context Control — Use the action buttons on canvas nodes to inject individual nodes (Network icon) or entire branch histories (Fork icon) as extra context for your next message.
- 🔌 Multi-Provider Support
- Ollama — Local, private, offline inference. Connects to any model you have pulled.
- Claude (Anthropic) — Full Claude API support with live key validation in Settings.
- 💾 Local First & Private — Conversations are stored entirely in your browser via IndexedDB. No account, no backend, no data leaving your machine.
- 💅 Premium Aesthetics — Dark-mode glassmorphism UI with smooth animations and a polished, responsive layout.
Add a screenshot or GIF of the node canvas here — contributions welcome!
No installation needed. Open jnrdhn.github.io/TreeChat in your browser and start chatting.
- Bring your own Claude API key (added in Settings ⚙️), or
- Point it at a local Ollama instance for fully offline inference.
-
Clone the repository
git clone https://github.com/jnrdhn/TreeChat.git cd TreeChat -
Install dependencies
npm install
-
Start the development server
npm run dev
Open http://localhost:5173 in your browser.
Browsers block cross-origin requests by default. You must start Ollama with CORS enabled:
Mac / Linux
OLLAMA_ORIGINS="*" ollama serveWindows — Command Prompt
set OLLAMA_ORIGINS="*"
ollama serveWindows — PowerShell
$env:OLLAMA_ORIGINS="*"
ollama serve| Tool | Purpose |
|---|---|
| React + Vite | Blazing-fast frontend framework & dev server |
| TypeScript | End-to-end type safety |
| Zustand | Lightweight, scalable state management |
| React Flow | Interactive, draggable node canvas |
| Dagre | Automatic top-down tree layout algorithm |
| idb | IndexedDB wrapper for local persistence |
| Vitest | Unit testing for core domain logic |
- Start a chat — Select a model from the dropdown in the input bar, type your first message, and hit Send.
- Watch the tree grow — The left panel renders your conversation as a live node graph. Pan and zoom freely.
- Branch from any point — Click a node on the canvas to set it as the active parent. Type a new message to fork the conversation from there with a new color-coded branch.
- Edit past messages — Hover over a user bubble in the chat and click the ✏️ icon to edit it inline. The AI re-generates from that point.
- Inject cross-branch context — Click the Network icon on a node to use that node's content as context, or the Fork icon to inject its full history. Pills appear in the input bar confirming what's included.
- Configure providers — Click the ⚙️ gear icon in the sidebar to set your Ollama URL, add a Claude API key, or write a global system prompt.
TreeChat is automatically deployed to GitHub Pages on every push to main.
| What | Detail |
|---|---|
| Hosting | GitHub Pages |
| Live URL | jnrdhn.github.io/TreeChat |
| CI/CD | GitHub Actions (.github/workflows/deploy.yml) |
| Trigger | Every push to main |
| Build output | dist/ → gh-pages branch |
The workflow runs npm ci && npm run build and pushes the resulting dist/ folder to the gh-pages branch via peaceiris/actions-gh-pages.
Contributions are what make the open-source community such an amazing place. Any contributions you make are greatly appreciated.
- Fork the project
- Create your feature branch —
git checkout -b feature/amazing-feature - Commit your changes —
git commit -m 'feat: add amazing feature' - Push to the branch —
git push origin feature/amazing-feature - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.