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 查找。这意味着更好的答案，同时减少上下文浪费。

快速开始

最简单的方式是使用托管服务器——无需安装，只需添加一个 URL。如果您更倾向于自行运行，请参阅下方的本地安装。

托管（无需安装）——推荐

将您的 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 桥接到托管 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 端点（可流式传输的 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")
• “给我展示桑基图示例” → 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