MCP ECharts

MCP ECharts

AI MCP を使用して Apache ECharts を動的に生成し、チャートの生成とデータ分析を行います。チャート、グラフ、マップの生成には、 mcp-server-chart も使用できます。

✨ 特長

• データ、スタイル、テーマなど、ECharts のすべての機能と構文を完全にサポートしています。
• png、svg、option 形式へのエクスポートをサポートしています。また、ECharts の検証機能により、モデルが正しい構文とグラフィックを複数回のやり取りで出力できるようにします。
• MinIO との連携により、チャートを MinIO オブジェクトストレージに保存し、パフォーマンスと共有機能の向上のため、Base64 データの代わりに URL を返します。
• 軽量で、zero dependence により簡単にインストールできます。
• 非常に安全で、すべてローカルで生成され、リモートサービスに依存しません。

🤖 使用方法

前提条件

• Node.js 18 以上が必要です。

デスクトップアプリ（stdio トランスポート）

Claude、VSCode、Cline、Cherry Studio などの Desktop APP で使用するには、以下の MCP サーバー設定を追加してください。Mac の場合：

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Windows の場合：

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

また、HTTP、SSE プロトコルを使用して、modelscope、glama.ai、skillselion.com などでも利用できます。

🚰 SSE または Streamable トランスポートで実行する

パッケージをグローバルにインストールします。

npm install -g mcp-echarts

お好みのトランスポートオプションでサーバーを実行します。

# For SSE transport (default endpoint: /sse)
mcp-echarts -t sse

# For Streamable transport with custom endpoint
mcp-echarts -t streamable

次の URL でサーバーにアクセスできます。

• SSE トランスポート：http://localhost:3033/sse
• Streamable トランスポート：http://localhost:3033/mcp

🎮 CLI オプション

MCP サーバーの実行時には、以下の CLI オプションも使用できます。-h を指定して CLI を実行すると、コマンドオプションが表示されます。

MCP ECharts CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --port, -p       Specify the port for SSE or streamable transport (default: 3033)
  --endpoint, -e   Specify the endpoint for the transport:
                    - For SSE: default is "/sse"
                    - For streamable: default is "/mcp"
  --help, -h       Show this help message

🗂️ MinIO の設定（任意）

パフォーマンスと共有機能を向上させるため、MinIO オブジェクトストレージを設定して、グラフ画像を Base64 データではなく URL として保存できます。

メモ

MinIO が設定されていない場合や利用できない場合、システムは自動的に Base64 データの出力に切り替わるため、互換性が保たれます。

以下の MinIO オブジェクトストレージプロバイダーと連携できます。

• MinIO：高性能な S3 互換オブジェクトストレージです。直接連携するには、MinIO JavaScript Client を使用します。
• Amazon S3：互換性のある API エンドポイントで AWS SDK を使用します。
• Alibaba Cloud OSS：OSS サービスには Alibaba Cloud SDK を使用します。
• Google Cloud Storage：Google Cloud SDK または互換性のある API を使用して連携します。
• Microsoft Azure Blob Storage：Blob ストレージへのアクセスには Azure SDK を使用します。
• Tencent Cloud COS：COS との連携には Tencent Cloud SDK を使用します。

また、MinIO はローカルに無料でセットアップできます。

1. MinIO をローカルにインストールして起動します：

   # Download MinIO (macOS example)
   brew install minio/stable/minio
   
   # Start MinIO server
   minio server ~/minio-data --console-address :9001
   

2. 環境変数を設定します：

   # Copy the example environment file
   cp .env.example .env
   
   # Edit .env with your MinIO settings
   MINIO_ENDPOINT=localhost
   MINIO_PORT=9000
   MINIO_USE_SSL=false
   MINIO_ACCESS_KEY=minioadmin
   MINIO_SECRET_KEY=minioadmin
   MINIO_BUCKET_NAME=mcp-echarts
   

🔨 開発

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

npm install

サーバーをビルドします：

npm run build

MCP サーバーを起動します：

npm run start

🧑🏻‍💻 コントリビューター

• lyw405：15+ 個のグラフ作成 MCP ツールに対応しました。#2
• 2niuhe：SSE と Streaming HTTP による MCP に対応しました。#17
• susuperli：MinIO を使用してグラフ画像の Base64 を保存し、URL を返すようにしました。#10
• BQXBQX：node-canvas の代わりに @napi-rs/canvas を使用するようにしました。#3
• Meet-student：すべてのグラフツールに outputType スキーマを追加しました。#24
• hustcc：リポジトリを初期作成しました。

📄 ライセンス

MIT@hustcc。