D3.js 정보의 TypeScript Express 기반 Model Context Protocol (MCP) 서버. 이 서버는 MCP 프로토콜을 통해 D3 시각화 문서, 차트 권고 및 코드 생성을 제공합니다.

특징

• D D3 Resources: D3 소스에서 문서 및 예제
• PhysicsChart 권고: 데이터 및 목표에 기반한 올바른 차트 유형에 대한 권고
• 💻 Code Generation: 다양한 차트 유형의 D3 코드 예제 생성
• د ** MCP 통합 **: D3 지식에 직접 AI 도구를 연결

필수품

• Node.js 16.x 이상
• npm 또는 원사

설치

1. 저장소를 복제

2. 의존성 설치

3. 프로젝트 구축

사용법

1. 서버 시작

2. 서버는 http://localhost:3000]에서 실행됩니다 (또는 .env 파일에 지정된 포트)

3. MCP 클라이언트를 사용하여 MCP 엔드포인트에 연결 http://localhost:3000/mcp-sse

개발

뜨거운 reloading를 가진 발달을 위해:

유효한 MCP 자원과 공구

자원

• ** d3-docs://{topic}**: 특정 주제에 대한 D3 문서
• d3-charts://{chartType}: 특정 D3 차트 유형에 대한 정보를 얻으십시오.

도구

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.