mcp-dashboards

MCP Dashboards

你的 AI 能聊数据，现在还能展示数据。

   
_{点击任意缩略图查看完整尺寸}

问题

我们用 AI 做各种事——分析、报告、策略。但当你真正想看清数据中的故事时，却只能把数字复制到电子表格里，再自己制作图表。对话中有洞见，数据可视化却在别处。

解决方案

MCP Dashboards 可在 AI 对话中直接呈现交互式图表、仪表板和 KPI 小组件。它提供 32 种图表工具，涵盖 45 种以上的图表子类型（柱状图支持堆叠和下钻，hero 有 11 种变体，流程图有 6 种节点类型和 5 种边样式等）、21 种主题、4 个可视化探索目录、实时轮询以及 PNG/PPT/A4 导出功能——全部由单个 MCP 服务提供。无需切换浏览器标签页，无需复制粘贴，也无需切换上下文。

适用范围

ChatGPT 和 claude.ai 需要托管在远程的端点（见下方的 Streamable HTTP 模式）；桌面客户端则会在本地启动服务。

重要

唯一的官方 npm 包是 mcp-dashboards，由本仓库发布。名称相似的软件包并非我们的产品：mcp-dashboards-shared 曾是恶意软件（参见 OSSF 公告 MAL-2026-4296，已于 2026 年 5 月由 npm 安全团队移除）。请仅安装 mcp-dashboards。

快速开始

Claude Desktop

将以下内容添加到你的 claude_desktop_config.json：

• Windows： %APPDATA%\Claude\claude_desktop_config.json
• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "dashboard": {
      "command": "npx",
      "args": ["-y", "mcp-dashboards", "--stdio"]
    }
  }
}

Claude Code / VS Code

claude mcp add dashboard -- npx -y mcp-dashboards --stdio

远程连接（Streamable HTTP）

npx mcp-dashboards
# Server starts on http://127.0.0.1:3001/mcp

默认绑定到 localhost。如果需要将其开放到网络，或允许来自非 localhost 来源的浏览器访问，请参阅配置。

支持的客户端

适用于任何兼容 MCP Apps 的客户端：Claude Desktop、Claude Web、VS Code（GitHub Copilot）、Goose、Postman、MCPJam。ChatGPT 支持正在逐步推出。

只需开口询问

无需学习 API。用日常语言描述你的需求：

• “按地区对比 Q1 和 Q2 的收入，并用柱状图展示”
• “用圆环图展示我的投资组合配置，并采用董事会议室主题”
• “构建一个包含月度销售 KPI 和趋势线的仪表板”
• “在世界地图上按国家展示网站流量”
• “实时跟踪 Bitcoin 价格，每 30 秒更新一次”
• “展示从注册到购买的转化漏斗”
• “用雷达图按业绩为团队排名”
• “将我的多 Agent 工作流绘制成流程图，并允许我逐步查看”

AI 会选择合适的工具、整理数据，并在对话中直接渲染图表。点击任意数据点，即可提出后续问题。

不知道从何开始？ 询问 “显示目录”——这会打开一个主仪表板，其中每个自定义维度都有一个实时可视化图块（图表对应真实柱状图，主题对应饼图，主视觉变体对应进度环，效果对应霓虹发光卡片）。点击任意图块，再点击 Ask，即可深入查看对应的子目录。

交互式图表，而非图片

每个图表都是直接在对话中渲染的交互式 HTML：

• 在对话中探索——悬停查看工具提示，点击进行选择（结果会反馈给 AI），通过面包屑导航逐层深入，在地图和热力图上滚动缩放，最高可放大 12 倍
• 可编辑流程图——拖动节点、多选、右键重命名，通过缩略导航图和节点列表进行导航，逐步播放流程，然后将布局同步回 AI 以保存
• 实时轮询——按定时器从任意 API 自动更新的实时图表
• 导出到任意位置——PPT（16:9 幻灯片）、A4（分页并智能分页）、PNG、CSV

主题

内置 21 种主题。将 theme 传递给任意工具。

可将 palette、typography（8 种选项：system、mono、professional、editorial、bold、techno、cyberpunk、luxury）和 effects（5 种预设：none、subtle、shimmer、neon、energetic）自由组合。

实时轮询

可从任意 API 自动更新的实时图表。实时图表通过 poll_http 轮询数据，该工具支持两种模式：

安全预设（经过身份验证的 API）

