ApexCharts

apexcharts-mcp

AI アシスタントがApexCharts エコシステム（チャート、ガント、ツリー、サンキー、グリッド、株価、マップ）について専門家レベルのサポートを受けられるようにする、Model Context Protocol サーバーです。有効な設定を生成し、よくあるミスを検出するほか、必要に応じて各製品の公式ナレッジベースを提供するため、AI が最初から正確なビジュアライゼーションを作成できます。

1 つの MCP で 7 つの製品に対応します。ツールは製品ごとに名前空間が分かれているため（apexcharts_*、apexgantt_*、apextree_*、apexsankey_*、apexgrid_*、apexstock_*、apexmaps_*）、任意の組み合わせで利用できます。

インストール

エディター／クライアントを選択してください。設定は一度だけで完了します。

ホスト型サーバー（インストール不要）

最も手軽な方法は、クライアントからホスト型サーバー https://mcp.apexcharts.com/mcp に接続することです。Node.js は不要で、常に最新リリースを利用できます。

Claude Code

claude mcp add --transport http apexcharts https://mcp.apexcharts.com/mcp

Cursor の場合、~/.cursor/mcp.json に追加します。

{
  "mcpServers": {
    "apexcharts": {
      "url": "https://mcp.apexcharts.com/mcp"
    }
  }
}

VS Code の場合、.vscode/mcp.json に追加します。

{
  "servers": {
    "apexcharts": {
      "type": "http",
      "url": "https://mcp.apexcharts.com/mcp"
    }
  }
}

リモート MCP サーバーの URL（Streamable HTTP）を受け付ける他のクライアントも、同じ方法で接続できます。代わりに自分のマシン上でサーバーを実行するには、以下のローカルインストール方法を使用してください。

Claude Code

claude mcp add apexcharts -- npx -y apexcharts-mcp

Claude Desktop

claude_desktop_config.json に追加します。

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

Cursor

~/.cursor/mcp.json に追加します。

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

インストール後、クライアントを再起動してください。これで AI アシスタントは、追加のコマンドを実行しなくても、すべての ApexCharts 製品のツールを利用できます。

AI に頼めること

インストールすると、アシスタントはサーバーのツールを自動的に使用します。たとえば、次のように頼めます。

• 「3 つの地域の月間収益を示す積み上げ面グラフを作成してください。」
• 「この円グラフの設定が描画されないのはなぜですか？」（設定を貼り付けてください）
• 「ApexGantt では依存関係にどのようなデータ形式が必要ですか？」
• 「ApexTree が使う再帰的なノードの構造を見せてください。」
• 「ApexSankey でレイヤーの順序を設定する方法を教えてください。」
• 「apex-grid の cellTemplate を説明し、例を示してください。」
• 「ApexMaps で米国の州ごとの失業率をコロプレスマップにしてください。」

どのツールを呼び出すかは AI が判断します。ツールを直接呼び出す必要はありません。

ツール

製品	ツール
meta	apexcharts_list_products
apexcharts	apexcharts_generate_config, apexcharts_validate_config, apexcharts_list_types, apexcharts_get_reference
apexgantt	apexgantt_generate_config, apexgantt_validate_config, apexgantt_get_reference
apextree	apextree_generate_config, apextree_validate_config, apextree_get_reference
apexsankey	apexsankey_generate_config, apexsankey_validate_config, apexsankey_get_reference
apexgrid	apexgrid_generate_config, apexgrid_validate_config, apexgrid_get_reference
apexstock	apexstock_generate_config, apexstock_validate_config, apexstock_get_reference
apexmaps	apexmaps_generate_config, apexmaps_validate_config, apexmaps_get_reference

