D3 MCP 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

使用方法

1. 启动服务

npm start

2. 服务将在 http://localhost:3000 运行（或运行在 .env 文件中指定的 PORT 上）

3. 使用 MCP 客户端连接到 MCP 端点 http://localhost:3000/mcp-sse

开发

如需在开发过程中启用热重载：

npm run dev

可用的 MCP 资源和工具

资源

• d3-docs://{topic}：访问特定主题的 D3 文档
• d3-charts://{chartType}：获取特定 D3 图表类型的信息

工具

• generate-d3-chart：为不同图表类型生成 D3 代码

  • 参数：chartType、dataFormat、features（可选）

• recommend-chart：根据数据获取 D3 图表类型建议

  • 参数：dataDescription、purpose

示例

MCP 客户端连接示例

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

// Create an MCP client
const client = new McpClient();

// Connect to the D3 MCP server
const transport = new SseClientTransport("http://localhost:3000/sse");
await client.connect(transport);

// Get chart recommendations
const result = await client.invokeTool("recommend-chart", {
  dataDescription: "Monthly sales data for 5 product categories over 2 years",
  purpose: "Show trends and compare performance across categories"
});

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

许可证

MIT

贡献

欢迎贡献！请随时提交 Pull Request。