AI导哈

D3可视化服务

一个基于TypeScript Express的D3.js模型上下文协议（MCP）服务器，提供D3可视化文档、图表推荐和代码生成功能。

  • by iamfiscus
  • TypeScript
  • 本地部署
  • 18 星标
  • 更新于
在 GitHub 查看 iamfiscus/mcp-d3-server

使用说明

D3 MCP服务器

用于D3.js信息的基于TypeScript Express的模型上下文协议（MCP）服务器。此服务器通过MCP协议提供D3可视化文档、图表建议和代码生成。

特性

  • 📊 D3资源：从D3来源获取文档和示例
  • 🔍 图表推荐：根据您的数据和目标获取正确图表类型的建议
  • 💻 代码生成：为各种图表类型生成D3代码示例
  • 🔌 MCP集成：将AI工具直接连接到D3知识

先决条件

  • Node.js 16.x或更高版本
  • npm或纱线

安装

  1. 克隆存储库
git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server
  1. 安装依赖项
npm install
  1. 构建项目
npm run build

用法

  1. 启动服务器
npm start

  1. 服务器将在以下时间运行http://localhost:3000（或.env文件中指定的PORT）

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

发展

对于热重载开发：

npm run dev

可用的MCP资源和工具

资源

  • d3文档：//{主题}：访问特定主题的D3文档
  • d3图表：//{chartType}：获取有关特定D3图表类型的信息

工具

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

    • 参数：chartType、dataFormat、功能（可选）

  • 推荐图表：根据您的数据获取D3图表类型的建议

    • 参数：数据描述、目的

例子

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);

许可证

麻省理工学院

贡献

欢迎投稿！请随时提交拉取请求。

相关 MCP