drio
Open app

D3 MCP Server

Source

Catalog onlyCatalog onlySTDIO

Overview

D3 MCP Server is a TypeScript Express-based Model Context Protocol (MCP) server designed to provide D3.js visualization documentation, chart recommendations, and code generation through the MCP protocol.

To use the D3 MCP Server, clone the repository, install the dependencies, build the project, and start the server. Connect to the MCP endpoint using an MCP client to access its 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.
  1. Assisting developers in selecting the appropriate chart types for their data visualizations.
  2. Providing code snippets for D3.js to speed up development.
  3. Enabling integration of AI tools with D3.js for enhanced data visualization capabilities.

Add to your AI client

Use these steps to connect D3 MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-d3-server-iamfiscus": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-d3-server-iamfiscus"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-d3-server-iamfiscus": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-d3-server-iamfiscus"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-d3-server-iamfiscus": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-d3-server-iamfiscus"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-d3-server-iamfiscus": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-d3-server-iamfiscus"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-d3-server-iamfiscus": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-d3-server-iamfiscus"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-d3-server-iamfiscus": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-d3-server-iamfiscus"
      ]
    }
  }
}

FAQ

What are the prerequisites for using D3 MCP Server?

You need Node.js 16.x or higher and npm or yarn installed.

How do I connect to the D3 MCP Server?

Start the server and connect to the MCP endpoint at http://localhost:3000/mcp-sse using an MCP client.

Can I contribute to the D3 MCP Server?

Yes! Contributions are welcome, and you can submit a Pull Request.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2595,"uuid":"f38a25a0-b3bb-4770-99cc-4dea7e3dd9d7","name":"mcp-d3-server","title":"D3 MCP Server","description":"","avatar_url":"https://avatars.githubusercontent.com/u/502359?v=4","created_at":"2025-03-13T09:01:33.249Z","updated_at":"2025-03-22T06:19:42.570Z","status":"created","author_name":"iamfiscus","author_avatar_url":"https://avatars.githubusercontent.com/u/502359?v=4","tags":"d3,mcp,server,visualization,typescript","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/iamfiscus/mcp-d3-server","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"0\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-10 22:41:17\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools