Kanban MCP Example

看板示例

一个全面的看板应用程序，展示了 @mcp-apps-kit SDK。

演示SDK功能

服务器端功能(@mcp-apps-kit/core)

客户端功能(@mcp-apps-kit/ui-react)

快速开始

# Install dependencies
npm install

# Start both server and UI dev mode
npm run dev

# Or start individually
npm run dev:server  # Server only
npm run dev:ui      # UI dev server only

# Build for production
npm run build

服务器启动于 http://localhost:3001.

可用工具

示例用法

创建带有附件的任务

{
  "tool": "createTask",
  "arguments": {
    "title": "Review document",
    "description": "Review the attached document",
    "attachmentId": "file-abc123"
  }
}

清除已完成的任务并关闭小部件

{
  "tool": "clearCompleted",
  "arguments": {
    "closeWidget": true
  }
}

CSV格式的导出板

{
  "tool": "exportBoard",
  "arguments": {
    "format": "csv",
    "includeMetadata": false
  }
}

UI功能

调试面板

点击🔧 按钮打开SDK功能状态面板，显示：

• 主机上下文（主题、平台、区域设置、视口）
• 显示模式和可用模式
• 安全区插图
• 平台功能支持（文件上传、模态、固有高度）
• 当前视图标识符
• 工具输入

持续偏好

以下首选项将使用 useWidgetState:

• 折叠列（单击列标题进行切换）
• 调试面板可见性

模态对话框

在支持的平台（ChatGPT）上，删除确认通过使用本机主机模式 useModal.回落到 confirm() 在其他平台上。

文件附件

在支持的平台（ChatGPT）上，添加任务模式包括一个文件上传选项，使用 useFileUpload.

项目结构

kanban-mcp-example/
├── api/
│   └── index.ts           # Vercel serverless function
├── public/
│   └── index.html         # Built UI output
├── src/
│   ├── index.ts           # Server with all SDK features
│   └── ui/
│       ├── App.tsx        # React app with all hooks
│       ├── main.tsx       # Entry point with AppsProvider
│       ├── index.html     # HTML template
│       └── styles.css     # Comprehensive styling
├── package.json
├── tsconfig.json
├── tsup.config.ts
├── vercel.json
└── vite.config.ts

Claude桌面配置

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

切换协议

// In src/index.ts
config: {
  protocol: "openai",  // Change from "mcp" to "openai"
}

发展

# Type checking
npm run typecheck

# Build UI
npm run build:ui

# Build server
npm run build:server

# Build everything
npm run build

部署

此项目已配置为在Vercel上部署：

# Deploy preview
vercel

# Deploy to production
vercel --prod