看板任务管理平台

一个功能全面的看板任务管理平台,集成了模型上下文协议(MCP)服务器,允许AI编程代理以编程方式管理项目和任务。

  • by 0xdzik
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 dzikrihilman/kanban-mcp

使用说明

看板MCP

阅读 中文

功能齐全的看板,集成 模型上下文协议(MCP) 服务器,允许AI编码代理以编程方式管理项目和任务。

目录

技术栈

层 技术
框架 Next.js 16(应用路由器)
语言 TypeScript
数据库 SQLite+Drizzle ORM
UI shadcn/UI+顺风CSS v4
State Zustand
拖放 @dnd工具包
MCP @modelcontextprotocol/sdk

特性

  • 用看板图 --在待办事项、待办事项、进行中、审阅中、完成中拖放任务
  • 仪表板 --总结卡、圆环图(状态/优先级)、14天趋势条形图、项目细分
  • 子任务 --带有进度条的清单式子任务
  • 标签 --每个项目的自定义颜色标签
  • 评论 --任务上带有时间戳的评论线程
  • 活动日志 --任务更改的完整历史记录
  • 搜索和筛选 --实时搜索+机载优先级过滤器
  • CSV导出 --导出所有任务或每个项目
  • 深色模式 --默认启用
  • MCP 服务器 --13个工具+4个资源用于AI代理集成

入门指南

先决条件

  • Node.js 18+
  • npm

安装

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

数据库设置

npm run db:generate
npm run db:migrate

运行开发服务器

npm run dev

打开 http://localhost:3000.

MCP 服务器

MCP服务器将项目和任务管理作为AI编码代理(Claude、Cursor、Windsurf等)的工具公开。

可用工具

工具 说明
list_projects 列出所有具有任务计数的项目
get_project 获取项目详细信息
create_project 创建新项目
update_project 更新项目字段
delete_project 删除项目和所有任务
list_tasks 列出任务(按状态/优先级筛选)
get_task 获取带有评论的任务
create_task 创建包含所有字段的任务
update_task 使用活动日志更新任务
delete_task 删除任务
move_task 在列之间移动任务
add_comment 向任务添加评论
search_tasks 按关键字搜索
get_dashboard_summary 完整的仪表板统计信息

可用资源

URI 描述
kanban://projects 所有项目
kanban://project/{id} 项目详情
kanban://project/{id}/tasks 项目任务
kanban://task/{id} 带有评论的任务

独立运行MCP服务器

npm run mcp:start

配置MCP客户端

将以下内容添加到MCP客户端配置中:

Claude 桌面版 (claude_desktop_config.json):

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

光标/风帆/反重力 (mcp_config.json):

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

替换 /absolute/path/to/kanban-mcp 了解项目的实际路径。

用法示例

配置后,您的AI代理可以:

"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"

脚本

脚本 描述
npm run dev 启动Next.js开发服务器
npm run build 生产建设
npm run start 启动生产服务器
npm run mcp:start 启动MCP服务器(stdio)
npm run db:generate 生成毛毛雨迁移
npm run db:migrate 运行数据库迁移

项目结构

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代理集成

为了让你的AI代理使用看板MCP自动跟踪每个开发任务,你可以添加一个系统提示和/或将其作为一项技能进行安装。

系统提示

从以下位置添加系统提示 docs/SYSTEM_PROMPT.md 到您的AI代理配置。这指示代理:

  • 在开始任何工作之前自动创建任务
  • 随着工作的进展更新任务状态
  • 添加评论以记录技术决策
  • 将复杂的工作分解为子任务
  • 使用一致的标题格式([Feature], [Fix], [Refactor], [Docs], [Test])

有关Claude Desktop、Cursor、Windsurf和Antigravity的设置说明,请参阅文件。

技能(反重力)

复制 docs/SKILL.md 到您的反重力技能文件夹:

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

一旦安装,代理将在检测到以下关键字时自动激活该技能 task, project, kanban, track, progress, todo,或 backlog.

看 docs/SKILL.md 以获取完整的工作流参考和规则。

许可证

麻省理工学院