使用说明
MCP控制面板
用作MCP服务器的交互式仪表板。Claude Code（或任何MCP客户端）调用工具来实时创建工作区、小部件和工件。浏览器通过Socket.io实时呈现所有内容。
Claude Code --stdio--> MCP Server (Node.js) --Socket.io--> Browser Dashboard
| (React 19)
Express HTTP (0.0.0.0)
SQLite (better-sqlite3)
快速开始
npm install
npm run build:all
npm start
# Dashboard at http://localhost:4800
发展：
npm run dev # Server + Client in parallel
MCP设置
添加到您的Claude代码配置中(~/.claude.json 或 .mcp.json):
{
"mcpServers": {
"mcp-dashboard": {
"type": "stdio",
"command": "node",
"args": ["/path/to/mcp-dashboard/dist/index.js"],
"env": { "DASHBOARD_PORT": "4800" }
}
}
}
18个MCP工具
工作区
| 工具 | 说明 |
|---|---|
dashboard_create_workspace |
创建工作区（名称、描述、图标） |
dashboard_list_workspaces |
列出所有包含小部件计数的工作区 |
dashboard_delete_workspace |
删除工作区及其所有小部件 |
小部件
| 工具 | 说明 |
|---|---|
dashboard_create_widget |
在工作区中创建小部件 |
dashboard_update_widget |
更新小部件数据、标题或配置 |
dashboard_push_data |
推送增量数据（附加行、点等） |
dashboard_delete_widget |
删除小部件 |
dashboard_list_widgets |
列出工作区中的小部件 |
任务和提醒
| 工具 | 说明 |
|---|---|
dashboard_add_task |
将任务添加到工作区 |
dashboard_list_tasks |
列出任务 |
dashboard_complete_task |
切换任务完成 |
dashboard_add_reminder |
添加带有可选截止日期的提醒 |
dashboard_list_reminders |
列出提醒 |
dashboard_complete_reminder |
切换提醒完成 |
亮点和实用程序
| 工具 | 说明 |
|---|---|
dashboard_pin_widget |
将小部件固定/取消固定为高亮显示 |
dashboard_snapshot |
将工作区状态快照为工件 |
dashboard_notify |
向仪表板发送吐司通知 |
dashboard_report_activity |
记录其他服务器的MCP活动 |
15种小部件类型
| 类型 | 描述 | 流媒体 |
|---|---|---|
metric_card |
带有趋势和火花线的单一KPI | 是 |
line_chart |
时间序列（Recharts） | 是 |
bar_chart |
类别比较 | 是 |
pie_chart |
分布圆环图 | 否 |
table |
可排序分页数据表 | 是 |
markdown |
带GFM表的富文本 | 否 |
json_viewer |
可折叠JSON树 | 否 |
code_block |
语法突出显示的代码 | 否 |
terminal |
流命令输出 | 是 |
timeline |
按时间顺序排列的事件 | 是 |
progress_tracker |
任务进度与整体进度条 | 是 |
geometry |
用于视觉表达的SVG艺术画布 | 否 |
links |
使用自动图标收藏书签 | 是 |
project |
项目中心：repos、Slack、Notion、工作区链接 | 否 |
workspace_ref |
卡片引用了另一个工作区 | 否 |
section |
全宽分隔符/标题 | 否 |
数据格式
每种小部件类型都有一个特定的数据模式。MCP工具说明包括所有格式。示例：
// Metric Card
{ value: 158000, label: "Revenue", unit: "$", trend: { direction: "up", percentage: 12.5 }, sparkline: [120, 135, 155, 158] }
// Bar Chart
{ categories: ["North", "South", "East"], series: [{ name: "Q1", values: [42000, 35000, 28000], color: "#60a5fa" }] }
// Line Chart
{ series: [{ name: "Revenue", data: [{ timestamp: "2026-01", value: 45000 }], color: "#60a5fa" }] }
// Table
{ columns: [{ key: "name", label: "Name", sortable: true }], rows: [{ name: "Acme Corp" }] }
// Project
{ name: "Tables", status: "active", repos: [{ name: "tables-sdk", url: "https://...", language: "TypeScript" }], channels: [{ name: "dev", type: "slack" }], notion: [{ title: "Docs", url: "https://...", type: "database" }], workspaceId: "xxx" }
// Geometry (SVG art)
{ svg: "<circle cx='200' cy='200' r='50' fill='#60a5fa'/>", viewBox: "0 0 400 400" }
特性
- 实时：Socket.io桥将更新即时推送到所有连接的浏览器
- 多实例：多个Claude Code会话共享同一仪表板。第一个实例拥有HTTP，其他实例通过API中继
- 拖动并调整大小：使用拖动控制柄反应网格布局并调整大小
- 亮点：将任何小部件固定到顶部的特色行
- 任务和提醒：每个工作区的待办事项列表和带截止日期的提醒
- 档案：工作区可以存档和恢复
- 扩展：单击任何小部件标题以全屏查看
- 标记语言：完全支持GFM，可扩展到页面
- PDF导出：一键式工作区导出为PDF
- 局域网共享：在本地网络上共享工作区URL
- 活动栏：显示MCP活动流和逾期提醒
- 工作区参考：链接到其他工作区的元仪表板
- 深色主题：具有神经网格、扫描线和环境光的未来人工智能美学
技术栈
服务器：Node.js 20、TypeScript、@modelcontextprotocol/sdk、Express 5、Socket.io 4、better-sqlite3、Zod
客户：React 19、Vite 6、TailwindCSS 4.1、Recharts、React网格布局、Zustand、Lucide图标、html2canvas pro、jsPDF
许可证
麻省理工学院
