使用说明
看板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
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 以获取完整的工作流参考和规则。
许可证
麻省理工学院
