Nextjs Django Kanban MCP

看板MCP——Next.js·Django·GraphQL

任务管理应用程序具有拖放式看板板、Eisenhower优先级矩阵、GraphQL API和用于Claude AI集成的MCP服务器。

堆栈： Next.js 15、Django 4.2、TypeScript、Material UI、Apollo客户端、Ariadne（GraphQL）

  ](https://nodejs.org) 

注： 这是一个概念验证/MVP项目，展示了现代全栈开发。在Claude Code的协助下建造。

截图

Kanban Board Eisenhower Matrix

🔍 View full size

🔍 View full size

Claude Desktop (MCP Client)

🔍 View full size

目录

1.快速入门

# Recommended: Using Makefile
make setup      # First-time setup (creates .env, builds containers, runs migrations)
make up         # Start services

# Or with Docker directly
docker-compose up --build

# Or run services separately (without Docker)
cd backend && pip install -r requirements.txt && python manage.py migrate && python manage.py runserver
cd frontend && npm install && npm run dev

• 前端：http://localhost:3000
• GraphQL API：http://localhost:8000/graphql

视窗：需要 WSL2 或 choco install make 对于Makefile命令

2.特点

使用看板和艾森豪威尔矩阵进行双视图任务管理，具有拖放界面、基于优先级的工作流程和通过MCP服务器集成Claude AI的特点。

📋 Task Management

• 双视图模式：看板+艾森豪威尔矩阵
• 优先级系统（P1-P4）：先做→ 日程→ 快赢→ 待办事项
• 状态工作流：TODO→ 做→ 等待→ DONE
• 带#前缀的类别标记（#前端、#后端等）
• 在列和优先级象限之间拖放

🔍 Filtering & Search

• 在两个视图中按优先级（P1-P4）筛选
• 在两个视图中按状态（待办、正在进行、等待、完成）筛选
• 通过多选按类别筛选
• 在标题、描述和类别之间进行全文搜索

🤖 AI Integration

• 用于Claude Desktop集成的MCP（模型上下文协议）服务器
• 通过Claude AI进行自然语言任务管理
• 基于FastMCP的GraphQL协调实现

3.MCP服务器集成

通过任何方式管理任务 MCP兼容客户端 （克劳德桌面、光标等）。

工具： list_tasks · create_task · update_task · delete_task

Claude Desktop config example

{
  "mcpServers": {
    "kanban": {
      "command": "python",
      "args": ["-m", "integrations.mcp.server"],
      "cwd": "/absolute/path/to/backend"
    }
  }
}

看 backend/integrations/mcp/README.md HTTP部署选项。

4.建筑

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#fff', 'primaryTextColor': '#1e293b', 'primaryBorderColor': '#e2e8f0', 'lineColor': '#64748b', 'secondaryColor': '#f8fafc', 'tertiaryColor': '#f1f5f9'}}}%%
graph TB
    subgraph Presentation["🎨 Presentation Layer"]
        Browser["🌐 Web Browser"]
        Claude["🤖 Claude Desktop"]
    end

    subgraph Application["⚙️ Application Layer (Docker)"]
        subgraph Frontend["Frontend Container"]
            NextApp["Next.js
Apollo · Material UI"]
        end

        subgraph Backend["Backend Container"]
            GraphQL["GraphQL API
Ariadne"]
            MCPServer["MCP Server
FastMCP"]
            RootSchema["Root Schema
Query + Mutation"]
        end
    end

    subgraph Domain["🧩 Domain Layer"]
        CoreApp["Core App
Shared Base"]
        KanbanApp["Kanban App
Task Model"]
    end

    subgraph Infrastructure["🗄️ Infrastructure Layer"]
        ORM["Django ORM"]
        DB[("SQLite")]
    end

    %% Connections
    Browser -->|"HTTP"| NextApp
    NextApp -->|"GraphQL"| GraphQL
    Claude -->|"MCP"| MCPServer

    GraphQL --> RootSchema
    RootSchema -.->|"schema composition"| KanbanApp
    MCPServer --> KanbanApp
    KanbanApp -.->|"extends"| CoreApp

    KanbanApp --> ORM
    CoreApp --> ORM
    ORM --> DB

    %% Styling
    style Browser fill:#ede9fe,stroke:#8b5cf6,color:#5b21b6,stroke-width:2px
    style Claude fill:#ede9fe,stroke:#8b5cf6,color:#5b21b6,stroke-width:2px
    style NextApp fill:#fef3c7,stroke:#f59e0b,color:#92400e,stroke-width:2px
    style GraphQL fill:#d1fae5,stroke:#10b981,color:#065f46,stroke-width:2px
    style MCPServer fill:#d1fae5,stroke:#10b981,color:#065f46,stroke-width:2px
    style RootSchema fill:#d1fae5,stroke:#10b981,color:#065f46
    style CoreApp fill:#fecaca,stroke:#ef4444,color:#991b1b
    style KanbanApp fill:#fecaca,stroke:#ef4444,color:#991b1b,stroke-width:2px
    style ORM fill:#dbeafe,stroke:#3b82f6,color:#1e40af,stroke-width:2px
    style DB fill:#dbeafe,stroke:#3b82f6,color:#1e40af,stroke-width:2px

    style Presentation fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
    style Application fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
    style Frontend fill:#fffbeb,stroke:#f59e0b,stroke-dasharray:5 5
    style Backend fill:#ecfdf5,stroke:#10b981,stroke-dasharray:5 5
    style Domain fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
    style Infrastructure fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px

分层架构： 演示文稿（客户）→ 应用程序（API）→ 域（业务逻辑）→ 基础设施（数据）。一个后端有两个接口：浏览器通过GraphQL进行模式组合，Claude通过MCP进行直接模型访问。

5.技术栈

类别	技术
基础设施
人工智能集成

6.项目结构

后端（Django）

backend/
├── apps/
│   ├── core/                  # Shared base models (TimeStampedModel)
│   └── kanban/                # Kanban feature app
│       ├── models.py          # Task model
│       ├── graphql/           # Ariadne GraphQL (schema-first)
│       │   ├── schema.graphql # SDL schema (source of truth)
│       │   ├── types.py       # Scalar + enum bindings
│       │   ├── queries.py     # allTasks resolver
│       │   └── mutations.py   # CRUD resolvers
│       ├── tests/             # Model + API tests
│       └── management/        # seed_tasks command
├── config/                    # Project configuration
│   ├── settings.py            # Django settings
│   ├── urls.py                # URL routing (/graphql)
│   └── schema.py              # Root GraphQL schema
├── integrations/mcp/          # MCP server for Claude AI
├── scripts/                   # Utility scripts
└── tests/                     # Integration tests

前端（Next.js）

frontend/src/
├── app/                       # Next.js App Router (layout, pages)
├── components/
│   └── kanban/                # Kanban feature module
│       ├── config/            # Column & priority configs
│       ├── hooks/             # Custom hooks (useTaskDialog)
│       ├── Task/              # TaskCard, TaskDialog
│       ├── Board.tsx          # Main orchestrator
│       ├── KanbanColumn.tsx   # Column with drag-drop
│       ├── FilterBar.tsx      # Filters + view toggle
│       ├── EisenhowerMatrix.tsx
│       └── types.ts           # Shared types & enums
├── graphql/                   # Apollo Client layer
│   ├── ApolloWrapper.tsx      # Apollo Client provider
│   ├── generated.ts           # Auto-generated types (Codegen)
│   ├── queries.ts             # GraphQL queries
│   └── mutations.ts           # GraphQL mutations
└── theme/                     # Material UI theme

根

├── docker-compose.yml         # Services orchestration
├── Makefile                   # Development shortcuts
└── .pre-commit-config.yaml    # Code quality hooks

7.发展

GraphQL游乐场: http://localhost:8000/graphql--查询、创建、更新、删除任务。

视窗：使用 WSL2 或 choco install make

8.测试

测试奖杯 方法——优先考虑集成测试，以最小的维护获得最大的置信度。

make test       # Run all tests (unit + integration + e2e)
make check      # Full CI validation

9.预提交钩子

每次提交前自动进行代码质量检查。

pip install pre-commit && pre-commit install   # Setup (one-time)
make precommit                                  # Run manually
make lint                                       # Auto-fix issues

10.持续集成和部署

自动质量门通过并行验证和分阶段部署确保代码质量和部署安全。

graph LR
    A[💾 Commit] --> B[🔍 CI Pipeline]
    B --> C{Quality Gates}
    C -->|Lint| D[✓ Backend Ruff]
    C -->|Lint| E[✓ Frontend ESLint]
    C -->|Test| F[✓ Django Tests]
    C -->|Test| G[✓ Jest Tests]
    C -->|E2E| P[✓ Playwright]
    C -->|Build| H[✓ Docker Images]
    D --> I[🏗️ Build Artifacts]
    E --> I
    F --> I
    G --> I
    P --> I
    H --> I
    I --> J[🚀 Deploy Staging]
    J --> K[👤 Manual Approval]
    K --> L[🌐 Production]

    style A fill:#e1f5ff,stroke:#01579b
    style B fill:#fff9c4,stroke:#f57f17
    style C fill:#fff3e0,stroke:#e65100
    style I fill:#e8f5e9,stroke:#2e7d32
    style J fill:#f3e5f5,stroke:#4a148c
    style L fill:#c8e6c9,stroke:#1b5e20

质量验证： 后端/前端linting、单元测试、E2E测试（Playwright）、TypeScript检查、Docker构建 部署： 暂存自动部署→ 手动生产批准和健康检查

11.部署

部署功能：

• 自动化CI/CD流水线(.github/workflows/)
• 带有健康检查的Docker多阶段构建
• 基于环境的配置（12因素应用程序）

部署到：

• 云：AWS ECS、GCP云运行、Azure容器实例
• 平台即服务：Vercel（前端）+渲染/铁路（后端）
• 自托管：Docker使用Nginx反向代理编写

# Production build
docker-compose -f docker-compose.prod.yml up --build

12.许可证

MIT许可证