D3 MCP Server

A TypeScript Express-based Model Context Protocol (MCP) server for D3.js information. This server provides D3 visualization documentation, chart recommendations, and code generation through the MCP protocol.

Features

- 📊 D3 Resources: Access documentation and examples from D3 sources
- 🔍 Chart Recommendation: Get recommendations for the right chart type based on your data and goals
- 💻 Code Generation: Generate D3 code examples for various chart types
- 🔌 MCP Integration: Connect AI tools directly to D3 knowledge

Prerequisites

- Node.js 16.x or higher
- npm or yarn

Installation

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

1. Start the server

npm start

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

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

Development

For development with hot reloading:

npm run dev

Available MCP Resources and Tools

Resources

- d3-docs://{topic}: Access D3 documentation on specific topics
- d3-charts://{chartType}: Get information about specific D3 chart types

Tools

- generate-d3-chart: Generate D3 code for different chart types
- Parameters: chartType, dataFormat, features (optional)

- recommend-chart: Get recommendations for D3 chart types based on your data
- Parameters: dataDescription, purpose

Examples

MCP Client Connection Example

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

License

MIT

Contributing

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