Kanban AI 🤖

Transform your side projects from ideas to reality with AI-assisted project management.

Kanban AI is your personal AI-powered project companion that helps you build, track, and complete your side projects with intelligent guidance. Whether you're a developer looking to showcase new skills, an entrepreneur building your next SaaS, or a creator bringing ideas to life, Kanban AI provides the structure and support you need.

Key Features

AI-Powered Project Planning

• Smart Project Breakdown: Describe your idea and let AI create a comprehensive 10-week development plan
• Personalized Roadmaps: Tailored to your skills, tech stack, and learning goals
• Intelligent Task Generation: AI creates specific, actionable tasks for each development phase

Intelligent Progress Tracking

• Adaptive Planning: AI adjusts your roadmap based on your actual progress
• Smart Recommendations: Get personalized suggestions when you're ahead or behind schedule
• Progress Analytics: Visual insights into your development journey

Modern Kanban Interface

• Drag-and-Drop Management: Intuitive task organization with visual kanban boards
• Project members: Invite editors by email; shared boards sync through Supabase
• Real-time Updates: Seamless collaboration and progress tracking
• Dark/Light Mode: Beautiful interface that adapts to your preferences

AI Assistant Integration

• Contextual Guidance: Ask questions and get project-specific advice
• Roadblock Resolution: AI helps you overcome technical challenges
• Learning Support: Get explanations and resources for new technologies

Getting Started

Requirements: Node.js 18+, npm, and an OpenAI API key if you want AI features.

Run locally (recommended for contributors)

One SQLite database under .local/ (gitignored), no Supabase account, no sign-in. The app talks to a small local API on port 3000; Vite proxies /api there (frontend/vite.config.ts).

git clone https://github.com/orholam/kanban_ai.git
cd kanban_ai/frontend
npm install
cp env.local.example .env.local

Edit .env.local: set OPENAI_API_KEY to your key. Leave VITE_LOCAL_MODE=true as in the example.

npm run dev:local

Open http://localhost:5173.

• Do not put OPENAI_API_KEY behind the VITE_ prefix (that would ship it to the browser). The dev server reads it from .env.local.
• First run applies frontend/scripts/local-schema.sql. Account, hosted analytics, and in-app feedback are disabled in this mode (they need Supabase).
• Project members (local): open a board → Members in the header. Invite collaborator@dev.invalid to test sharing (seeded in the local schema).

Supabase + Vercel-style API (production-like)

Use this when you need real auth and cloud data.

1. In frontend/.env.local (or .env): VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, and VITE_LOCAL_MODE removed or not true.
2. Same OPENAI_API_KEY as above for /api/openai.
3. Two terminals from frontend/: npx vercel dev --listen 3000 then npm start. UI: http://localhost:5173.

Deploying on Vercel

Add OPENAI_API_KEY in the Vercel project’s Environment Variables (Production and Preview as needed). The frontend/api/openai.ts handler reads it at runtime; no OpenAI key belongs in client env vars.

The app uses code-splitting; frontend/vercel.json sets long-lived caching for hashed /assets/* files and revalidation for HTML responses so open tabs pick up a fresh index.html after deploys. Lazy routes also retry once with a reload if a chunk fails to load (stale shell).

SEO prerender: npm run build in frontend/ runs a post-build Puppeteer step that snapshots public marketing routes (/, /blog, /blog/*, /docs, /docs/*, /login, etc.) into route-specific index.html files under dist/, so search engines receive full page HTML without executing JavaScript. Skip with SKIP_PRERENDER=1 or use npm run build:no-prerender for a faster local build only.

Landing page A/B test

The home page randomly assigns variant A or B (persisted in localStorage). Preview either layout with /?variant=A or /?variant=B. Site owners compare CTA performance under Analytics → Landing page A/B test. When you change landing copy or layout, bump LANDING_AB_TEST_VERSION in frontend/src/lib/landingAbTest.ts so metrics stay comparable. See the documentation article for details.

MCP server (Claude, Cursor, other AI tools)

Kanban AI exposes a remote MCP server at /api/mcp on your Vercel deployment. It talks directly to Supabase with the same board operations as the web app (projects, tasks, comments).

Discovery manifest: /.well-known/mcp-server — machine-readable metadata per draft-serra-mcp-discovery-uri (endpoint, auth, tools preview, setup links).

Vercel environment variables (Production + Preview):

End-user setup: sign in and open Connect AI (/connect). The app generates a ready-to-paste MCP config (token + API secret filled in server-side). Copy once, paste into Cursor or Claude Desktop, restart.

Operator setup: set MCP_API_SECRET on Vercel. Authenticated users fetch full config from GET /api/mcp-setup with their session bearer token.

Client auth: each MCP request must include:

1. X-MCP-API-Key: <MCP_API_SECRET> (when configured on the deployment)
2. Authorization: Bearer <supabase_access_token> — the signed-in user's Supabase session access token

Cursor / Claude Desktop — use the JSON from /connect instead of hand-editing placeholders:

{
  "mcpServers": {
    "kanban-ai": {
      "url": "https://your-deployment.vercel.app/api/mcp",
      "headers": {
        "X-MCP-API-Key": "...",
        "Authorization": "Bearer ..."
      }
    }
  }
}

For stdio-only clients, the Connect page provides a Claude Desktop JSON block using mcp-remote:

{
  "mcpServers": {
    "kanban-ai": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://your-deployment.vercel.app/api/mcp", "--header", "X-MCP-API-Key:your-secret", "--header", "Authorization:Bearer your-token"]
    }
  }
}

Available tools: list_projects, get_board, create_project, update_project, delete_project, create_task, update_task, delete_task, list_task_comments, add_task_comment, delete_task_comment.

Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS
• Backend: Supabase (PostgreSQL, Auth, Real-time)
• AI Integration: OpenAI GPT-4
• State Management: React Context + Hooks
• Routing: React Router v6
• UI Components: Lucide React Icons
• Deployment: Vercel

Owner: product analytics & landing A/B

The owner-only /analytics view includes landing page A/B results. Bump LANDING_AB_TEST_VERSION in frontend/src/lib/landingAbTest.ts whenever you materially change variant A or B so new traffic is tagged separately and the dashboard does not blend runs.

For variant B, logged-out visitors on / use a self-contained marketing header (the global app header is hidden so the layout can match the ClickUp-style hero). Variant A still uses the shared header.

Project Structure

frontend/
├── src/
│   ├── components/          # Reusable UI components
│   ├── pages/              # Page components
│   ├── contexts/           # React contexts
│   ├── lib/                # Utility libraries
│   ├── types/              # TypeScript type definitions
│   ├── api/                # API integration
│   └── assets/             # Static assets
├── public/                 # Public assets
└── package.json

Use Cases

For Developers

• Skill Showcase: Build projects that demonstrate new technologies
• Portfolio Enhancement: Create impressive side projects for your resume
• Learning Path: Structured approach to mastering new frameworks

For Entrepreneurs

• MVP Development: Rapidly prototype and validate business ideas
• Product Roadmap: AI-guided development planning
• Market Testing: Build and iterate quickly

For Creators

• Project Organization: Keep creative projects on track
• Goal Achievement: Break down complex projects into manageable tasks
• Progress Visualization: See your creative journey unfold

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• Documentation: https://kanbanai.dev/docs

• Issues: GitHub Issues

• Discussions: GitHub Discussions

• Hosted on Vercel for lightning-fast performance

• Styled with Tailwind CSS for beautiful, responsive design