MCP可视化服务器
为AI代理提供交互式可视化的MCP（模型上下文协议）服务器。以丰富的交互式格式显示数据，包括 表格 使用TanStack表， 图表 与Recharts合作， 图像预览 使用元数据， 主详图视图 用于浏览收藏， 树状视图 对于分层数据，以及 可定制列表 通过拖放重新排序。
快速安装
°°°
特性
表格可视化
- 交互式桌面显示：使用TanStack table v8的全功能数据表
- 排序：单击列标题以升序/降序排序
- 过滤：带应用按钮的每列文本过滤器
- 分页：可自定义页面大小（5、10、20、50、100行）
- 列的可见性：切换显示哪些列
- 行选择：选择单个行或所有行
- 出口：复制为CSV/TSV或导出为PDF
- 代理集成：表状态（选择、筛选、排序）通过以下方式自动发送回LLM
updateModelContext - 主题整合：尊重VS Code主题颜色和字体
- 响应式：适用于不同屏幕尺寸
- 通用数据支持：接受任何列结构和数据类型
图表可视化
- 交互式图表：渲染线条图、条形图、面积图、饼图、散点图和组合图
- 每个视图有多个图表：以垂直、水平或网格布局一起显示多个图表
- 灵活的系列配置：配置命名系列、自定义颜色、堆叠条形图/区域和混合组合图表
- 丰富的图表功能：可选图例、工具提示、网格线和双Y轴
- 导出选项：直接从UI将图表有效负载复制为JSON或CSV
- 代理人意识：活动图表选择和悬停状态可以报告回主机应用程序
- 主题整合：尊重VS Code主题颜色和字体
- 响应式：适应窄面板和宽布局
图片预览
- 丰富的图像卡：显示带有标题、说明和元数据的图像
- 元数据显示：显示文件名、尺寸和文件大小
- 灵活的来源：支持URL和数据URI
- 本地文件支持：自动将本地文件路径转换为数据URI
- 主题整合：尊重VS Code主题颜色和字体
主详细视图
- 灵活布局：显示带有详细内容面板的项目列表
- 多种内容类型：详细信息面板支持表格、图像或自定义文本/HTML
- 可重用组件：利用现有的表格和图像可视化
- 可配置布局：选择水平（并排）或垂直（堆叠）方向
- 状态管理：选择状态自动发送回LLM
- 富主列表：显示带有图标、标签和描述的项目
- 主题整合：所有组件的主题一致
树状视图
- 分层数据显示：嵌套数据的交互式树结构
- 展开/折叠：单击以展开或折叠节点
- 节点选择：选择单个节点以突出显示它们
- 元数据支持：显示每个节点的可选元数据
- 图标：向节点添加自定义图标/表情符号
- 批量操作：一次展开或折叠所有节点
- 导出选项：将树复制到剪贴板、导出为HTML或另存为图像（PNG）
- 代理集成：树状态（扩展节点、选择）发送回LLM
- 主题整合：尊重VS Code主题颜色和字体
- 用例：文件系统、组织结构图、嵌套类别、JSON/XML结构
列表可视化
- 交互式列表：以丰富的格式显示任何类型的列表
- 拖放重新排序：通过拖动轻松重新排序项目
- 复选框：任务列表和选择的可选复选框
- 图像缩略图：在列表项旁边显示图像
- 紧凑模式：在舒适和紧凑布局之间切换
- 导出选项：以纯文本、CSV或JSON格式复制
- 单个项目副本：每个项目的快速复制按钮
- 子文本支持：每个项目的次要文本/描述
- 元数据：将自定义元数据附加到项目
- 主题整合：尊重VS Code主题颜色和字体
截图
*具有排序、筛选、分页和行选择功能的交互式表*
*具有多种图表类型和网格布局的交互式图表仪表板*
*用于浏览包含表格、图像或自定义内容的集合的主详细视图*
*带有拖放重新排序、复选框和图像缩略图的交互式列表*
*具有展开/折叠、节点选择和导出选项的交互式树视图*
安装
VSCode扩展（最简单）
直接从安装 VS代码市场:
- 打开VS代码
- 转到扩展（Ctrl+Shift+X/Cmd+Shift+X）
- 搜索“视觉MCP”
- 单击安装
该扩展将自动向VS Code和GitHub Copilot Chat注册MCP服务器。
npmjs（推荐用于其他MCP客户端）
在 VSCode github Copilot聊天
- 单击工具图标（配置工具…）
- 点击“添加MCP服务器”
- 点击“从npm安装”
- 进入
@harrybin/visuals-mcp - 按enter键/单击“安装”
使用命令行：
npm install -g @harrybin/visuals-mcp
visuals-mcpGitHub软件包
- 使用GitHub包对npm进行身份验证：
npm config set @harrybin:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN- 安装并运行：
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客户端中呈现一个或多个交互式图表。
支持的图表类型：
linebarareapiescattercomposed
存储库指标仪表板示例
首先生成新的指标：
npm run metrics:repo:write这会将快照写入 doc/repo-metrics.json.
然后渲染一个使用所有图表类型的仪表板(line, bar, area, pie, scatter, composed):
对于发布质量文档，始终重新生成 doc/repo-metrics.json 在更新README示例之前。
1.配置MCP服务器
对于VS代码： 此工作区包括MCP配置 .vscode/settings.json.
要全局添加，请更新您的VS代码设置：
{
"github.copilot.chat.mcpServers": {
"visuals-mcp": {
"type": "stdio",
"command": "node",
"args": [
"dist/server.js"
]
}
}
}对于Claude Desktop： 看 claude_desktop_config.json 例如配置。
许可证
麻省理工学院
贡献
欢迎投稿！请打开问题或PR。