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指南