amCharts 5 MCP Server

Server MCP amCharts 5

Sebuah server MCP (Model Context Protocol) yang memberi asisten AI akses sesuai permintaan ke basis pengetahuan amCharts 5 yang lengkap: 160+ halaman dokumentasi, 290+ contoh kode, dan 1.300+ halaman referensi API.

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

Mengapa?

Alih-alih memuat seluruh referensi amCharts ke dalam jendela konteks AI, server MCP memungkinkan AI menanyakan 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 terkelola — tanpa instalasi, cukup tambahkan satu URL. Lebih suka menjalankannya sendiri? Lihat Instalasi lokal di bawah.

Terkelola (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 — Settings → Connectors → Add custom connector, 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) — Settings → Connectors → Add custom connector, lalu tempel https://mcp.amcharts.com/mcp.

Cline (ekstensi VS Code) — buka panel MCP Servers → Remote Servers, 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 terkelola dengan mcp-remote. Gunakan ini sebagai perintah jalankan server dalam konfigurasi klien:

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

Sebagai contoh, dalam konfigurasi bergaya 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 endpoint /mcp (Streamable HTTP) atau /sse (SSE lama). Untuk klien yang hanya menerima URL tetapi masih mengharapkan perintah, gunakan jembatan mcp-remote yang ditunjukkan di atas.

Instalasi lokal (npx)

Lebih suka menjalankannya sendiri? Server ini 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 proyek saat ini saja:

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 akar 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 dokumentasi inti amCharts 5 — penyiapan, tema, warna, peristiwa, jebakan umum
get_chart_reference	Dapatkan referensi lengkap untuk tipe grafik (mis. "pie", "sankey", "xy")
list_chart_types	Daftar semua tipe grafik yang tersedia beserta kata kuncinya
search_docs	Cari dokumen referensi skill berdasarkan kata kunci (scope: "all" menambahkan dokumen lengkap, referensi API dan contoh)
search_all	Cari di semuanya — dokumen skill, 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 minimal yang berfungsi untuk tipe grafik apa pun
list_examples	Jelajahi semua 290+ contoh, opsional difilter berdasarkan kategori
get_example	Dapatkan kode lengkap untuk contoh tertentu
get_api_reference	Dapatkan referensi API untuk kelas, antarmuka atau fungsi — pengaturan beserta nilai bawaannya, peristiwa, pewarisan dan baris impor
list_geodata	Temukan file peta (geodata) — dunia, benua, negara, paket regional dan paket distrik kongres AS per-Kongres — dengan jalur CDN, global skrip dan impor ES setiap file

Contoh Penggunaan

Setelah terhubung, asisten AI Anda dapat:

• "Buatkan saya diagram pai" → 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 berintegrasi dengan React?" → AI memanggil get_doc("getting-started/integrations/react"), yang mencakup paket @amcharts/amcharts5-react
• "Tipe grafik apa saja yang tersedia?" → AI memanggil list_chart_types()
• "Petakan distrik kongres AS saat ini" → AI memanggil list_geodata("congressional whole country")

Konten

Server ini mencakup 1.800+ dokumen:

• 160+ halaman dokumentasi — memulai, panduan grafik, konsep (tema, peristiwa, adaptor, pengikatan data, animasi, aksesibilitas, dll.), dan panduan integrasi kerangka kerja untuk paket React, Vue, Angular, Svelte dan React Native amCharts (dengan Next.js, Nuxt, SvelteKit, React Router dan Remix 3)
• 290+ contoh kode — demo yang berfungsi di 16 kategori termasuk kolom/batang, garis/area, pai/donat, peta, hierarki, alur, radar/polar, saham, pengukur, Gantt, linimasa, dan lainnya
• 1.300+ halaman referensi API — setiap kelas, antarmuka dan fungsi dalam pustaka amCharts 5, dihasilkan dari typings rilis: pengaturan dengan nilai bawaan sebenarnya (termasuk aturan tema), peristiwa, properti, bidang item data, rantai pewarisan dan baris impor
• 670+ entri geodata — setiap peta di @amcharts/amcharts5-geodata, untuk list_geodata
• Referensi skill terkurasi — templat mulai cepat dan panduan khusus grafik dari amCharts 5 AI Skill

Keamanan

• Alat hanya-baca. Setiap alat membaca dokumentasi amCharts yang dibundel dan mengembalikan teks. Tidak ada alat yang menulis file, menjalankan perintah atau mengambil URL.
• Endpoint terkelola tidak memiliki autentikasi, secara desain. https://mcp.amcharts.com/mcp menyajikan dokumentasi publik yang sama dengan amcharts.com. Tidak ada akun, kunci API, data pengguna atau operasi tulis di baliknya.
  • Ini berjalan di Cloudflare Workers.
  • Status sesi MCP disimpan dalam Durable Object, sebagaimana diwajibkan oleh kerangka kerja agen MCP. Status ini dihapus saat sesi berakhir, atau 24 jam setelah permintaan terakhirnya.
  • Log per-permintaan (log pemanggilan Workers) dimatikan. Hanya pesan kesalahan yang dicatat, dan pesan tersebut tidak memuat argumen alat. Lihat "Privasi" di bawah.
• Instalasi lokal. Paket npm berjalan melalui stdio di mesin Anda dan hanya membaca konten yang dibundel di dalamnya; paket ini tidak membuat permintaan jaringan. Dependensi runtime-nya hanya @modelcontextprotocol/sdk dan zod.
• Skrip pemelihara. Skrip di scripts/ (pengikis demo dan dokumentasi, generator referensi API) bukan bagian dari paket npm dan tidak pernah berjalan di server.
• Melaporkan kerentanan: https://www.amcharts.com/report-vulnerability/

Privasi

Baik server terkelola maupun paket npm tidak memerlukan akun atau meminta data pribadi.

• Server terkelola (https://mcp.amcharts.com/mcp):
  • Apa yang dikirim aplikasi AI Anda: frasa pencarian, tipe grafik, jalur dokumen. Ini hanya digunakan untuk menyusun jawaban, dan tidak dicatat atau disimpan. Respons disimpan dalam penyimpanan sesi hanya sampai terkirim (agar aliran yang terputus dapat dilanjutkan), lalu dihapus.
  • Catatan sesi: saat aplikasi AI terhubung, server menyimpan pesan inisialisasi MCP-nya dalam penyimpanan sesi. Pesan tersebut memuat apa yang dikatakan aplikasi tentang dirinya (nama dan versinya, dan apa pun yang diletakkannya di sana), versi protokol dan kemampuan MCP aplikasi. Seluruh penyimpanan sesi dihapus saat aplikasi mengakhiri sesi, atau 24 jam setelah permintaan terakhirnya.
  • Log: server tidak menyimpan log permintaan (log pemanggilan Workers dimatikan). Ini berjalan di Cloudflare Workers, dan Cloudflare memproses setiap permintaan, termasuk alamat IP-nya, untuk mengirimkannya. Pesan kesalahan dan peringatan dicatat dan disimpan hingga 7 hari; pesan tersebut tidak memuat isi permintaan atau argumen alat.
• Paket npm: berjalan di komputer Anda melalui stdio dan tidak mengirim apa pun ke amCharts atau siapa pun.
• Kebijakan dan pertanyaan: lihat kebijakan privasi amCharts, atau tulis ke contact@amcharts.com.

Lisensi

MIT