Visuals MCP

🚀 MCP可视化服务器

这是一个MCP（模型上下文协议）服务器，为AI智能体提供交互式可视化功能。它能以丰富的交互式格式展示数据，包括使用TanStack Table呈现的表格、带有元数据的图像预览、用于浏览集合的主从视图、用于展示分层数据的树状视图，以及支持拖放重新排序的可定制列表。

🚀 快速开始

你可以通过以下链接快速安装：

• 使用VS Code安装
• 使用VS Code Insiders安装

✨ 主要特性

表格可视化

• 交互式表格展示：使用TanStack Table v8实现功能齐全的数据表格。
• 排序：点击列标题可进行升序或降序排序。
• 过滤：每列都有文本过滤器，并带有应用按钮。
• 分页：可自定义页面大小（5、10、20、50、100行）。
• 列可见性：可切换显示哪些列。
• 行选择：可选择单个行或所有行。
• 导出：可复制为CSV/TSV格式，或导出为PDF。
• 智能体集成：表格状态（选择、过滤、排序）会通过updateModelContext自动发送回大语言模型（LLM）。
• 主题集成：遵循VS Code主题的颜色和字体。
• 响应式设计：在不同屏幕尺寸上均可正常工作。
• 通用数据支持：支持任何列结构和数据类型。

图像预览

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

主从视图

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

树状视图

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

列表可视化

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

📷 截图

带有排序、过滤、分页和行选择功能的交互式表格

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

带有拖放重新排序、复选框和图像缩略图的交互式列表

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

📦 安装指南

VSCode扩展（最简单的方法）

可直接从VS Code市场安装：

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

该扩展会自动将MCP服务器注册到VS Code和GitHub Copilot Chat中。

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

在VSCode的GitHub Copilot Chat中：

• 点击工具图标（配置工具...）。
• 点击“添加MCP服务器”。
• 点击“从npm安装”。
• 输入@harrybin/visuals-mcp。
• 按回车键/点击“安装”。

使用命令行：

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

GitHub包

1. 使用GitHub包对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

本地开发

# 安装依赖
npm install

# 构建UI
npm run build

# 运行服务器
npm run serve

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许可证。

🤝 贡献

欢迎贡献代码！请提交问题或拉取请求。

📚 详细文档

• MCP应用文档
• MCP应用示例
• TanStack Table文档
• VS Code MCP指南