amCharts 5 MCP Server

Máy chủ amCharts 5 MCP

Một máy chủ MCP (Giao thức Ngữ cảnh Mô hình) cung cấp cho trợ lý AI quyền truy cập theo yêu cầu vào toàn bộ cơ sở kiến thức amCharts 5: hơn 140 trang tài liệu, hơn 280 ví dụ mã, và hơn 1.000 tham chiếu API lớp.

Hoạt động với Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot, và bất kỳ công cụ AI tương thích MCP nào khác.

Tại sao?

Thay vì tải toàn bộ tham chiếu amCharts vào cửa sổ ngữ cảnh của AI, máy chủ MCP cho phép AI truy vấn chính xác những gì nó cần — một tham chiếu loại biểu đồ cụ thể, một ví dụ mã, hoặc tra cứu API. Điều này có nghĩa là câu trả lời tốt hơn với ít lãng phí ngữ cảnh hơn.

Bắt đầu nhanh

Cách dễ nhất là máy chủ được lưu trữ — không cần cài đặt, chỉ cần thêm một URL. Bạn muốn tự chạy? Xem Cài đặt cục bộ bên dưới.

Được lưu trữ (không cài đặt) — khuyến nghị

Trỏ máy khách AI của bạn tới:

https://mcp.amcharts.com/mcp

Claude Code

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

Claude Desktop / claude.ai — Cài đặt → Trình kết nối → Thêm trình kết nối tùy chỉnh, sau đó dán 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 với trình kết nối/chế độ nhà phát triển được bật) — Cài đặt → Trình kết nối → Thêm trình kết nối tùy chỉnh, sau đó dán https://mcp.amcharts.com/mcp.

Cline (tiện ích mở rộng VS Code) — mở bảng Máy chủ MCP → Máy chủ từ xa, dán https://mcp.amcharts.com/mcp, hoặc thêm vào JSON cài đặt MCP của nó:

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

Máy khách chỉ hỗ trợ máy chủ cục bộ (stdio) (ví dụ: Zed, Continue, Amazon Q Developer) — cầu nối tới URL được lưu trữ với mcp-remote. Sử dụng lệnh này làm lệnh chạy máy chủ trong cấu hình máy khách:

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

Ví dụ, trong cấu hình kiểu command/args:

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

Bất kỳ máy khách MCP nào khác chấp nhận URL máy chủ từ xa cũng hoạt động — sử dụng điểm cuối /mcp (HTTP có thể truyền phát) hoặc /sse (SSE kế thừa). Đối với máy khách chỉ dùng URL vẫn mong đợi lệnh, sử dụng cầu nối mcp-remote như trên.

Cài đặt cục bộ (npx)

Bạn muốn tự chạy? Máy chủ cũng được xuất bản lên npm và chạy qua stdio.

Claude Code

Cho tất cả dự án (toàn cục, khuyến nghị):

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

Cho chỉ dự án hiện tại:

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

Claude Desktop

Thêm vào claude_desktop_config.json của bạn:

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

Cursor

Tạo hoặc chỉnh sửa .cursor/mcp.json trong thư mục gốc dự án (hoặc ~/.cursor/mcp.json cho toàn cục):

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

Windsurf

Chỉnh sửa ~/.codeium/windsurf/mcp_config.json:

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

VS Code + GitHub Copilot

Tạo hoặc chỉnh sửa .vscode/mcp.json trong không gian làm việc của bạn:

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

Các công cụ tương thích MCP khác

Đối với bất kỳ công cụ nào khác hỗ trợ MCP (Cline, Continue, Amazon Q, Zed, v.v.), cấu hình để chạy:

npx -y @amcharts/amcharts5-mcp

Chạy cục bộ (để phát triển)

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

Công cụ có sẵn

Công cụ	Mô tả
get_core_reference	Lấy tài liệu amCharts 5 cốt lõi — thiết lập, chủ đề, màu sắc, sự kiện, lỗi phổ biến
get_chart_reference	Lấy tham chiếu đầy đủ cho một loại biểu đồ (ví dụ: "pie", "sankey", "xy")
list_chart_types	Liệt kê tất cả các loại biểu đồ có sẵn và từ khóa của chúng
search_docs	Tìm kiếm tài liệu tham chiếu kỹ năng theo từ khóa
search_all	Tìm kiếm trên mọi thứ — tài liệu kỹ năng, tài liệu đầy đủ, và ví dụ mã
get_doc	Lấy một trang tài liệu đầy đủ (ví dụ: "charts/xy-chart/axes", "concepts/events")
get_section	Lấy một phần cụ thể từ tệp tham chiếu theo tiêu đề
get_quick_start	Lấy một mẫu làm việc tối thiểu cho bất kỳ loại biểu đồ nào
list_examples	Duyệt tất cả 283 ví dụ, tùy chọn lọc theo danh mục
get_example	Lấy mã đầy đủ cho một ví dụ cụ thể

Ví dụ sử dụng

Khi đã kết nối, trợ lý AI của bạn có thể:

• "Xây cho tôi một biểu đồ tròn" → AI gọi get_quick_start("pie") và điều chỉnh mẫu
• "Làm thế nào để định dạng nhãn trục ngày?" → AI gọi search_all("date axis label format")
• "Cho tôi xem ví dụ sơ đồ Sankey" → AI gọi get_example("examples/flow/sankey-diagram")
• "XYChart hỗ trợ những cài đặt nào?" → AI gọi get_doc("reference/xychart")
• "Làm thế nào để tích hợp với React?" → AI gọi get_doc("getting-started/integrations/react")
• "Có những loại biểu đồ nào?" → AI gọi list_chart_types()

Nội dung

Máy chủ bao gồm hơn 1.500 tài liệu:

• Hơn 140 trang tài liệu — bắt đầu, hướng dẫn biểu đồ, khái niệm (chủ đề, sự kiện, bộ điều hợp, ràng buộc dữ liệu, hoạt ảnh, khả năng tiếp cận, v.v.), và hướng dẫn tích hợp framework (React, Angular, Vue, Next.js, Svelte, và nhiều hơn nữa)
• Hơn 280 ví dụ mã — các bản demo hoạt động trên 16 danh mục bao gồm cột/thanh, đường/vùng, tròn/vành khuyên, bản đồ, phân cấp, luồng, radar/cực, chứng khoán, đồng hồ đo, Gantt, dòng thời gian, và nhiều hơn nữa
• Hơn 1.000 tham chiếu API lớp — mọi lớp trong thư viện amCharts 5 với cài đặt, thuộc tính, phương thức, sự kiện, và chuỗi kế thừa của nó
• Tham chiếu kỹ năng được tuyển chọn — mẫu bắt đầu nhanh và hướng dẫn cụ thể cho biểu đồ từ Kỹ năng AI amCharts 5

Giấy phép

MIT