Visuals MCP

MCP Visuals Server

一款用于 AI Agent 的 MCP（Model Context Protocol）服务，可提供交互式可视化。以丰富的交互格式展示数据，包括使用 TanStack Table 构建的表格、使用 Recharts 构建的图表、带元数据的图像预览、用于浏览集合的主从视图、用于层级数据的树视图，以及支持拖放排序的可自定义列表。

快速安装

°°°

功能

表格可视化

• 交互式表格展示：使用 TanStack Table v8 提供功能齐全的数据表格
• 排序：点击列标题，按升序或降序排序
• 筛选：每列均提供文本筛选器和应用按钮
• 分页：可自定义每页行数（5、10、20、50、100 行）
• 列可见性：切换要显示的列
• 行选择：选择单行或所有行
• 导出：复制为 CSV/TSV 或导出为 PDF
• Agent 集成：表格状态（选择项、筛选条件、排序方式）会通过 updateModelContext 自动发送回大模型
• 主题集成：采用 VS Code 主题的颜色和字体
• 响应式：适配不同屏幕尺寸
• 通用数据支持：接受任意列结构和数据类型

图表可视化

• 交互式图表：绘制折线图、柱状图、面积图、饼图、散点图和组合图
• 每个视图支持多个图表：以纵向、横向或网格布局同时显示多个图表
• 灵活的系列配置：配置命名系列、自定义颜色、堆叠柱状图/面积图和混合组合图
• 丰富的图表功能：可选图例、工具提示、网格线和双 Y 轴
• 导出选项：直接从界面将图表数据复制为 JSON 或 CSV
• Agent 感知：可将当前图表选择和悬停状态报告给宿主应用
• 主题集成：采用 VS Code 主题的颜色和字体
• 响应式：适配窄面板和宽布局

图像预览

• 丰富的图像卡片：显示带标题、说明文字和元数据的图像
• 元数据显示：显示文件名、尺寸和文件大小
• 灵活的来源：支持 URL 和数据 URI
• 本地文件支持：自动将本地文件路径转换为数据 URI
• 主题集成：采用 VS Code 主题的颜色和字体

主从视图

• 灵活布局：显示项目列表和详细内容面板
• 多种内容类型：详情面板支持表格、图像或自定义文本/HTML
• 可复用组件：利用现有的表格和图像可视化
• 可配置布局：可选择横向（并排）或纵向（堆叠）方向
• 状态管理：选择状态会自动发送回大模型
• 丰富的主列表：显示带图标、标签和说明的项目
• 主题集成：所有组件的主题保持一致

树状视图

• 层级数据展示：以交互式树结构展示嵌套数据
• 展开/折叠：点击即可展开或折叠节点
• 节点选择：选择单个节点以突出显示
• 元数据支持：为每个节点显示可选元数据
• 图标：为节点添加自定义图标/表情符号
• 批量操作：一次性展开或折叠所有节点
• 导出选项：将树复制到剪贴板、导出为 HTML，或保存为图片（PNG）
• Agent 集成：将树的状态（已展开的节点、选择项）发送回大模型
• 主题集成：遵循 VS Code 主题颜色和字体
• 使用场景：文件系统、组织结构图、嵌套类别、JSON/XML 结构

列表可视化

• 交互式列表：以丰富的格式展示任何类型的列表
• 拖放排序：通过拖动轻松调整项目顺序
• 复选框：为任务列表和选择项提供可选复选框
• 图片缩略图：在列表项旁显示图片
• 紧凑模式：在舒适和紧凑布局之间切换
• 导出选项：复制为纯文本、CSV 或 JSON
• 单项复制：每个项目均有快速复制按钮
• 辅助文本支持：为每个项目添加辅助文本/描述
• 元数据：为项目附加自定义元数据
• 主题集成：遵循 VS Code 主题颜色和字体

截图

支持排序、筛选、分页和行选择的交互式表格

包含多种图表类型和网格布局的交互式图表仪表板

用于浏览表格、图片或自定义内容集合的主从视图

支持拖放排序、复选框和图片缩略图的交互式列表

支持展开/折叠、节点选择和导出选项的交互式树状视图

安装

VSCode 扩展（最简单）

直接从 VS Code Marketplace 安装：

1. 打开 VS Code
2. 转到扩展（Ctrl+Shift+X / Cmd+Shift+X）
3. 搜索“Visuals MCP”
4. 点击安装

该扩展会自动向 VS Code 和 GitHub Copilot Chat 注册 MCP 服务。

npmjs（推荐用于其他 MCP 客户端）

在 VSCode 的 GitHub Copilot Chat 中

• 点击工具图标（配置工具……）
• 点击“添加 MCP 服务”
• 点击“从 npm 安装”
• 输入 @harrybin/visuals-mcp
• 按 Enter / 点击“安装”

使用命令行：

npm install -g @harrybin/visuals-mcp
visuals-mcp

GitHub Packages

1. 使用 GitHub Packages 对 npm 进行身份验证：

npm config set @harrybin:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

2. 安装并运行：

npm install -g @harrybin/visuals-mcp
visuals-mcp

本地开发

# Install dependencies
npm install

# Build all UI bundles and the server
npm run build

# Optional: rebuild only the chart UI bundle
npm run build:charts

# Run the server
npm run serve

图表工具

使用 display_chart 在 MCP 客户端中呈现一个或多个交互式图表。

支持的图表类型：

• line
• bar
• area
• pie
• scatter
• composed

仓库指标仪表板示例

首先生成最新指标：

npm run metrics:repo:write

这会将快照写入 doc/repo-metrics.json。

然后呈现使用所有图表类型（line、bar、area、pie、scatter、composed）的仪表板：

对于用于发布的文档，请务必在更新 README 示例前立即重新生成 doc/repo-metrics.json。

1. 配置 MCP 服务

对于 VS Code： 此工作区在 .vscode/settings.json 中包含 MCP 配置。

如需全局添加，请更新 VS Code 设置：

{
  "github.copilot.chat.mcpServers": {
    "visuals-mcp": {
			"type": "stdio",
			"command": "node",
			"args": [
				"dist/server.js"
			]
		}
  }
}

对于 Claude Desktop： 配置示例请参见 claude_desktop_config.json。

许可证

MIT

参与贡献

欢迎贡献！请提交 issue 或 PR。

资源

• MCP Apps 文档
• MCP Apps 示例
• TanStack Table 文档
• Recharts 文档
• VS Code MCP 指南
• 更新日志