amCharts 5 MCP Server

Server MCP amCharts 5

Sebuah server MCP (Model Context Protocol) yang memberikan asisten AI akses sesuai permintaan ke basis pengetahuan amCharts 5 yang lengkap: 140+ halaman dokumentasi, 280+ contoh kode, dan 1.000+ referensi API kelas.

Bekerja dengan Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot, dan alat AI lain yang kompatibel dengan MCP.

Mengapa?

Daripada memuat seluruh referensi amCharts ke dalam jendela konteks AI, server MCP memungkinkan AI mengkueri tepat apa yang dibutuhkannya — referensi tipe grafik tertentu, contoh kode, atau pencarian API. Ini berarti jawaban yang lebih baik dengan pemborosan konteks yang lebih sedikit.

Mulai Cepat

Cara termudah adalah server terhosting — tanpa instalasi, cukup tambahkan satu URL. Lebih suka menjalankannya sendiri? Lihat Instalasi lokal di bawah.

Terhosting (tanpa instalasi) — direkomendasikan

Arahkan klien AI Anda ke:

https://mcp.amcharts.com/mcp

Claude Code

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

Claude Desktop / claude.ai — Pengaturan → Konektor → Tambah konektor kustom, lalu tempel 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 dengan konektor/mode pengembang diaktifkan) — Pengaturan → Konektor → Tambah konektor kustom, lalu tempel https://mcp.amcharts.com/mcp.

Cline (ekstensi VS Code) — buka panel Server MCP → Server Jarak Jauh, tempel https://mcp.amcharts.com/mcp, atau tambahkan ke JSON pengaturan MCP-nya:

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

Klien yang hanya mendukung server lokal (stdio) (mis. Zed, Continue, Amazon Q Developer) — jembatani ke URL terhosting dengan mcp-remote. Gunakan ini sebagai perintah jalankan server di konfigurasi klien:

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

Misalnya, dalam konfigurasi gaya command/args:

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

Klien MCP lain yang menerima URL server jarak jauh juga berfungsi — gunakan titik akhir /mcp (HTTP Streamable) atau /sse (SSE lawas). Untuk klien khusus URL yang masih mengharapkan perintah, gunakan jembatan mcp-remote yang ditunjukkan di atas.

Instalasi lokal (npx)

Lebih suka menjalankannya sendiri? Server juga dipublikasikan ke npm dan berjalan melalui stdio.

Claude Code

Untuk semua proyek (global, direkomendasikan):

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

Untuk hanya proyek saat ini:

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

Claude Desktop

Tambahkan ke claude_desktop_config.json Anda:

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

Cursor

Buat atau edit .cursor/mcp.json di root proyek Anda (atau ~/.cursor/mcp.json untuk global):

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

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

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

VS Code + GitHub Copilot

Buat atau edit .vscode/mcp.json di ruang kerja Anda:

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

Alat lain yang kompatibel dengan MCP

Untuk alat lain yang mendukung MCP (Cline, Continue, Amazon Q, Zed, dll.), konfigurasikan untuk menjalankan:

npx -y @amcharts/amcharts5-mcp

Jalankan secara lokal (untuk pengembangan)

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

Alat yang Tersedia

Alat	Deskripsi
get_core_reference	Dapatkan dokumen inti amCharts 5 — penyiapan, tema, warna, acara, jebakan umum
get_chart_reference	Dapatkan referensi lengkap untuk tipe grafik (mis. "pie", "sankey", "xy")
list_chart_types	Daftar semua tipe grafik yang tersedia dan kata kuncinya
search_docs	Cari dokumen referensi keterampilan berdasarkan kata kunci
search_all	Cari di semuanya — dokumen keterampilan, dokumentasi lengkap, dan contoh kode
get_doc	Dapatkan halaman dokumentasi lengkap (mis. "charts/xy-chart/axes", "concepts/events")
get_section	Dapatkan bagian tertentu dari file referensi berdasarkan judul
get_quick_start	Dapatkan templat kerja minimal untuk tipe grafik apa pun
list_examples	Jelajahi semua 283 contoh, opsional difilter berdasarkan kategori
get_example	Dapatkan kode lengkap untuk contoh tertentu

Contoh Penggunaan

Setelah terhubung, asisten AI Anda dapat:

• "Buatkan saya diagram pie" → AI memanggil get_quick_start("pie") dan menyesuaikan templatnya
• "Bagaimana cara memformat label sumbu tanggal?" → AI memanggil search_all("date axis label format")
• "Tunjukkan contoh diagram Sankey" → AI memanggil get_example("examples/flow/sankey-diagram")
• "Pengaturan apa yang didukung XYChart?" → AI memanggil get_doc("reference/xychart")
• "Bagaimana cara mengintegrasikan dengan React?" → AI memanggil get_doc("getting-started/integrations/react")
• "Tipe grafik apa yang tersedia?" → AI memanggil list_chart_types()

Konten

Server mencakup 1.500+ dokumen:

• 140+ halaman dokumentasi — memulai, panduan grafik, konsep (tema, acara, adaptor, pengikatan data, animasi, aksesibilitas, dll.), dan panduan integrasi kerangka kerja (React, Angular, Vue, Next.js, Svelte, dan lainnya)
• 280+ contoh kode — demo yang berfungsi di 16 kategori termasuk kolom/batang, garis/area, pie/donat, peta, hierarki, aliran, radar/polar, saham, pengukur, Gantt, garis waktu, dan lainnya
• 1.000+ referensi API kelas — setiap kelas di pustaka amCharts 5 dengan pengaturan, properti, metode, acara, dan rantai pewarisannya
• Referensi keterampilan yang dikurasi — templat mulai cepat dan panduan khusus grafik dari Keterampilan AI amCharts 5

Lisensi

MIT