amCharts 5 MCP Server

ทางการ

เซิร์ฟเวอร์ MCP ที่ให้ผู้ช่วย AI เข้าถึงเอกสาร amCharts กว่า 1,500 รายการ ตัวอย่างโค้ดประมาณ 300 ตัวอย่าง และข้อมูลอ้างอิง API ของคลาสมากกว่า 1,000 รายการตามความต้องการ

GitHub
9

คุณทำอะไรได้บ้างด้วย amCharts 5 MCP?

  • เทมเพลตเริ่มต้นอย่างรวดเร็วสำหรับแผนภูมิ — ขอเทมเพลตการทำงานขั้นต่ำสำหรับแผนภูมิประเภทใดก็ได้ เช่น แผนภูมิวงกลมหรือแผนภูมิซังคีย์ เพื่อนำไปปรับใช้ในโค้ดของคุณเอง
  • การค้นหาเอกสารและตัวอย่าง — ค้นหาข้ามเอกสารทักษะ เอกสารฉบับเต็ม และตัวอย่างโค้ดกว่า 290 รายการด้วยคำค้น เพื่อค้นหาแนวทางที่เกี่ยวข้อง
  • การเรียกดูประเภทแผนภูมิและตัวอย่าง — แสดงรายการประเภทแผนภูมิที่มีอยู่ หรือเรียกดูตัวอย่างที่กรองตามหมวดหมู่ จากนั้นดึงโค้ดฉบับเต็มสำหรับตัวอย่างที่ระบุ
  • การค้นหาข้อมูลอ้างอิง API — ค้นหาการตั้งค่าพร้อมค่าเริ่มต้น เหตุการณ์ การสืบทอด และบรรทัด import สำหรับคลาส อินเทอร์เฟซ หรือฟังก์ชันใดๆ ของ amCharts 5
  • การค้นหาข้อมูลภูมิสารสนเทศแผนที่ — ค้นหาไฟล์แผนที่ รวมถึงชุดข้อมูลโลก ทวีป ประเทศ ภูมิภาค และเขตเลือกตั้งรัฐสภาสหรัฐฯ พร้อมเส้นทาง CDN และรายละเอียดการ import
  • คู่มือการผสานรวมเฟรมเวิร์ก — ดึงเอกสารที่ครอบคลุมการผสานรวม React, Vue, Angular, Svelte และ React Native รวมถึงการตั้งค่า Next.js, Nuxt และ SvelteKit

เอกสาร

เซิร์ฟเวอร์ amCharts 5 MCP

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

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

ทำไมต้องใช้?

แทนที่จะโหลดข้อมูลอ้างอิง amCharts ทั้งหมดเข้าไปใน context window ของ AI เซิร์ฟเวอร์ MCP ช่วยให้ AI สอบถามเฉพาะสิ่งที่ต้องการ — ข้อมูลอ้างอิงของประเภทกราฟที่ระบุ ตัวอย่างโค้ด หรือการค้นหา API ซึ่งหมายถึงคำตอบที่ดีกว่าด้วยการใช้ context น้อยลง

เริ่มต้นอย่างรวดเร็ว

วิธีที่ง่ายที่สุดคือ เซิร์ฟเวอร์แบบโฮสต์ — ไม่ต้องติดตั้ง เพียงเพิ่ม URL เดียว หากต้องการ รันด้วยตัวเอง ดูที่ การติดตั้งในเครื่อง ด้านล่าง

แบบโฮสต์ (ไม่ต้องติดตั้ง) — แนะนำ

ชี้ไคลเอนต์ AI ของคุณไปที่:

https://mcp.amcharts.com/mcp

Claude Code

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

Claude Desktop / claude.ai — Settings → Connectors → Add custom connector แล้ววาง 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 ที่เปิดใช้งาน connectors/developer mode) — Settings → Connectors → Add custom connector แล้ววาง https://mcp.amcharts.com/mcp

Cline (ส่วนขยาย VS Code) — เปิดแผง MCP Servers → Remote Servers วาง https://mcp.amcharts.com/mcp หรือเพิ่มในการตั้งค่า MCP JSON:

