D3 MCP Server

D3 MCP サーバー

D3.js の情報を提供する、TypeScript と Express ベースの Model Context Protocol（MCP）サーバーです。このサーバーでは、MCP プロトコルを通じて、D3 の可視化ドキュメント、チャートの推奨、コード生成を提供します。

機能

• 📊 D3 リソース: D3 のソースからドキュメントやサンプルにアクセスできます
• 🔍 チャートの推奨: データと目標に基づいて、適切なチャートタイプの推奨を取得できます
• 💻 コード生成: さまざまなチャートタイプの D3 コード例を生成できます
• 🔌 MCP 連携: AI ツールを D3 の知識に直接接続できます

前提条件

• Node.js 16.x 以降
• npm または yarn

インストール

1. リポジトリをクローンします

git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server

2. 依存関係をインストールします

npm install

3. プロジェクトをビルドします

npm run build

使い方

1. サーバーを起動します

npm start

2. サーバーは http://localhost:3000（または .env ファイルで指定した PORT）で実行されます

3. MCP クライアントを使用して、http://localhost:3000/mcp-sse の MCP エンドポイントに接続します

開発

ホットリロードを有効にして開発する場合：

npm run dev

利用可能な MCP リソースとツール

リソース

• d3-docs://{topic}: 特定のトピックに関する D3 ドキュメントにアクセスします
• d3-charts://{chartType}: 特定の D3 チャートタイプに関する情報を取得します

ツール

• generate-d3-chart: さまざまなチャートタイプの D3 コードを生成します

  • パラメーター：chartType、dataFormat、features（任意）

• recommend-chart: データに基づいて D3 チャートタイプの推奨を取得します

  • パラメーター：dataDescription、purpose

使用例

MCP クライアント接続の例

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

ライセンス

MIT

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。