すべての製品で、短い仕様から有効な設定を作成する generate_config と、各製品のスキルのルールに照らして設定を検証し、構造化された問題一覧を返す validate_config を利用できます。また、必要に応じて製品のナレッジベースを参照する get_reference も利用できます。チャート用ツールには、サポート対象の 30 種類のチャートを型付きで一覧表示する apexcharts_list_types が追加されています。これには、v6 で追加されたバイオリン、ファネル、ピラミッド、ゲージ、ユニット、ワッフル、サンバースト、ヒストグラム、v7.1 で追加されたウォーターフォール、ダンベル、ストリームグラフ、レインクラウド、v7.6 で追加されたアイシクル、および v7.9 以降 chart.type で bar の同義語として利用できる column が含まれます。各エントリーの bundle フィールドには、その種類がデフォルトのバンドルに含まれているか、Tier 2 の種類に必要な追加インポート名が記載されています。apexcharts_generate_config は 30 種類すべてに対応し、apexcharts_validate_config は 40 のルールに照らして検証します。apexcharts_list_products はメタツールで、このサーバーが公開する製品、そのツール名、および各製品のガイダンスが対象とする上流ライブラリのバージョンを一覧表示します。

読み込む製品を制限する

デフォルトでは、7 製品すべてのツールが登録されます。一部の製品のみを読み込むには、APEXCHARTS_MCP_PRODUCTS に製品 ID をカンマ区切りで設定します。

{
  "mcpServers": {
    "apexcharts": {
      "command": "npx",
      "args": ["-y", "apexcharts-mcp"],
      "env": { "APEXCHARTS_MCP_PRODUCTS": "charts,gantt" }
    }
  }
}

有効な ID は charts、gantt、tree、sankey、grid、stock、maps です。不明な ID は stderr の警告とともにスキップされますが、サーバーは起動します。

HTTP 経由で実行する

上記のインストールコマンドは、サーバーをローカルで stdio 経由で実行します。代わりにネットワーク経由で提供するには（チームで共有するサーバーや、URL のみを受け付けるクライアント向け）、--http を付けて起動します。

npx -y apexcharts-mcp --http --port 3000

/mcp で Streamable HTTP を使用し、/healthz では依存関係のないヘルスチェックに応答します。クライアントを接続します。

claude mcp add --transport http apexcharts http://localhost:3000/mcp

サーバーはステートレスで、すべてのリクエストにプレーンな JSON で応答します。各ツールは読み取り専用の短時間の呼び出しであるため、セッションを保持せず、長時間存続するストリームも開きません。仕様で「このサーバーはどちらも提供しない」と定義されているため、/mcp への GET と DELETE は 405 を返します。単一のリクエストを超えて存続するものはないため、スティッキーセッションやアイドルタイムアウトの延長なしに、あらゆるロードバランサーの背後で実行できます。

設定	デフォルト	意味
--port または PORT	3000	リッスンするポート
--host または APEXCHARTS_MCP_HOST	127.0.0.1	バインドするアドレス。コンテナー内では 0.0.0.0 を使用します
APEXCHARTS_MCP_ALLOWED_HOSTS	localhost,127.0.0.1,[::1]	/mcp が応答するホスト名（DNS リバインディング対策）、または *。サーバーを公開する場合は、公開ホスト名を設定します
APEXCHARTS_MCP_ALLOWED_ORIGINS	なし	/mcp を呼び出せるブラウザーのオリジン（CORS）、または *。Origin ヘッダーのないリクエスト（すべての IDE とデスクトップクライアントが該当）は常に受け付けられます
APEXCHARTS_MCP_PRODUCTS	すべて	stdio モードと同じです

リクエストボディの上限は 1 MiB です。各リクエストは、JSON-RPC のメソッドとツール名（引数は含みません）を示す JSON 行を 1 行 stdout に書き込みます。診断情報は stderr に出力されます。SIGTERM を受信すると、処理中のリクエストを完了してから終了します。

Dockerfile は、コンテナー内のポート 3000 でリッスンする本番用イメージをビルドします。

docker build -t apexcharts-mcp .
docker run -d -p 127.0.0.1:3100:3000 --memory=256m \
  -e APEXCHARTS_MCP_ALLOWED_HOSTS=mcp.example.com,localhost apexcharts-mcp

コンテナーの設定にはフラグではなく環境変数を使用してください。コンテナーの HEALTHCHECK は PORT を読み取ります。

