amCharts 5 MCP Server

amCharts 5 MCP Server

เซิร์ฟเวอร์ MCP (Model Context Protocol) ที่ให้ผู้ช่วย AI เข้าถึงฐานความรู้ amCharts 5 แบบออนดีมานด์: หน้าเอกสาร 140+ หน้า, ตัวอย่างโค้ด 280+ ตัวอย่าง, และ การอ้างอิง API คลาส 1,000+ รายการ

ทำงานร่วมกับ Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot, และเครื่องมือ AI ที่รองรับ MCP อื่นๆ

ทำไม?

แทนที่จะโหลดข้อมูลอ้างอิง 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 Servers → Remote Servers วาง https://mcp.amcharts.com/mcp หรือเพิ่มลงใน JSON การตั้งค่า MCP:

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

ไคลเอนต์ที่รองรับเฉพาะเซิร์ฟเวอร์ภายใน (stdio) (เช่น Zed, Continue, Amazon Q Developer) — เชื่อมต่อไปยัง URL ที่โฮสต์ด้วย 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 อื่นๆ ที่ยอมรับ URL เซิร์ฟเวอร์ระยะไกลก็ใช้งานได้เช่นกัน — ใช้ปลายทาง /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 หมวดหมู่ รวมถึงคอลัมน์/แท่ง, เส้น/พื้นที่, วงกลม/โดนัท, แผนที่, ลำดับชั้น, การไหล, เรดาร์/โพลาร์, หุ้น, เกจ, Gantt, ไทม์ไลน์, และอื่นๆ
• การอ้างอิง API คลาส 1,000+ รายการ — ทุกคลาสในไลบรารี amCharts 5 พร้อมการตั้งค่า, คุณสมบัติ, เมธอด, เหตุการณ์, และสายการสืบทอด
• เอกสารอ้างอิงทักษะที่คัดสรรแล้ว — เทมเพลตเริ่มต้นอย่างรวดเร็วและคู่มือเฉพาะแผนภูมิจาก amCharts 5 AI Skill

ใบอนุญาต

MIT