ApexCharts

apexcharts-mcp

一个 Model Context Protocol 服务，可为 Claude 等 AI 助手提供 ApexCharts 生态系统的专家级帮助：图表、甘特图、树、桑基图、网格、股票图表和地图。它可以生成有效配置、捕捉常见错误，并按需提供各产品的官方知识库，让 AI 一次就能正确完成可视化。

一个 MCP，七款产品。工具按产品命名空间划分（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 提出的问题

安装后，助手会自动使用服务的工具。你可以这样提问：

• “为我制作一张堆叠面积图，展示三个地区每月的收入。”
• “这是我的饼图配置——为什么无法渲染？”（粘贴配置）
• “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。图表工具还提供 apexcharts_list_types（列出 30 种受支持图表类型的类型化目录，包括 v6 新增的 violin、funnel、pyramid、gauge、unit、waffle、sunburst 和 histogram，v7.1 新增的 waterfall、dumbbell、streamgraph 和 raincloud，v7.6 新增的 icicle，以及自 v7.9 起 chart.type 接受的 bar 同义词 column；每个条目的 bundle 字段说明默认 bundle 是否包含该类型，或列出 Tier 2 类型所需的附加导入）；apexcharts_generate_config 支持全部 30 种类型，apexcharts_validate_config 则依据 40 条规则进行检查。apexcharts_list_products 是一个 meta 工具，用于列出此服务提供的产品、它们的工具名称，以及各产品指导内容所针对的上游库版本。

限制加载的产品

默认情况下，系统会注册全部 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。每个请求都会向 stdout 写入一行 JSON，注明 JSON-RPC 方法和工具（绝不包含参数）；诊断信息会写入 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 上各产品对应的 skill 包：

• apexcharts-skill：SKILL.md + cartesian/bar/financial/circular/grid/radar 参考文档 + 功能平台及其捆绑包层级（v8 默认捆绑包、附加导入、apexcharts/full）、tree-shaking、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）。每个 skill 仓库都是其自身文档的事实来源。

---

贡献

用于开发 apexcharts-mcp 本身。

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

这是一个 npm workspace monorepo：

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 中。skill 包会保留为外部依赖，因为它们会通过 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