About D3 MCP Server
D3 MCP Server is a TypeScript server for developers and AI tools working with D3.js. It provides documentation, chart guidance, and generated chart code through MCP.
Key features
- 01D3 documentation and examples
- 02Chart type recommendations
- 03D3 chart code generation
Use cases
- 01Look up D3 topics and chart types
- 02Choose a chart based on data and purpose
- 03Generate code for a D3 chart
MCP support
Exposes D3 documentation and chart information as resources, plus chart recommendation and code generation tools to MCP clients. Connects at the documented MCP endpoint using an MCP client.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project READMED3 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
- Clone the repository
git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server
- Install dependencies
npm install
- Build the project
npm run build
Usage
- Start the server
npm start
-
The server will be running at http://localhost:3000 (or the PORT specified in your .env file)
-
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.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.