Kanban MCP

Baca dalam Bahasa Indonesia

A full-featured Kanban board with integrated Model Context Protocol (MCP) server, allowing AI coding agents to manage projects and tasks programmatically.

Table of Contents

• Tech Stack
• Features
• Getting Started
• MCP Server
  • Available Tools
  • Available Resources
  • Run MCP Server Standalone
  • Configure MCP Client
  • Usage Example
• Scripts
• Project Structure
• AI Agent Integration
  • System Prompt
  • Skill (Antigravity)
• License

Tech Stack

Features

• Kanban Board — Drag-and-drop tasks across Backlog, Todo, In Progress, In Review, Done
• Dashboard — Summary cards, donut charts (status/priority), 14-day trend bar chart, project breakdown
• Sub-tasks — Checklist-style sub-tasks with progress bar
• Labels — Custom color labels per project
• Comments — Timestamped comment threads on tasks
• Activity Log — Full history of task changes
• Search & Filter — Real-time search + priority filter on board
• CSV Export — Export all tasks or per-project
• Dark Mode — Enabled by default
• MCP Server — 13 tools + 4 resources for AI agent integration

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

git clone https://github.com/dzikrihilman/kanban-mcp.git
cd kanban-mcp
npm install

Database Setup

npm run db:generate
npm run db:migrate

Run Development Server

npm run dev

Open http://localhost:3000.

MCP Server

The MCP server exposes project and task management as tools for AI coding agents (Claude, Cursor, Windsurf, etc).

Available Tools

Available Resources

Run MCP Server Standalone

npm run mcp:start

Configure MCP Client

Add the following to your MCP client configuration:

Claude Desktop (claude_desktop_config.json):

{
  "mcpServers": {
    "kanban-mcp": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/kanban-mcp/src/mcp-server/index.ts"]
    }
  }
}

Cursor / Windsurf / Antigravity (mcp_config.json):

{
  "mcpServers": {
    "kanban-mcp": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/kanban-mcp/src/mcp-server/index.ts"]
    }
  }
}

Replace /absolute/path/to/kanban-mcp with the actual path to your project.

Usage Example

Once configured, your AI agent can:

"Create a new project called 'My App' and add 3 tasks to it"
"Move task X to in_progress"
"Show me the dashboard summary"
"Export all tasks as CSV"

Scripts

Project Structure

src/
├── app/
│   ├── api/              # API routes
│   │   ├── activity/     # Activity log
│   │   ├── analytics/    # Analytics data
│   │   ├── comments/     # Comments CRUD
│   │   ├── dashboard/    # Dashboard summary
│   │   ├── export/       # CSV export
│   │   ├── labels/       # Labels CRUD
│   │   ├── projects/     # Projects CRUD
│   │   ├── task-labels/  # Task-label junction
│   │   └── tasks/        # Tasks CRUD + reorder
│   ├── projects/[id]/    # Kanban board page
│   └── page.tsx          # Dashboard page
├── components/
│   ├── charts/           # DonutChart, MiniBarChart
│   ├── dashboard/        # DashboardView
│   ├── kanban/           # Board, Column, Card, FilterBar, etc.
│   ├── layout/           # AppSidebar
│   └── ui/               # shadcn/ui components
├── hooks/
│   └── useKanbanStore.ts # Zustand store
├── lib/db/
│   ├── schema.ts         # Drizzle schema
│   ├── index.ts          # DB client
│   └── migrate.ts        # Migration runner
├── mcp-server/
│   ├── index.ts          # MCP server (13 tools, 4 resources)
│   └── db-client.ts      # Standalone DB client for MCP
└── types/
    └── index.ts          # Shared types

AI Agent Integration

To make your AI agent automatically track every development task using Kanban MCP, you can add a system prompt and/or install it as a skill.

System Prompt

Add the system prompt from docs/SYSTEM_PROMPT.md to your AI agent configuration. This instructs the agent to:

• Automatically create tasks before starting any work
• Update task status as work progresses
• Add comments to document technical decisions
• Break complex work into sub-tasks
• Use consistent title formats ([Feature], [Fix], [Refactor], [Docs], [Test])

See the file for setup instructions for Claude Desktop, Cursor, Windsurf, and Antigravity.

Skill (Antigravity)

Copy docs/SKILL.md to your Antigravity skills folder:

mkdir -p ~/.gemini/antigravity/skills/kanban-mcp
cp docs/SKILL.md ~/.gemini/antigravity/skills/kanban-mcp/SKILL.md

Once installed, the agent will automatically activate the skill when it detects keywords like task, project, kanban, track, progress, todo, or backlog.

See docs/SKILL.md for the full workflow reference and rules.

License

MIT