AI导哈

看板应用开发套件

一个功能全面的看板应用开发套件，展示了@mcp-apps-kit SDK的所有功能，适用于团队协作和任务管理。

  • by AndurilCode
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 AndurilCode/kanban-mcp-example

使用说明

看板示例

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

演示SDK功能

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

特性 描述 代码示例
工具定义 使用Zod模式的类型安全工具定义 所有工具都使用 z.object() 用于输入/输出
工具注释 AI模型的行为提示 readOnlyHint, destructiveHint, openWorldHint, idempotentHint
工具上下文 处理程序中客户端提供的元数据 context.locale, context.userLocation, context.subject, context.widgetSessionId
fileParams 启用文件上传参数 createTask 工具与 fileParams: ["attachmentId"]
widgetDescription 人工智能可读摘要 UI资源 widgetDescription
ClientToolsFromCore 端到端类型化UI客户端 UI导入 KanbanClientTools （从 ClientToolsFromCore<typeof app.tools>)
_文本 面向输出的人性化模型 返回的工具 message 还设置 _text: message
_closeWidget 操作后关闭小部件 clearCompleted 工具返回 _closeWidget: true
可见性 控制谁可以调用工具 "model", "app", "both"
widgetAccessible 允许小部件调用工具 所有仅小部件的工具
invoking消息 正在加载状态消息 createTask, deleteTask等等。
标题 人类可读的工具标题 所有工具都有 title 财产

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

钩子 描述 在应用程序中的使用
使用应用程序客户端 用于工具调用的访问型客户端 主工具调用界面
使用工具输入 访问初始工具输入 调试面板显示
useHostContext 访问主题、视口、区域设置 主题和上下文显示
useWidgetState 跨重新加载保持状态 崩溃的列，调试面板
使用主机样式变量 应用宿主CSS变量 应用于应用程序组件
使用文档主题 将主题类应用于文档 亮/暗模式
使用显示模式 访问/更改显示模式 调试面板显示
使用安全区域插件 移动安全区衬垫 集装箱衬垫
useOnTool已取消 处理工具取消 取消消息
使用拆卸 小部件拆卸时的清理 控制台日志记录
使用文件上传 上传文件（ChatGPT） 任务附件
使用IntrinsicHeight 报告小部件高度 自动高度容器
使用视图 访问视图标识符 调试面板显示
使用模态 主机拥有的模态对话框 删除确认

快速开始

# 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.

可用工具

工具 描述 使用的功能
listTasks 列出所有任务（可选筛选器） readOnlyHint, idempotentHint, visibility: "app"
createTask 创建带有附件的任务 fileParams, invokingMessage
moveTask 在列之间移动任务 idempotentHint
updateTask 更新任务详细信息 小部件可访问
deleteTask 删除任务 destructiveHint
clearCompleted 明确已完成的任务 _closeWidget
exportBoard 导出板数据 openWorldHint
getBoardSummary 获取董事会概述 ui: "kanban-board"

示例用法

创建带有附件的任务

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

相关 MCP