AI-Powered Mind Mapping & Project Planning Tool
Features β’ Demo β’ Installation β’ Architecture β’ Usage
- What is DevBrain?
- The Problem We Solve
- Key Benefits
- Features
- Tech Stack
- Architecture
- Installation
- Usage Guide
- API Documentation
- Contributing
- License
DevBrain is an intelligent mind mapping and project planning tool that combines visual thinking with AI assistance. It helps developers, teams, and students break down complex projects into manageable hierarchical structures while providing contextual AI guidance at every step.
Think of it as Obsidian meets Notion meets ChatGPT - all in one beautiful, glassmorphic interface.
β Scattered Information - Notes in one app, tasks in another, ideas in a third
β Loss of Context - Switching between tools loses the big picture
β Manual Breakdown - Breaking projects into tasks is time-consuming
β No AI Integration - Generic AI tools lack project-specific context
β Poor Visualization - Text-heavy tools don't show relationships clearly
β
Unified Workspace - Everything in one place: ideas, tasks, hierarchy, and AI chat
β
Visual Thinking - See your entire project structure at a glance (Tree & Graph views)
β
AI That Understands Context - Chat with AI about specific nodes with knowledge base grounding
β
Automatic Persistence - All changes auto-save to database, no manual saving
β
Hierarchical Organization - Parent-child relationships make complex projects manageable
Hierarchical project structure with parent-child relationships clearly visualized
Interactive force-directed graph showing node connections
Clean light theme for daytime productivity
Structured view with intelligent auto-layout
Context-aware AI assistance for each node with task breakdown and smart suggestions
Quick node creation with smart placement and status tracking
lv_0_20260104152635_1.mp4
Watch DevBrain in action - see how to create nodes, switch between views, and use AI chat assistance
| Benefit | Description |
|---|---|
| π Faster Planning | Break down projects 3x faster with AI-assisted task decomposition |
| π§© Better Organization | Visual hierarchy shows dependencies and relationships clearly |
| π‘ Smarter Decisions | AI provides context-aware suggestions based on uploaded knowledge |
| π Track Progress | Real-time status tracking (Not Started β In Progress β Completed) |
| π Never Lose Data | SQLite persistence ensures everything is saved automatically |
| π¨ Beautiful UX | Glassmorphic design with smooth animations makes planning enjoyable |
Tree View - Hierarchical Layout
- Dagre-based automatic positioning
- Clear parent-child relationships
- Zoom and pan controls
- Perfect for structured planning
Project Root
βββ Frontend Development
β βββ UI Design
β βββ Component Library
β βββ Integration Tests
βββ Backend Development
β βββ API Design
β βββ Database Schema
β βββ Authentication
βββ DevOps
βββ CI/CD Pipeline
βββ Monitoring Setup
Graph View - Force-Directed Network
- Physics-based interactive layout
- Drag nodes to rearrange
- Obsidian-style knowledge graph
- Perfect for exploring connections
- Node-Specific Context: Chat about individual tasks/ideas
- Knowledge Grounding: Upload PDFs, DOCX, TXT, MD files for AI reference
- Persistent History: All conversations saved per node
- Smart Suggestions: Get breakdowns, risk analysis, implementation steps
Example Interactions:
You: "Break this down into tasks"
AI: "Here's a task breakdown for 'Frontend Development':
1. Set up React project with Vite
2. Install UI libraries (React Flow, Framer Motion)
3. Create component structure
4. Implement state management with Zustand
5. Build ChatPanel and NodeCard components..."
You: "What are the risks?"
AI: "Key risks for this node:
β οΈ Scope creep if features aren't prioritized
β οΈ React Flow learning curve may slow development
β οΈ State management complexity as app grows..."
Upload your research, documentation, and notes:
- π PDF - Research papers, design docs(upcoming)
- π DOCX - Word documents, specifications(upcoming)
- π TXT/MD - Plain text notes, markdown files
The AI automatically searches and references uploaded knowledge when answering questions.
Visual indicators for every node:
- π΄ Not Started - Gray, default state
- π‘ In Progress - Amber, animated edges
- π’ Completed - Green, success state
Track progress across your entire project hierarchy at a glance.
| Feature | Shortcut | Description |
|---|---|---|
| Command Palette | Cmd/Ctrl + K |
Quick navigation, fuzzy search, create nodes |
| Auto-Save | - | Every change persists to database instantly |
| Connection Status | - | Real-time backend connection monitoring |
| Cascade Delete | - | Deleting parent removes all children |
| Quick Prompts | - | Pre-built AI questions for common tasks |
- Glassmorphism Design - iOS-inspired blur effects and transparency
- Smooth Animations - Framer Motion for silky transitions
- Dark Theme - Easy on the eyes for long coding sessions
- Responsive Layout - Adapts to different screen sizes
- Keyboard Shortcuts - Power user optimizations
React 19.2 // UI Framework
Zustand // State Management
React Flow // Tree View & Node Editor
React Force Graph // Graph Visualization
Framer Motion // Animations
Dagre // Layout Algorithm
Lucide React // Icon Library
Vite // Build ToolDjango 4.2 # Web Framework
Django REST # API Framework
SQLite # Database (easily upgradable to PostgreSQL)
Google Gemini API # AI Integration
PyPDF2 # PDF Processing
python-docx # DOCX Processing- CORS Enabled - Seamless frontend-backend communication
- RESTful API - Standard HTTP/JSON endpoints
- ORM Models - Type-safe database queries
- Auto Migrations - Database schema versioning
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β USER BROWSER β
β http://localhost:5173 β
β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β React Frontend (Vite) β β
β β β β
β β ββββββββββββ βββββββββββββ ββββββββββββββββ β β
β β β Navbar β β TreeView β β GraphView β β β
β β ββββββββββββ βββββββββββββ ββββββββββββββββ β β
β β β β
β β ββββββββββββββββββββββββββββββββββββββββββββ β β
β β β ChatPanel (AI Integration) β β β
β β β π¬ Context-aware conversations β β β
β β β π Knowledge base grounding β β β
β β ββββββββββββββββββββββββββββββββββββββββββββ β β
β β β β
β β ββββββββββββββββββββββββββββββββββββββββββββ β β
β β β Zustand Store (Global State) β β β
β β β - nodes, edges, chatHistory β β β
β β β - currentView, selectedNodeId β β β
β β ββββββββββββββββββββββββββββββββββββββββββββ β β
β β β HTTP/JSON β β
β β ββββββββββββββββββββββββββββββββββββββββββββ β β
β β β API Service (services/api.js) β β β
β β β - createNode(), chatWithAI() β β β
β β β - uploadKnowledge(), loadProject() β β β
β β ββββββββββββββββββββββββββββββββββββββββββββ β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β CORS Enabled
http://localhost:8000/api
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Django Backend Server β
β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β URL Router (config/urls.py) β β
β β /api/projects/ β ProjectViewSet β β
β β /api/nodes/ β NodeViewSet β β
β β /api/edges/ β EdgeViewSet β β
β β /api/knowledge/ β KnowledgeBaseViewSet β β
β β /api/chat/node/{id}/ β ChatNodeView β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β Business Logic (api/services.py) β β
β β β β
β β ββββββββββββββββββββ ββββββββββββββββββββββββ β β
β β β GeminiAIService β β KnowledgeSearchServiceβ β β
β β β - Build context β β - Keyword matching β β β
β β β - Call API β β - Score results β β β
β β β - Save messages β β - Return top K β β β
β β ββββββββββββββββββββ ββββββββββββββββββββββββ β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β Django ORM Models (api/models.py) β β
β β β β
β β βββββββββββ ββββββββ ββββββββ βββββββββββββββββ β β
β β β Project β β Node β β Edge β β KnowledgeBase β β β
β β βββββββββββ ββββββββ ββββββββ βββββββββββββββββ β β
β β β β β β β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β β β β β
β ββββββββββββββ΄ββββββββββ΄ββββββββββββββ β
β β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β SQLite Database β β
β β db.sqlite3 (easily upgradable to PostgreSQL) β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β
Google Gemini API
(AI Responses)
ββββββββββββββββββββββββ
β Project β
β βββββββββββββββββββ β
β + id: UUID β
β + name: String β
β + description: Text β
β + owner: ForeignKey β
β + created_at β
ββββββββββββββββββββββββ
β 1
β
β has many
β *
ββββββββββββββββββββββββ ββββββββββββββββββββββββ
β Node β * * β Edge β
β βββββββββββββββββββ ββββββββββ βββββββββββββββββββ β
β + id: UUID β β + id: UUID β
β + label: String β β + source: FK(Node) β
β + description: Text β β + target: FK(Node) β
β + status: Choice β β + project: FK β
β + parent: FK(self) β ββββββββββββββββββββββββ
β + position_x: Float β
β + position_y: Float β
ββββββββββββββββββββββββ
β 1
β
β has many
β *
ββββββββββββββββββββββββ
β ChatMessage β
β βββββββββββββββββββ β
β + id: UUID β
β + node: FK(Node) β
β + role: Choice β (user/assistant)
β + content: Text β
β + metadata: JSON β (knowledge sources)
β + timestamp β
ββββββββββββββββββββββββ
ββββββββββββββββββββββββ
β KnowledgeBase β
β βββββββββββββββββββ β
β + id: UUID β
β + project: FK β
β + title: String β
β + file_type: Choice β (pdf/docx/txt/md)
β + content_preview β
β + full_text: Text β
β + uploaded_at β
ββββββββββββββββββββββββ
Frontend Action β API Call β Backend Processing β Database β Response
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
π CREATE NODE:
User clicks "New Node"
β POST /api/nodes/
β NodeViewSet.create()
β Save to DB
β Return node JSON
β Update Zustand store
β UI rerenders
π¬ CHAT WITH AI:
User sends message
β POST /api/chat/node/{id}/
β GeminiAIService.generate_response()
β KnowledgeSearchService.search_relevant_knowledge()
β Build context prompt
β Call Gemini API
β Save message to DB
β Return AI response
β Update chat history
β UI displays message
π UPLOAD KNOWLEDGE:
User uploads PDF
β POST /api/knowledge/
β KnowledgeBaseViewSet.create()
β Extract text (PyPDF2)
β Save to DB with full_text
β Return knowledge base entry
β Available for AI context
- Node.js 18+ and npm
- Python 3.9+
- Git
git clone https://github.com/shams909/devbrain-the-architect.git
cd devbrain-the-architectcd backend/backend
# Create virtual environment
python -m venv venv
# Activate virtual environment
# Windows:
venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
# Install dependencies
pip install -r requirements.txt
# Run migrations
python manage.py makemigrations
python manage.py migrate
# Create superuser (optional, for admin panel)
python manage.py createsuperuser
# Start Django server
python manage.py runserverBackend runs at: http://localhost:8000
# Open new terminal
cd frontend
# Install dependencies
npm install
# Start Vite dev server
npm run devFrontend runs at: http://localhost:5173
Get your API key from Google AI Studio
Edit backend/backend/config/settings.py:
GEMINI_API_KEY = "your-api-key-here" # Replace with your actual key
GEMINI_MODEL = "gemini-pro"Note: Without API key, the system uses intelligent fallback responses.
-
Start Both Servers
- Backend:
python manage.py runserver - Frontend:
npm run dev
- Backend:
-
Open the App
- Navigate to
http://localhost:5173 - App auto-creates a project on first load
- Navigate to
-
Create a Root Node
- Click "New Node" button
- Fill in details:
- Label: "My Project"
- Description: "Main project overview"
- Status: Not Started
- Parent: None (this makes it a root node)
- Click "Create"
-
Add Child Nodes
- Click "New Node" again
- Fill in details:
- Label: "Frontend Development"
- Parent: Select "My Project"
- Repeat for more children
-
Chat with AI
- Click on any node
- Chat panel opens on right
- Try: "Break this down into tasks"
- AI responds with context-aware suggestions
-
Upload Knowledge
- Upload PDFs, docs, notes
- AI will reference them in responses
- Shows "π Using knowledge: [filename]" in chat
-
Switch Views
- Click Tree/Graph toggle in navbar
- Or press
Cmd/Ctrl + Kβ "Switch to Graph View"
-
Track Progress
- Edit nodes to update status
- Watch visual indicators change
- See progress across entire hierarchy
| Shortcut | Action |
|---|---|
Cmd/Ctrl + K |
Open command palette |
Escape |
Close modals/panels |
Enter |
Send chat message |
| Click node | Open chat panel |
http://localhost:8000/api
GET /api/projects/ # List all projects
POST /api/projects/ # Create project
GET /api/projects/{id}/ # Get project details
PATCH /api/projects/{id}/ # Update project
DELETE /api/projects/{id}/ # Delete projectExample Request:
POST /api/projects/
{
"name": "My Hackathon Project",
"description": "AI-powered task manager"
}GET /api/nodes/ # List all nodes
POST /api/nodes/ # Create node
GET /api/nodes/{id}/ # Get node details
PATCH /api/nodes/{id}/ # Update node
DELETE /api/nodes/{id}/ # Delete node (cascade)
GET /api/nodes/?project={id} # Filter by projectExample Request:
POST /api/nodes/
{
"project": "project-uuid",
"label": "Build API",
"description": "RESTful API with Django",
"status": "in-progress",
"parent": "parent-node-uuid",
"position_x": 100,
"position_y": 200
}POST /api/chat/node/{id}/ # Send message to AIExample Request:
POST /api/chat/node/node-uuid/
{
"message": "Break this down into tasks",
"use_knowledge": true
}Example Response:
{
"response": "Here's a task breakdown:\n1. Set up Django\n2. Create models...",
"metadata": {
"knowledge_sources": ["project-plan.pdf", "api-spec.md"],
"model": "gemini-pro"
}
}GET /api/knowledge/ # List all knowledge
POST /api/knowledge/ # Upload file
DELETE /api/knowledge/{id}/ # Delete knowledge
GET /api/knowledge/?project={id} # Filter by projectExample Request (multipart/form-data):
POST /api/knowledge/
Content-Type: multipart/form-data
project: project-uuid
file: [binary file data]π Hackathon Project
βββ π₯ Team Formation (Completed)
βββ π‘ Idea Brainstorming (In Progress)
β βββ Problem Research
β βββ Solution Design
βββ π» Development (Not Started)
β βββ Frontend (React + Vite)
β βββ Backend (Django API)
β βββ Integration Testing
βββ π¨ Design & UX
βββ π Presentation Prep
AI Chat Example:
You: "What should I prioritize for a 48-hour hackathon?"
AI: "Focus on these priorities: 1) MVP features only (80% of effort), 2) Working demo over perfection, 3) Presentation story (20% of time). Skip: complex auth, scalability optimizations."
π± Mobile App Development
βββ π¨ UI/UX Design
β βββ Wireframes
β βββ Mockups
β βββ User Flow
βββ βοΈ Backend Development
β βββ Database Schema
β βββ REST API
β βββ Authentication
βββ π± Mobile App (upcoming)
β βββ Login Screen
β βββ Home Feed
β βββ Profile Page
βββ π Deployment
βββ CI/CD Pipeline
βββ App Store Submission
π Research Paper: AI Ethics
βββ π Literature Review (In Progress)
β βββ Data Privacy Papers
β βββ Bias in AI Studies
β βββ Regulation Frameworks
βββ π¬ Methodology
β βββ Survey Design
β βββ Interview Protocol
βββ π Data Analysis
βββ βοΈ Writing
βββ Introduction
βββ Results Section
βββ Conclusion
Knowledge Base:
- Upload 20+ research papers (PDFs)
- AI references them when discussing literature review
- Get citation suggestions: "What papers support this claim?"
β
AI Integration - Get smart suggestions, not just visual organization
β
Code-Friendly - Built for developers, with keyboard shortcuts and dark theme
β
Knowledge Base - Upload context files for grounded AI responses
β
Visual Thinking - See the big picture with graph/tree views
β
Faster Setup - No complex workflows, just ideas β hierarchy β tasks
β
AI Assistance - Break down epics/stories automatically
β
Project Context - AI knows your entire project structure
β
Node-Specific - Conversations tied to individual tasks/ideas
β
Persistent History - All chats saved and searchable
- Collaborative editing (multiple users)
- Export to Markdown/JSON
- Custom themes and color schemes
- Real-time sync with WebSockets
- Mobile app (React Native)
- Integration with GitHub/Jira
- Voice input for chat
- Gantt chart view
- Time tracking per node
- AI-generated diagrams from nodes
- Support PDF, research papers and different types of files
We welcome contributions! Here's how you can help:
-
π Report Bugs
- Open an issue with reproduction steps
- Include screenshots if applicable
-
π‘ Suggest Features
- Describe the use case
- Explain how it improves the workflow
-
π Improve Documentation
- Fix typos, clarify instructions
- Add examples or tutorials
-
π» Submit Code
- Fork the repo
- Create a feature branch
- Submit a pull request
# Fork and clone your fork
git clone https://github.com/YOUR-USERNAME/devbrain-the-architect.git
cd devbrain-the-architect
# Create feature branch
git checkout -b feature/amazing-feature
# Make changes and commit
git commit -m "Add amazing feature"
# Push to your fork
git push origin feature/amazing-feature
# Open Pull Request on GitHub- Frontend: Use ESLint config (already set up)
- Backend: Follow PEP 8 (Python style guide)
- Commits: Use conventional commits (
feat:,fix:,docs:)
This project is licensed under the MIT License.
MIT License
Copyright (c) 2026 DevBrain Team
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
- React Flow - Powerful node-based UI library
- Google Gemini - AI model for contextual responses
- Django - Robust Python web framework
- Framer Motion - Beautiful animations library
- Zustand - Simple state management
- Email: md.shamsuddoha109@gmail.com (placeholder)
- Discord: shams063
Visual hierarchy with parent-child connections, status indicators,
and smooth zoom/pan controls
Interactive network graph with physics simulation,
drag-and-drop nodes, and relationship visualization
Context-aware conversations with knowledge base integration,
quick prompts, and persistent chat history
Quick navigation and fuzzy search for power users,
keyboard-first workflow
Thanks to my team members time and effort. I appreciate you all guys.π€
Star β this repo if you find it helpful!