通过环境变量配置预设。凭据保留在服务端，不会出现在对话中。

{
  "mcpServers": {
    "dashboard": {
      "command": "npx",
      "args": ["-y", "mcp-dashboards", "--stdio"],
      "env": {
        "POLL_PRESET_T212_CASH_URL": "https://live.trading212.com/api/v0/equity/account/cash",
        "POLL_PRESET_T212_CASH_HEADERS": "{\"Authorization\": \"Bearer YOUR_API_KEY\"}"
      }
    }
  }
}

然后询问：“实时监控我的投资组合总额和盈亏” - AI 会使用 render_live_chart，并设置 pollArgs: { preset: "t212_cash" }。

命名方式： POLL_PRESET_<NAME>_URL 和 POLL_PRESET_<NAME>_HEADERS（JSON 对象）。

公共 URL（无需身份验证）

对于公共 API，直接使用 URL：

“显示每 30 秒更新一次的 Bitcoin 价格” - 使用 pollArgs: { url: "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd" }。

工作原理

基于 MCP Apps 构建。你要求 AI 将数据可视化，AI 会调用合适的工具，图表随即以内嵌形式显示在对话中。完全自包含——无需 CDN，也不会发出外部请求。

支持 MCP Apps（内嵌渲染）：Claude Desktop、VS Code Insiders + MCP Apps 扩展、Goose、Postman。

不支持 MCP Apps？ 没问题。每个图表响应还会附带一个可点击链接，可在浏览器中打开同一交互式图表：

• http://localhost:PORT/chart/{id} - 聊天中的可点击链接。由绑定到 127.0.0.1 的轻量级同机 HTTP 服务提供支持，并在首次预览请求时按需启动。
• file:///.../chart-{id}.html - 可持久保存和分享的文件。HTML 内容相同，会写入磁盘，因此可以通过电子邮件发送、存档，或在服务关闭后打开。

为什么同时提供两种链接：Claude Code (VS Code) 会从聊天 Markdown 中移除 file://、vscode:// 和 command:// URL scheme，因此只有 http:// 能生成可用的可点击链接。提供 file:// 路径是为了分享和离线查看。工具注释（readOnlyHint、idempotentHint、openWorldHint）可帮助客户端理解工具行为。

配置

均为可选项。默认值安全可靠——仅在需要覆盖时设置。

磁盘上的内容

图表 HTML 文件写入 <system temp>/mcp-dashboards/，并在 7 天后自动删除。建议使用图表自带的下载按钮（PNG / PPT / A4）永久保存内容。

随时让 AI “列出图表文件” 或 “删除超过 1 天的图表文件”——这会调用 list_chart_files / delete_chart_files。

**要求：**Node.js 18+。

git clone https://github.com/KyuRish/mcp-dashboards.git
cd mcp-dashboards
npm install
npm run build
npm run serve   # http://localhost:3001
npm run dev     # watch mode

支持

如果 MCP Dashboards 对你有帮助：

由 Rishabh Dogra 构建——欢迎在 LinkedIn 上联系。

隐私

所有处理均在本地完成。不会收集、传输或在外部存储任何数据。

只有在你明确提出要求时才会进行外部调用——render_from_url 和 poll_http 需要使用你提供的 URL 或预设。二者都会拒绝访问私有、环回或链路本地地址（例如你的 192.168.* 网络、位于 169.254.169.254 的 AWS 元数据等），避免被提示词注入的 AI 悄悄访问内部服务。它们还会按主机名限流，防止失控循环导致你的 IP 被真实 API 封禁。

环境变量预设中的凭据不会离开你的设备。浏览器预览服务和可选的 HTTP 传输默认都绑定到 127.0.0.1，其他设备无法访问。图表 HTML 文件保存在系统临时文件夹中，并在 7 天后自动删除。请参阅配置以更改上述设置。

许可证

FSL-1.1-MIT - 可免费用于任何用途，但不得用于构建有竞争关系的商业产品。每个版本在发布两年后转为 MIT 许可证。如需商业授权，请联系 [email protected]。

第三方软件

打包的 UI 产物（dist/mcp-app.html）内嵌了来自 Chart.js、html2canvas-pro、Luxon、TopoJSON 和 Dagre 项目的开源库，这些库依据 MIT 或 ISC 许可证分发。完整的署名信息和许可证文本见 THIRD_PARTY_LICENSES.md。