amCharts 5 MCP Server

amCharts 5 MCP 伺服器

一個 MCP（模型上下文協定） 伺服器，讓 AI 助手能隨需存取完整的 amCharts 5 知識庫：140 多份文件頁面、280 多個程式碼範例，以及 1,000 多個類別 API 參考。

適用於 Claude Code、Claude Desktop、Cursor、Windsurf、VS Code + GitHub Copilot，以及任何其他相容 MCP 的 AI 工具。

為什麼？

與其將整個 amCharts 參考資料載入 AI 的上下文視窗，MCP 伺服器讓 AI 精確查詢所需內容 — 特定的圖表類型參考、一個程式碼範例，或 API 查詢。這意味著更好的答案，同時減少上下文浪費。

快速入門

最簡單的方式是使用託管伺服器 — 無需安裝，只需添加一個網址。偏好自行執行？請參閱下方的本機安裝。

託管（無需安裝）— 建議使用

將您的 AI 客戶端指向：

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 伺服器 面板 → 遠端伺服器，貼上 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 橋接至託管網址。在客戶端設定中，將此作為伺服器的執行命令：

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

例如，在 command/args 風格的設定中：

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

任何其他接受遠端伺服器網址的 MCP 客戶端也適用 — 使用 /mcp 端點（Streamable HTTP）或 /sse（舊版 SSE）。對於仍預期命令的純網址客戶端，請使用上方所示的 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")
• 「顯示桑基圖的範例」 → 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 技能 的快速入門範本與圖表特定指南

授權

MIT