MCP D3 Server

🚀 D3 數據可視化 MCP 服務器

這是一個基於 TypeScript 和 Express 的 D3.js 模型上下文協議（MCP）服務器。該服務器藉助 MCP 協議，提供 D3 可視化文檔、圖表推薦和代碼生成等實用功能。

✨ 主要特性

• 📊 D3 資源：可訪問 D3 文檔和示例資源。
• 🔍 圖表推薦：能依據數據和目標，給出合適的圖表類型建議。
• 💻 代碼生成：可為各種圖表類型生成 D3 代碼示例。
• 🔌 MCP 集成：可直接將 AI 工具連接到 D3 知識庫。

📦 安裝指南

先決條件

• Node.js 16.x 或更高版本
• npm 或 yarn 包管理工具

安裝步驟

1. 克隆倉庫

git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server

2. 安裝依賴項

npm install

3. 構建項目

npm run build

💻 使用示例

啟動服務器

npm start

服務器將在 http://localhost:3000（或 .env 文件中指定的 PORT）運行。使用 MCP 端點連接到 http://localhost:3000/mcp-sse。

開發模式

使用熱重載進行開發：

npm run dev

可用的 MCP 資源和工具

資源

• d3-docs://{topic}：訪問特定主題的 D3 文檔。
• d3-charts://{chartType}：獲取具體圖表類型的詳細信息。

工具

• generate-d3-chart：為不同圖表類型生成 D3 代碼示例。
  • 參數：chartType（圖表類型）、dataFormat（數據格式）、features（可選功能參數）。
• recommend-chart：根據數據和目標推薦合適的圖表類型。
  • 參數：dataDescription（數據描述）、purpose（使用目的）。

MCP 客戶端連接示例

import { McpClient } from "@modelcontextprotocol/sdk/client/mcp.js";
import { SseClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

// 創建 MCP 客戶端實例
const client = new McpClient();

// 連接到 D3 MCP 服務器
const transport = new SseClientTransport("http://localhost:3000/sse");
await client.connect(transport);

// 獲取圖表推薦結果
const result = await client.invokeTool("recommend-chart", {
  dataDescription: "過去兩年五個產品類別的月度銷售額數據",
  purpose: "展示趨勢並比較各類別之間的性能"
});

console.log(result.content[0].text);

📄 許可證

本項目採用 MIT 協議。

🤝 貢獻指南

歡迎任何形式的貢獻！請隨時提交 Pull Request。