ナレッジベース

信頼できるガイダンスは、npm の製品ごとのスキルパッケージにあります。

• apexcharts-skill：SKILL.md ＋ cartesian/bar/financial/circular/grid/radar のリファレンス ＋ 機能プラットフォームとバンドルの各階層（v8 のデフォルトバンドル、アドオンのインポート、apexcharts/full）、ツリーシェイキング、SSR、フレームワークラッパー
• apexgantt-skill：タスクデータ、依存関係、列／ツールバー、イベント、編集（CRUD／元に戻す／カレンダー）、タスクリストのグリッド（並べ替え／フィルター／グループ化）、インタラクション（UI の状態、描画による作成、エクスポート）、フレームワークラッパー
• apextree-skill：データ形式、グラフ API、フレームワークラッパー
• apexsankey-skill：データ形式、スタイル設定／インタラクション、フレームワークラッパー
• apexgrid-skill：列／テンプレート、データパイプライン、並べ替え／フィルター、状態およびインタラクション機能（行の固定／並べ替え、元に戻す／やり直し、バリデーター、ローカライズ）、フレームワーク連携、バニラ JS
• apexstock-skill：OHLC データ形式、テクニカル指標、ストリーミング／appendData、取引オーバーレイ、分析ワークスペース（レンジ統計、ドローダウン、測定、比較）、状態とエクスポート、テーマ設定、フレームワークラッパー
• apexmaps-skill：系列データ形式、地理データの結合、ジオメトリレジストリ、投影法、スケール、ドリルダウン、フレームワークラッパー

これらは通常の依存関係です。上流の改善を取り込むには、このリポジトリの package.json と製品の packages/mcp-<id>/package.json でバージョンを更新してください（CLAUDE.md を参照）。各スキルリポジトリが、それぞれのドキュメントの信頼できる情報源です。

---

貢献

apexcharts-mcp 自体の作業について説明します。

git clone https://github.com/apexcharts/apexcharts-mcp.git
cd apexcharts-mcp
npm install
npm run build

これは npm ワークスペースのモノレポです。

apexcharts-mcp/
  src/index.ts            # bootstrap: reads APEXCHARTS_MCP_PRODUCTS, wires up products, picks stdio or --http
  Dockerfile              # production image for HTTP mode
  packages/
    mcp-core/             # shared types and the reference-reader factory
    mcp-http/             # stateless Streamable HTTP transport, /healthz, Host/Origin policy
    mcp-charts/           # apexcharts_* tools
    mcp-gantt/            # apexgantt_* tools
    mcp-tree/             # apextree_* tools
    mcp-sankey/           # apexsankey_* tools
    mcp-grid/             # apexgrid_* tools
    mcp-stock/            # apexstock_* tools
    mcp-maps/             # apexmaps_* tools

ビルドでは、すべてのワークスペースに対して tsc -b を実行した後、esbuild を使って src/index.ts（およびすべてのワークスペースパッケージ）を単一の dist/index.js にバンドルします。スキルパッケージは import.meta.url を使ってファイルパスを解決するため、外部依存として扱われます。

サーバーを直接実行します（手動テスト用）。

node dist/index.js          # stdio
node dist/index.js --http   # HTTP on 127.0.0.1:3000

公開済みパッケージの代わりに、クライアントがローカルビルドを参照するように設定します。

claude mcp add apexcharts -- node /absolute/path/to/apexcharts-mcp/dist/index.js

よく使うスクリプト：

npm run dev        # tsc -b --watch
npm test           # vitest
npm run typecheck  # tsc -b
npm run clean      # remove all dist/ output

バンドルされたナレッジベースの正確性を保つ方法については、CLAUDE.md で一連の手順を確認してください。

npm run check:versions       # is any upstream library ahead of what its skill was verified against?
npm run check:chart-types    # hard gate: every chart type the library ships is documented and supported
npm run check:surface-delta  # what shipped since the pin that the docs never mention
npm run verify:skills        # signal: doc examples referencing names the types don't have