MCP D3 Server

🚀 D3 Data Visualization MCP Server

This is a D3.js Model Context Protocol (MCP) server based on TypeScript and Express. The server offers D3 visualization documentation, chart recommendations, and code generation capabilities, all implemented through the MCP protocol.

🚀 Quick Start

1. Start the server

npm start

2. The server will run at http://localhost:3000 (or the PORT specified in the .env file).

3. Connect to http://localhost:3000/mcp-sse using the MCP endpoint.

✨ Features

• 📊 D3 Resources: Access D3 documentation and example resources.
• 🔍 Chart Recommendations: Get suggestions for appropriate chart types based on data and goals.
• 💻 Code Generation: Generate D3 code examples for various chart types.
• 🔌 MCP Integration: Connect AI tools directly to the D3 knowledge base.

📦 Installation

Prerequisites

• Node.js 16.x or higher
• npm or yarn package management tool

Steps

1. Clone the repository

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

2. Install dependencies

npm install

3. Build the project

npm run build

💻 Usage Examples

Basic Usage

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

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

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

// Get chart recommendation results
const result = await client.invokeTool("recommend-chart", {
  dataDescription: "Monthly sales data for five product categories over the past two years",
  purpose: "Show trends and compare performance between categories"
});

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

Advanced Usage

If you want to use the server in development mode with hot reloading, you can run the following command:

npm run dev

📚 Documentation

Available MCP Resources and Tools

Resources

• d3-docs://{topic}: Access D3 documentation for a specific topic.
• d3-charts://{chartType}: Get detailed information about a specific chart type.

Tools

• generate-d3-chart: Generate D3 code examples for different chart types.
  • Parameters: chartType (chart type), dataFormat (data format), features (optional feature parameters).
• recommend-chart: Recommend appropriate chart types based on data and goals.
  • Parameters: dataDescription (data description), purpose (usage purpose).

📄 License

This project is licensed under the MIT License.

Contribution Guide

Any contributions are welcome! Please feel free to submit a Pull Request.