amCharts 5 MCP Server

amCharts 5 MCP Server

AI アシスタントが amCharts 5 の完全なナレッジベース（140 以上のドキュメントページ、280 以上のコード例、1,000 以上のクラス API リファレンス）にオンデマンドでアクセスできる MCP (Model Context Protocol) サーバーです。

Claude Code、Claude Desktop、Cursor、Windsurf、VS Code + GitHub Copilot、その他 MCP 互換の AI ツールで動作します。

なぜ必要か？

amCharts のリファレンス全体を AI のコンテキストウィンドウに読み込む代わりに、MCP サーバーは AI が必要なものだけを正確にクエリできるようにします。特定のチャートタイプのリファレンス、コード例、API ルックアップなどです。これにより、コンテキストの無駄を省き、より良い回答が得られます。

クイックスタート

最も簡単なのはホスト型サーバーです。インストール不要で、URL を 1 つ追加するだけです。自分で実行したい場合は、以下のローカルインストールを参照してください。

ホスト型（インストール不要）— 推奨

AI クライアントに以下の URL を指定してください：

https://mcp.amcharts.com/mcp

Claude Code

claude mcp add --transport http amcharts5 https://mcp.amcharts.com/mcp

Claude Desktop / claude.ai — 設定 → コネクター → カスタムコネクターを追加 し、https://mcp.amcharts.com/mcp を貼り付けます。

Cursor — .cursor/mcp.json:

{
  "mcpServers": {
    "amcharts5": {
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

VS Code + GitHub Copilot — .vscode/mcp.json:

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

Windsurf — ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "amcharts5": {
      "serverUrl": "https://mcp.amcharts.com/mcp"
    }
  }
}

ChatGPT（コネクター/開発者モードが有効な Plus/Pro/Enterprise）— 設定 → コネクター → カスタムコネクターを追加 し、https://mcp.amcharts.com/mcp を貼り付けます。

Cline（VS Code 拡張機能）— MCP Servers パネル → Remote Servers を開き、https://mcp.amcharts.com/mcp を貼り付けるか、MCP 設定 JSON に追加します：

{
  "mcpServers": {
    "amcharts5": {
      "type": "streamableHttp",
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

ローカル（stdio）サーバーのみをサポートするクライアント（例：Zed、Continue、Amazon Q Developer）— mcp-remote を使用してホスト型 URL にブリッジします。クライアントの設定でサーバーの実行コマンドとして以下を使用します：

npx mcp-remote https://mcp.amcharts.com/mcp

例えば、command/args スタイルの設定では：

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.amcharts.com/mcp"]
    }
  }
}

リモートサーバー URL を受け入れる他の MCP クライアントでも動作します。/mcp エンドポイント（Streamable HTTP）または /sse（レガシー SSE）を使用してください。コマンドを期待する URL のみのクライアントでは、上記の mcp-remote ブリッジを使用してください。

ローカルインストール（npx）

自分で実行したいですか？サーバーは npm にも公開されており、stdio 経由で実行されます。

Claude Code

すべてのプロジェクト（グローバル、推奨）：

claude mcp add -s user amcharts5 -- npx -y @amcharts/amcharts5-mcp

現在のプロジェクトのみ：

claude mcp add amcharts5 -- npx -y @amcharts/amcharts5-mcp

Claude Desktop

claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Cursor

プロジェクトルート（またはグローバルの場合は ~/.cursor/mcp.json）に .cursor/mcp.json を作成または編集します：

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json を編集します：

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

VS Code + GitHub Copilot

ワークスペースに .vscode/mcp.json を作成または編集します：

{
  "servers": {
    "amcharts5": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

その他の MCP 互換ツール

MCP をサポートする他のツール（Cline、Continue、Amazon Q、Zed など）では、以下を実行するように設定します：

npx -y @amcharts/amcharts5-mcp

ローカルで実行（開発用）

git clone https://github.com/amcharts/amcharts5-mcp.git
cd amcharts5-mcp
npm install
npm start

利用可能なツール

ツール	説明
get_core_reference	amCharts 5 のコアドキュメント（セットアップ、テーマ、色、イベント、よくある落とし穴）を取得
get_chart_reference	特定のチャートタイプ（例："pie"、"sankey"、"xy"）の完全なリファレンスを取得
list_chart_types	利用可能なすべてのチャートタイプとそのキーワードを一覧表示
search_docs	キーワードでスキルリファレンスドキュメントを検索
search_all	すべて（スキルドキュメント、完全なドキュメント、コード例）を横断検索
get_doc	完全なドキュメントページを取得（例："charts/xy-chart/axes"、"concepts/events"）
get_section	見出しでリファレンスファイルの特定のセクションを取得
get_quick_start	任意のチャートタイプの最小限の動作テンプレートを取得
list_examples	283 の全例を参照（オプションでカテゴリフィルター可能）
get_example	特定の例の完全なコードを取得

使用例

接続すると、AI アシスタントは次のことが可能になります：

• 「円グラフを作って」 → AI が get_quick_start("pie") を呼び出し、テンプレートを適応させます
• 「日付軸ラベルのフォーマット方法は？」 → AI が search_all("date axis label format") を呼び出します
• 「Sankey ダイアグラムの例を見せて」 → AI が get_example("examples/flow/sankey-diagram") を呼び出します
• 「XYChart がサポートする設定は？」 → AI が get_doc("reference/xychart") を呼び出します
• 「React と統合するには？」 → AI が get_doc("getting-started/integrations/react") を呼び出します
• 「利用可能なチャートタイプは？」 → AI が list_chart_types() を呼び出します

コンテンツ

サーバーには 1,500 以上のドキュメントが含まれています：

• 140 以上のドキュメントページ — 入門ガイド、チャートガイド、コンセプト（テーマ、イベント、アダプター、データバインディング、アニメーション、アクセシビリティなど）、フレームワーク統合ガイド（React、Angular、Vue、Next.js、Svelte など）
• 280 以上のコード例 — カラム/バー、ライン/エリア、円/ドーナツ、マップ、階層、フロー、レーダー/ポーラー、株価、ゲージ、ガント、タイムラインなど 16 のカテゴリにわたる動作デモ
• 1,000 以上のクラス API リファレンス — amCharts 5 ライブラリの全クラスとその設定、プロパティ、メソッド、イベント、継承チェーン
• キュレーションされたスキルリファレンス — amCharts 5 AI Skill のクイックスタートテンプレートとチャート固有のガイド

ライセンス

MIT