MCP D3 Server

🚀 D3 データ可視化 MCP サーバー

このサーバーは、TypeScript と Express をベースにした D3.js モデルコンテキストプロトコル（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

💻 使用例

サーバーの起動

npm start

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

MCP エンドポイントへの接続

http://localhost:3000/mcp-sse に接続します。

開発モード

ホットリロードを使用して開発するには、以下のコマンドを実行します。

npm run dev

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

リソース

• d3-docs://{topic}：特定のトピックの D3 ドキュメントにアクセスします。
• d3-charts://{chartType}：具体的なグラフタイプの詳細情報を取得します。

ツール

• generate-d3-chart：異なるグラフタイプの D3 コードサンプルを生成します。
  • パラメータ：chartType（グラフタイプ）、dataFormat（データ形式）、features（オプションの機能パラメータ）
• recommend-chart：データと目的に基づいて適切なグラフタイプを推薦します。
  • パラメータ：dataDescription（データの説明）、purpose（使用目的）

MCP クライアント接続の例

import { McpClient } from "@modelcontextprotocol/sdk/client/mcp.js";
import { SseClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

// MCP クライアントインスタンスを作成します。
const client = new McpClient();

// D3 MCP サーバーに接続します。
const transport = new SseClientTransport("http://localhost:3000/sse");
await client.connect(transport);

// グラフ推薦結果を取得します。
const result = await client.invokeTool("recommend-chart", {
  dataDescription: "過去 2 年間の 5 つの製品カテゴリの月別売上データ",
  purpose: "トレンドを表示し、各カテゴリ間のパフォーマンスを比較する"
});

console.log(result.content[0].text);

📄 ライセンス

MIT ライセンス

コントリビューションガイド

どんな貢献も歓迎します！プルリクエストを送信してください。