AI-Powered Whiteboard for Intelligent Design
Constellar is an intelligent whiteboard application that combines the power of AI with the intuitive hand-drawn aesthetics of Excalidraw. Simply describe what you want to create in natural language, and watch as diagrams, flowcharts, and system architectures materialize on your canvas.
- 🤖 AI-Powered Design: Chat with AI to generate complex diagrams and visual architectures
- 💬 Natural Language Input: Describe your vision in plain English - "create a web app architecture"
- 🎨 Excalidraw Canvas: Beautiful hand-drawn aesthetic with professional diagramming capabilities
- ⚡ Real-Time Generation: Watch your ideas transform into visual diagrams instantly
- 💾 Auto-Save: Never lose your work with automatic project persistence
- 🎯 Smart Elements: AI understands shapes, connections, and layout optimization
- Next.js 15.3.5 - React framework with App Router
- React 19 - UI library
- TypeScript 5 - Type safety
- Tailwind CSS v4 - Styling
- Excalidraw - Canvas and diagramming
- Framer Motion - Animations
- Gemini AI (gemini-2.5-flash) - Natural language understanding
- Model Context Protocol (MCP) - Custom AI-to-canvas adapter
- Drizzle ORM - Type-safe database queries
- libSQL - Serverless SQLite database
- better-auth - Authentication
- Python MCP Server - AI function calling backend
- Node.js 18+
- npm/yarn/pnpm
- Python 3.8+ (for MCP server)
- Clone the repository
git clone https://github.com/ThatParticularPencil/Constellar.git
cd Constellar- Install dependencies
npm install- Set up environment variables
Create a .env.local file:
# Gemini API Key
GEMINI_API_KEY=your_gemini_api_key_here
# Database (optional for local dev)
DATABASE_URL=your_database_url
# Add other environment variables as needed- Run the development server
npm run devOpen http://localhost:3000 to see the app.
For advanced AI features, set up the Python MCP server:
cd mcp-server
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
pip install -r requirements.txt
python server.py --api- Sign In: Create an account or sign in to access your workspace
- Create Project: Start a new whiteboard canvas
- Chat with AI: Use the sidebar to describe what you want to create
- Watch Magic Happen: AI generates diagrams directly on your canvas
- Edit & Refine: Manually adjust or ask AI for modifications
- "Create a system architecture for a full-stack web app"
- "Draw a flowchart for user authentication"
- "Make a network diagram with 3 servers and a load balancer"
- "Design a microservices architecture"
Constellar/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── api/ # API routes
│ │ ├── canvas/[id]/ # Canvas workspace
│ │ └── projects/ # Projects dashboard
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── ChatSidebar.tsx # AI chat interface
│ │ └── LandingPage.tsx # Homepage
│ ├── lib/ # Utilities and helpers
│ │ ├── ai/ # AI integration
│ │ └── mcpAdapter.ts # MCP protocol adapter
│ └── contexts/ # React contexts
├── mcp-server/ # Python MCP server
└── public/ # Static assets
- ChatSidebar: AI chat interface with conversation history
- Canvas: Excalidraw-powered drawing canvas
- MCP Adapter: Converts AI actions to canvas elements
- Projects Dashboard: Manage and organize your diagrams
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintSee .env.local.example for all available environment variables.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
- Excalidraw - Amazing whiteboard library
- Next.js - React framework
- Google Gemini - AI capabilities
- shadcn/ui - Beautiful UI components
- Live Demo: [Coming Soon]
- GitHub: https://github.com/ThatParticularPencil/Constellar
- Documentation: See
/docsfolder for detailed guides
Built with ✨ by the Constellar team