The AI-Native Workspace That Builds Itself
Features • Demo • Getting Started • Architecture • Contributing
Canvas AI reimagines how developers and teams work with data. Instead of navigating through multiple apps (GitHub, Notion, Jira, Trello) — you simply describe what you need, and the interface builds itself while staying synchronized with your tools.
This is not just Generative UI. This is Generative UI + MCP — where interfaces don't just appear, they connect to your real workflow.
"The best interface is no interface. The next best is one that creates itself and integrates with everything."
Perfect for:
- 🚀 Developers: "Show my GitHub issues" → Visual board synced with your repo
- 📊 Product Managers: "Track Q1 roadmap" → Timeline with real data
- 💰 Founders: "Budget tracker for seed round" → Live financial dashboard
- 🎯 Teams: Save workspaces, share with team, resume from any device
Modern software is broken:
| Problem | Impact |
|---|---|
| Interface Overload | Users spend 30% of their time navigating, not working |
| One-Size-Fits-All | Every user sees the same UI regardless of their needs |
| Learning Curve | New tools require hours of training |
| Context Switching | Users juggle 10+ apps to complete one workflow |
Canvas AI introduces Generative UI — interfaces that construct themselves in real-time based on user intent.
┌─────────────────────────────────────────────────────────────────┐
│ USER: "I need to plan a product launch" │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 📋 Tasks │ │ 📅 Timeline │ │ 💰 Budget │ │
│ │ ━━━━━━━━ │ │ [Gantt] │ │ [Pie Chart] │ │
│ │ □ Research │ │ │ │ │ │
│ │ □ Design │ │ │ │ │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ USER: "Add competitor analysis" │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ 📊 Competitor Matrix │ │
│ │ [Auto-generated comparison table] │ │
│ └────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Components render dynamically based on natural language. The AI understands context and chooses the right visualization.
Zero-setup MCP features that work instantly:
- GitHub MCP: Fetch issues from ANY public repo (React, Next.js, TypeScript, etc.) - No tokens needed!
- File System MCP: Save/load workspaces with browser LocalStorage
- Graceful fallbacks: All features work with or without API keys
| Component | Triggers | Capability |
|---|---|---|
| ProjectBoard | "plan", "organize", "tasks" | Kanban-style task management |
| Checklist | "todo", "list", "track" | Interactive task lists with progress |
| NotesEditor | "notes", "write", "document" | Rich text editing |
| DataChart | "chart", "visualize", "graph" | Dynamic bar/line/pie charts |
| BudgetTracker | "budget", "expenses", "costs" | Financial tables with totals |
| Timeline | "timeline", "schedule", "milestones" | Horizontal event timeline |
| Timer | "timer", "pomodoro", "focus" | Focus sessions with tracking |
| ComparisonTable | "compare", "versus", "analyze" | Feature comparison matrices |
| CodeSnippet | "code", "function", "script" | Syntax-highlighted code with copy/download |
| Whiteboard | "draw", "diagram", "sketch" | Interactive drawing canvas |
| Tool | What It Does | Setup Required | Example |
|---|---|---|---|
| Calculator | Math & percentages | ❌ None | "What's 20% of $15000?" |
| Weather ⚡ | Real-time weather | "Weather in Tokyo" | |
| Time | Current date/time | ❌ None | "What time is it?" |
| Quote | Inspirational quotes | ❌ None | "Give me a motivation quote" |
| Memory | Context persistence | ❌ None | "Remember my budget is $5000" |
| Export | Share workspace | ❌ None | "Export as markdown" |
| Web Search ⚡ | Google results | "Search latest AI news" | |
| GitHub Issues 🔥 | Fetch repo issues | ❌ No token needed! | "Show React issues" |
| Save Workspace 🔥 | Persistent storage | ❌ None (LocalStorage) | "Save my workspace" |
| Load Workspace 🔥 | Restore sessions | ❌ None (LocalStorage) | "Load my last project" |
🔥 GitHub Integration: Uses public GitHub API - works for ANY popular repo without authentication! Try: "Show React issues", "Show Next.js issues", "Show TypeScript issues"
- Glassmorphism — Frosted glass cards with depth
- Dark Mode First — Easy on the eyes, premium feel
- Micro-animations — Every interaction feels alive
- Responsive — Seamless from mobile to desktop
- Voice Control — Speak your commands naturally
- Bi-Directional Sync — Drag a card, and the AI knows. Check a box, and the AI tracks progress
- Smart Tools — Calculator, weather, time, quotes, memory, export & web search
- Keyboard Shortcuts — Ctrl+K command palette, Ctrl+/ voice toggle, Ctrl+Enter submit
- Auto-Save — Workspace persistence with localStorage
- Server-side rendering with Next.js 16
- Optimized bundle with tree-shaking
- Lazy-loaded components
- Edge-ready deployment
🔗 Live Demo: canvas-ai-nu.vercel.app
📺 Demo Video: Watch on YouTube
✨ "Create a project board for my startup launch"
✨ "I need a budget tracker for $5000 monthly expenses"
✨ "Build a comparison table for React vs Vue vs Angular"
✨ "Start a 25-minute focus timer"
✨ "Show me a Python function for fibonacci"
✨ "Create a whiteboard for brainstorming"
✨ "What's 15% tip on $85?"
✨ "Show React issues" 🔥 NEW - Works instantly, no setup!
✨ "Show Next.js issues" 🔥 Live GitHub data
✨ "Show TypeScript issues" 🔥 Any popular repo
✨ "Save my workspace as 'Product Launch Plan'"
Screenshot coming after deployment 📸
- Node.js 18+
- npm or yarn
- Tambo API key (Get one here)
# Clone the repository
git clone https://github.com/Prakhar2025/canvas.ai.git
cd canvas.ai
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Add your TAMBO_API_KEY to .env.local
# Start development server
npm run devOpen http://localhost:3000 to see Canvas AI in action.
Create a .env.local file in the root directory:
# ============================================
# REQUIRED - Core Functionality
# ============================================
NEXT_PUBLIC_TAMBO_API_KEY=your_tambo_api_key_here
# ============================================
# OPTIONAL - Enhanced Features (Recommended for Hackathon)
# ============================================
# Real Weather Data (Get free key: https://openweathermap.org/api)
NEXT_PUBLIC_OPENWEATHER_API_KEY=your_openweather_api_key
# Real Web Search (Get key: https://serpapi.com/)
NEXT_PUBLIC_SERPAPI_KEY=your_serpapi_key
# ============================================
# MCP INTEGRATIONS - GitHub (Highly Recommended!)
# ============================================
# GitHub Personal Access Token (https://github.com/settings/tokens)
# Required scopes: 'repo', 'read:org'
GITHUB_TOKEN=ghp_your_github_personal_access_token
# Your GitHub repository details
GITHUB_REPO_OWNER=Prakhar2025
GITHUB_REPO_NAME=canvas.ai- ✅
NEXT_PUBLIC_TAMBO_API_KEY(Required) - ✅
GITHUB_TOKEN(Highly recommended - enables MCP features) - ✅
NEXT_PUBLIC_OPENWEATHER_API_KEY(Shows real API integration)
# Install dependencies
npm install
# Development mode
npm run dev
# Production build (test before deployment)
npm run build
npm start
# Lint check
npm run lintTest MCP Features:
Try in the app:
1. "Show my GitHub issues" (requires GITHUB_TOKEN)
2. "Create issue: Add dark mode toggle"
3. "Save workspace as 'My Project'"
4. "Weather in London" (requires OPENWEATHER_API_KEY)
Canvas AI follows a modular, component-driven architecture optimized for AI-powered interfaces.
┌─────────────────────────────────────────────────────────────┐
│ CANVAS AI │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Next.js │ │ Tambo │ │ Zustand │ │
│ │ App Router│ │ SDK │ │ State │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
│ │ │ │ │
│ ┌──────▼────────────────▼────────────────▼──────┐ │
│ │ Component Registry │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │
│ │ │Task │ │Chart│ │Notes│ │Timer│ │Table│ │ │
│ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ │ │
│ ┌───────────────────────▼───────────────────────┐ │
│ │ Canvas Renderer │ │
│ │ (Dynamic Component Orchestration) │ │
│ └───────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
See docs/ARCHITECTURE.md for detailed system design.
canvas-ai/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with providers
│ │ ├── page.tsx # Main canvas page
│ │ └── globals.css # Design system tokens
│ ├── components/
│ │ ├── canvas/ # Canvas container components
│ │ │ ├── Canvas.tsx
│ │ │ ├── CanvasHeader.tsx
│ │ │ └── CommandInput.tsx
│ │ ├── generative/ # AI-rendered components
│ │ │ ├── ProjectBoard.tsx
│ │ │ ├── Checklist.tsx
│ │ │ ├── NotesEditor.tsx
│ │ │ ├── DataChart.tsx
│ │ │ ├── BudgetTracker.tsx
│ │ │ ├── Timeline.tsx
│ │ │ ├── Timer.tsx
│ │ │ └── ComparisonTable.tsx
│ │ └── ui/ # Reusable UI primitives
│ │ ├── GlassCard.tsx
│ │ ├── Button.tsx
│ │ └── Input.tsx
│ └── lib/
│ ├── tambo.ts # Tambo configuration
│ ├── registry.ts # Component registry
│ └── store.ts # Global state
├── docs/ # Documentation
├── public/ # Static assets
└── package.json
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 14 | SSR, routing, optimization |
| Language | TypeScript | Type safety, DX |
| Styling | Tailwind CSS | Utility-first styling |
| Animation | Framer Motion | Fluid animations |
| Charts | Recharts | Data visualization |
| Icons | Lucide React | Consistent iconography |
| State | Zustand | Lightweight state management |
| AI | Tambo SDK | Generative UI engine |
| Hosting | Vercel | Edge deployment |
# Run development server
npm run dev
# Type checking
npm run type-check
# Linting
npm run lint
# Build for production
npm run build
# Start production server
npm start- Project setup with Next.js 14 + TypeScript
- Documentation (Architecture, Components, Design System)
- Premium glassmorphism design system
- 8 generative UI components
- Tambo AI integration
- Advanced Voice Control 🎙️
- Interactable Components (Two-way AI Sync)
↔️ - AI Agent Tools (Web Search & Time Awareness) 🛠️
- Error boundaries & accessibility
- Responsive design
- Deployment to Vercel
- User authentication & accounts
- Workspace persistence (save/load)
- Component drag-and-drop reordering
- Global keyboard shortcuts
- Dark/light theme toggle
- Real-time collaboration
- API integrations (Google Calendar, Notion, Slack)
- Custom component builder
- Mobile app (React Native)
- Enterprise features
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Canvas AI showcases the complete power of Tambo SDK with cutting-edge MCP integrations:
Complete Tambo Coverage:
- ✅ 10 Generative Components
- ✅ 4 Interactable Components (bi-directional sync)
- ✅ 11 AI Tools (including MCP)
- ✅ Voice Input + Thread Management
- ✅ 4 MCP Integrations (GitHub + File System)
- ✅ 3 Real APIs (Weather, Search, GitHub)
Production Quality:
- ✅ TypeScript strict + Zod validation
- ✅ 0 build errors
- ✅ Complete documentation (5 MD files)
- ✅ Responsive + Accessible
→ Full submission details: HACKATHON.md
- Tambo — For the incredible Generative UI SDK
- WeMakeDevs — For hosting "The UI Strikes Back" hackathon
- Vercel — For seamless deployment
Built with 💜 by Prakhar
The future of interfaces is generative. The future is Canvas AI.