AI Canvas - Infinite Branching Conversations

An infinite canvas application for branching AI conversations. Create child conversations by selecting text from AI responses, building a visual tree of related queries and responses.

✨ Features

• 🎨 Infinite Canvas: Pan and zoom freely with React Flow
• 🌳 Text Selection Branching: Select any text to create child conversation nodes
• ⚡ Streaming AI Responses: Real-time streaming from OpenRouter API (GPT-4o-mini)
• 📐 Smart Auto-Layout: Dynamic node positioning with collision avoidance
• 🔀 Visual Connections: Bezier curves show parent-child relationships (Right→Left initially, Bottom→Top after positioning)
• 📝 Markdown Support: Rich text rendering for AI responses
• 📑 Multi-Canvas Tabs: Create multiple independent conversation canvases
• ⚙️ Settings Dialog: Easy API key management via UI
• 💾 Auto-Save: Conversations and settings persist in localStorage

🚀 Quick Start

1. Install Dependencies

npm install

2. Run Development Server

npm run dev

3. Add Your API Key

1. Open http://localhost:3000
2. Click the gear icon (⚙️) in the top-right corner
3. Enter your OpenRouter API key
4. Click Save

Get your API key: openrouter.ai/keys

Note: You do NOT need to create a .env.local file. All API key management is done through the Settings dialog.

📖 Usage

Starting a Conversation

1. Type your query in the initial node
2. Press Enter
3. Watch the AI response stream in real-time

Creating Branches

1. Select any text in an AI response
2. Click the "+" button that appears
3. A child node will appear to the right
4. Type your follow-up query
5. Press Enter - the node will slide below the parent

Managing Multiple Canvases

• Click "+ New Canvas" in the tab bar to create a new workspace
• Each tab has completely independent conversations
• Click the X on a tab to delete it (cannot delete the last tab)

Navigation

• Pan: Click and drag on the canvas background
• Zoom: Scroll wheel
• Move nodes: Drag from the header area (with grip icon)

🏗️ Architecture

Tech Stack

• Framework: Next.js 16.0 (App Router, TypeScript)
• Canvas: React Flow 11.11
• State Management: Zustand
• AI API: OpenRouter (GPT-4o-mini with streaming)
• Styling: Tailwind CSS + Shadcn/UI
• Animations: Framer Motion

Key Components

/components
  ├── Canvas.tsx          # Main React Flow canvas wrapper
  ├── CanvasNode.tsx      # Individual conversation node
  ├── NodeContent.tsx     # Markdown rendering for AI responses
  ├── NodeInput.tsx       # Query input field
  ├── PlusButton.tsx      # Text selection "+" button
  ├── TabBar.tsx          # Multi-canvas tab management
  └── SettingsDialog.tsx  # API key configuration

/store
  └── useCanvasStore.ts   # Zustand state (tabs, nodes, edges, selections)

/lib
  ├── smart-layout.ts     # Auto-positioning & collision detection
  └── openrouter.ts       # API client

/app/api
  └── chat/route.ts       # Streaming SSE endpoint

/types
  └── node.types.ts       # TypeScript interfaces

🎯 Features in Detail

Dynamic Edge Connections

• Initial state: Child nodes appear to the RIGHT of parent with Right→Left edge
• After Enter press: Child moves BELOW parent, edge switches to Bottom→Top
• Smooth animated transitions

Horizontal Branching

• Multiple children from the same parent spread horizontally
• Centered under parent with 40px minimum spacing
• Automatic repositioning when new siblings are added

Tab Isolation

• Each tab has completely independent state
• Deep cloning prevents cross-tab contamination
• Dimension cache cleared on tab switch

Collision Avoidance

• Real-time collision detection using rectangle overlap
• Automatic position adjustments (40px buffer)
• Pauses during node dragging, resumes after

Persistence

• Tabs & conversations: Saved to localStorage
• API key: Stored securely in localStorage
• Viewport state: Auto-restored on reload

🔧 Configuration

Model Selection

Currently using openai/gpt-4o-mini. To change the model:

1. Edit /app/api/chat/route.ts:

model: 'openai/gpt-4o-mini', // Change to your preferred model

2. Available models: openrouter.ai/models

Layout Configuration

Adjust spacing and dimensions in /lib/smart-layout.ts:

const DEFAULT_CONFIG: LayoutConfig = {
  nodeWidth: 600,        // Node width (px)
  nodeHeight: 250,       // Default node height (px)
  horizontalGap: 40,     // Spacing between siblings (px)
  verticalGap: 120,      // Spacing between parent and children (px)
  collisionBuffer: 40,   // Minimum clearance (px)
};

🐛 Troubleshooting

API Key Issues

• "API Key Required" message: Click gear icon and add your OpenRouter API key
• "Failed to get response": Check browser console for detailed error messages
• Invalid credentials: Verify your API key at openrouter.ai/keys

Layout Issues

• Nodes overlapping: Try refreshing the page to reset dimension cache
• Incorrect positioning: Check browser console for errors in smart-layout.ts

Performance

• Slow rendering: Large conversation trees (100+ nodes) may experience performance degradation
• Recommended: Keep individual canvases under 50 nodes for optimal performance

📝 Development Status

✅ Complete Features:

• Infinite canvas with pan/zoom controls
• Dynamic node creation and text selection
• Streaming AI responses with SSE
• Smart auto-repositioning (right → below)
• Reference text context in child nodes
• Markdown rendering with syntax highlighting
• Tab-based multi-canvas support
• Settings dialog for API key management
• Collision detection and avoidance
• localStorage persistence
• Hydration-safe SSR

🤝 Contributing

Contributions welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

🙏 Acknowledgments

• Built with Claude Code
• Powered by OpenRouter
• UI components from Shadcn/UI

---

Questions? Open an issue on GitHub or check the documentation in the /docs folder.