What is Mcp D3 Server

mcp-d3-server is a TypeScript Express-based Model Context Protocol (MCP) server designed for D3.js information. It provides access to D3 visualization documentation, chart recommendations, and code generation through the MCP protocol.

Use cases

Use cases for mcp-d3-server include generating D3 code for specific chart types, recommending appropriate charts for data presentations, and providing documentation and examples for D3.js users.

How to use

To use mcp-d3-server, clone the repository, install dependencies using npm or yarn, and build the project. Start the server with ‘npm start’, and access it at http://localhost:3000. Connect to the MCP endpoint at http://localhost:3000/mcp-sse using an MCP client.

Key features

Key features of mcp-d3-server include access to D3 resources, chart recommendations based on data and goals, code generation for various chart types, and integration with AI tools via the MCP protocol.

Where to use

mcp-d3-server can be used in fields such as data visualization, business analytics, educational tools, and any application requiring dynamic chart generation and recommendations based on data.

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.