{
  "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ค้นหาเอกสารอ้างอิงทักษะตามคีย์เวิร์ด (scope: "all" เพิ่มเอกสารฉบับเต็ม ข้อมูลอ้างอิง API และตัวอย่าง)
search_allค้นหาทั่ว ทุกอย่าง — เอกสารทักษะ เอกสารฉบับเต็ม และตัวอย่างโค้ด
get_docรับหน้าเอกสารฉบับเต็ม (เช่น "charts/xy-chart/axes", "concepts/events")
get_sectionรับส่วนที่ระบุจากไฟล์อ้างอิงตามหัวข้อ
get_quick_startรับเทมเพลตที่ใช้งานได้ขั้นต่ำสำหรับประเภทกราฟใด ๆ
list_examplesเรียกดูตัวอย่างทั้ง 290+ รายการ พร้อมตัวกรองตามหมวดหมู่
get_exampleรับโค้ดฉบับเต็มของตัวอย่างที่ระบุ
get_api_referenceรับข้อมูลอ้างอิง API ของคลาส อินเทอร์เฟซ หรือฟังก์ชัน — การตั้งค่าพร้อมค่าเริ่มต้น อีเวนต์ การสืบทอด และบรรทัด import
list_geodataค้นหาไฟล์แผนที่ (geodata) — โลก ทวีป ประเทศ แพ็กภูมิภาค และแพ็กเขตเลือกตั้งรัฐสภาสหรัฐฯ ตามสมัยประชุม — พร้อมเส้นทาง CDN, script global และ ES import ของแต่ละไฟล์

ตัวอย่างการใช้งาน

เมื่อเชื่อมต่อแล้ว ผู้ช่วย 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") ซึ่งครอบคลุมแพ็กเกจ @amcharts/amcharts5-react
  • "มีประเภทกราฟอะไรบ้าง?" → AI เรียก list_chart_types()
  • "แสดงแผนที่เขตเลือกตั้งรัฐสภาสหรัฐฯ ปัจจุบัน" → AI เรียก list_geodata("congressional whole country")

เนื้อหา

เซิร์ฟเวอร์ประกอบด้วย เอกสาร 1,800+ รายการ:

  • หน้าเอกสาร 160+ หน้า — การเริ่มต้นใช้งาน คู่มือกราฟ แนวคิด (ธีม อีเวนต์ อะแดปเตอร์ การผูกข้อมูล แอนิเมชัน การเข้าถึง ฯลฯ) และคู่มือการเชื่อมต่อเฟรมเวิร์กสำหรับแพ็กเกจ React, Vue, Angular, Svelte และ React Native ของ amCharts (พร้อม Next.js, Nuxt, SvelteKit, React Router และ Remix 3)
  • ตัวอย่างโค้ด 290+ ตัวอย่าง — เดโมที่ใช้งานได้จริงใน 16 หมวดหมู่ รวมถึง column/bar, line/area, pie/donut, แผนที่, ลำดับชั้น, flow, radar/polar, stock, เกจ, Gantt, ไทม์ไลน์ และอื่น ๆ
  • หน้าอ้างอิง API 1,300+ หน้า — ทุกคลาส อินเทอร์เฟซ และฟังก์ชันในไลบรารี amCharts 5 สร้างจาก typings ของรีลีส: การตั้งค่าพร้อมค่าเริ่มต้นจริง (รวมกฎธีม) อีเวนต์ พร็อพเพอร์ตี้ ฟิลด์รายการข้อมูล ลำดับการสืบทอด และบรรทัด import
  • รายการ geodata 670+ รายการ — ทุกแผนที่ใน @amcharts/amcharts5-geodata สำหรับ list_geodata
  • เอกสารอ้างอิงทักษะที่คัดสรร — เทมเพลตเริ่มต้นอย่างรวดเร็วและคู่มือเฉพาะกราฟจาก amCharts 5 AI Skill

ความปลอดภัย

  • เครื่องมืออ่านอย่างเดียว ทุกเครื่องมืออ่านเอกสาร amCharts ที่บันเดิลไว้และส่งคืนข้อความ ไม่มีเครื่องมือใดเขียนไฟล์ รันคำสั่ง หรือดึง URL
  • ปลายทางแบบโฮสต์ไม่มีการยืนยันตัวตน โดยการออกแบบ https://mcp.amcharts.com/mcp ให้บริการเอกสารสาธารณะชุดเดียวกับ amcharts.com ไม่มีบัญชี คีย์ API ข้อมูลผู้ใช้ หรือการดำเนินการเขียนใด ๆ อยู่เบื้องหลัง
    • ทำงานบน Cloudflare Workers
    • สถานะเซสชัน MCP เก็บไว้ใน Durable Object ตามที่เฟรมเวิร์ก MCP agents กำหนด จะถูกลบเมื่อเซสชันสิ้นสุด หรือ 24 ชั่วโมงหลังคำขอสุดท้าย
    • บันทึกต่อคำขอ (Workers invocation logs) ปิดอยู่ บันทึกเฉพาะข้อความข้อผิดพลาด ซึ่งไม่มีอาร์กิวเมนต์ของเครื่องมือ ดู "ความเป็นส่วนตัว" ด้านล่าง
  • การติดตั้งในเครื่อง แพ็กเกจ npm ทำงานผ่าน stdio บนเครื่องของคุณและอ่านเฉพาะเนื้อหาที่บันเดิลไว้เท่านั้น ไม่มีการร้องขอผ่านเครือข่าย dependencies ขณะรันมีเพียง @modelcontextprotocol/sdk และ zod
  • สคริปต์ของผู้ดูแล สคริปต์ใน scripts/ (ตัวดึงข้อมูลเดโมและเอกสาร ตัวสร้างข้อมูลอ้างอิง API) ไม่ได้เป็นส่วนหนึ่งของแพ็กเกจ npm และไม่เคยรันในเซิร์ฟเวอร์
  • การรายงานช่องโหว่: https://www.amcharts.com/report-vulnerability/

ความเป็นส่วนตัว

ทั้งเซิร์ฟเวอร์แบบโฮสต์และแพ็กเกจ npm ไม่ต้องใช้บัญชีหรือขอข้อมูลส่วนบุคคล

  • เซิร์ฟเวอร์แบบโฮสต์ (https://mcp.amcharts.com/mcp):
    • สิ่งที่แอป AI ของคุณส่งมา: วลีค้นหา ประเภทกราฟ เส้นทางเอกสาร ข้อมูลเหล่านี้ใช้เพียงเพื่อสร้างคำตอบเท่านั้น ไม่มีการบันทึกหรือจัดเก็บ คำตอบจะถูกเก็บไว้ในที่จัดเก็บของเซสชันจนกว่าจะส่งมอบแล้ว (เพื่อให้สตรีมที่ขาดหายสามารถกลับมาทำต่อได้) จากนั้นจะถูกลบ
    • บันทึกเซสชัน: เมื่อแอป AI เชื่อมต่อ เซิร์ฟเวอร์จะเก็บข้อความ MCP initialize ไว้ในที่จัดเก็บของเซสชัน ข้อความนั้นประกอบด้วยข้อมูลที่แอประบุเกี่ยวกับตัวเอง (ชื่อและเวอร์ชัน และอื่น ๆ ที่แอปใส่มา) เวอร์ชันโปรโตคอล และความสามารถ MCP ของแอป ที่จัดเก็บทั้งหมดของเซสชันจะถูกลบเมื่อแอปสิ้นสุดเซสชัน หรือ 24 ชั่วโมงหลังคำขอสุดท้าย
    • บันทึก: เซิร์ฟเวอร์ไม่เก็บบันทึกคำขอ (Workers invocation logs ปิดอยู่) ทำงานบน Cloudflare Workers และ Cloudflare ประมวลผลแต่ละคำขอ รวมถึงที่อยู่ IP เพื่อส่งมอบ ข้อความข้อผิดพลาดและคำเตือนจะถูกบันทึกและเก็บไว้ไม่เกิน 7 วัน โดยไม่มีเนื้อหาคำขอหรืออาร์กิวเมนต์ของเครื่องมือ
  • แพ็กเกจ npm: ทำงานบนคอมพิวเตอร์ของคุณผ่าน stdio และไม่ส่งข้อมูลใด ๆ ไปยัง amCharts หรือผู้อื่น
  • นโยบายและคำถาม: ดู นโยบายความเป็นส่วนตัวของ amCharts หรือเขียนถึง contact@amcharts.com

สัญญาอนุญาต

MIT