Chart MCP Server

resmi

Server Protokol Konteks Model untuk menghasilkan grafik visual menggunakan AntV.

Dokumentasi

Server MCP Chart

Server Model Context Protocol untuk menghasilkan grafik menggunakan AntV. Kita dapat menggunakan server mcp ini untuk pembuatan grafik dan analisis data.

Ini adalah server MCP berbasis TypeScript yang menyediakan kemampuan pembuatan grafik. Server ini memungkinkan Anda membuat berbagai jenis grafik melalui alat MCP. Anda juga dapat menggunakannya di Dify.

📋 Daftar Isi

✨ Fitur
🤖 Penggunaan
🎨 Penggunaan Keterampilan
🚰 Menjalankan dengan transport SSE atau Streamable
🎮 Opsi CLI
⚙️ Variabel Lingkungan
📠 Penerapan Pribadi
🗺️ Catatan Pembuatan
🎛️ Penyaringan Alat
🔨 Pengembangan
📄 Lisensi

✨ Fitur

Sekarang mendukung 26+ grafik.

generate_area_chart: Menghasilkan grafik area, digunakan untuk menampilkan tren data di bawah variabel independen kontinu, memungkinkan pengamatan tren data secara keseluruhan.
generate_bar_chart: Menghasilkan grafik bar, digunakan untuk membandingkan nilai di berbagai kategori, cocok untuk perbandingan horizontal.
generate_boxplot_chart: Menghasilkan boxplot, digunakan untuk menampilkan distribusi data, termasuk median, kuartil, dan pencilan.
generate_column_chart: Menghasilkan grafik column, digunakan untuk membandingkan nilai di berbagai kategori, cocok untuk perbandingan vertikal.
generate_district_map - Menghasilkan district-map, digunakan untuk menampilkan pembagian administratif dan distribusi data.
generate_dual_axes_chart: Menghasilkan grafik dual-axes, digunakan untuk menampilkan hubungan antara dua variabel dengan unit atau rentang yang berbeda.
generate_fishbone_diagram: Menghasilkan diagram fishbone, juga dikenal sebagai diagram Ishikawa, digunakan untuk mengidentifikasi dan menampilkan akar penyebab suatu masalah.
generate_flow_diagram: Menghasilkan flowchart, digunakan untuk menampilkan langkah-langkah dan urutan suatu proses.
generate_funnel_chart: Menghasilkan grafik funnel, digunakan untuk menampilkan kehilangan data pada berbagai tahap.
generate_histogram_chart: Menghasilkan histogram, digunakan untuk menampilkan distribusi data dengan membaginya ke dalam interval dan menghitung jumlah titik data di setiap interval.
generate_line_chart: Menghasilkan grafik line, digunakan untuk menampilkan tren data dari waktu ke waktu atau variabel kontinu lainnya.
generate_liquid_chart: Menghasilkan grafik liquid, digunakan untuk menampilkan proporsi data, secara visual mewakili persentase dalam bentuk bola berisi air.
generate_mind_map: Menghasilkan mind-map, digunakan untuk menampilkan proses berpikir dan informasi hierarkis.
generate_network_graph: Menghasilkan grafik network, digunakan untuk menampilkan hubungan dan koneksi antar node.
generate_organization_chart: Menghasilkan grafik organizational, digunakan untuk menampilkan struktur organisasi dan hubungan personel.
generate_path_map - Menghasilkan path-map, digunakan untuk menampilkan hasil perencanaan rute untuk POI.
generate_pie_chart: Menghasilkan grafik pie, digunakan untuk menampilkan proporsi data, membaginya menjadi bagian-bagian yang diwakili oleh sektor yang menunjukkan persentase setiap bagian.
generate_pin_map - Menghasilkan pin-map, digunakan untuk menampilkan distribusi POI.
generate_radar_chart: Menghasilkan grafik radar, digunakan untuk menampilkan data multidimensi secara komprehensif, menampilkan beberapa dimensi dalam format seperti radar.
generate_sankey_chart: Menghasilkan grafik sankey, digunakan untuk menampilkan aliran dan volume data, mewakili pergerakan data antara node yang berbeda dalam format gaya Sankey.
generate_scatter_chart: Menghasilkan plot scatter, digunakan untuk menampilkan hubungan antara dua variabel, menampilkan titik data sebagai titik-titik tersebar pada sistem koordinat.
generate_treemap_chart: Menghasilkan treemap, digunakan untuk menampilkan data hierarkis, menampilkan data dalam bentuk persegi panjang di mana ukuran persegi panjang mewakili nilai data.
generate_venn_chart: Menghasilkan diagram venn, digunakan untuk menampilkan hubungan antar himpunan, termasuk irisan, gabungan, dan selisih.
generate_violin_chart: Menghasilkan plot violin, digunakan untuk menampilkan distribusi data, menggabungkan fitur boxplot dan plot densitas untuk memberikan tampilan distribusi data yang lebih rinci.
generate_word_cloud_chart: Menghasilkan word-cloud, digunakan untuk menampilkan frekuensi kata dalam data tekstual, dengan ukuran font yang menunjukkan frekuensi setiap kata.
generate_spreadsheet: Menghasilkan spreadsheet atau tabel pivot untuk menampilkan data tabular. Ketika bidang 'rows' atau 'values' disediakan, ini dirender sebagai tabel pivot (tabulasi silang); jika tidak, ini dirender sebagai tabel biasa.

[!NOTE] Alat pembuatan grafik visualisasi geografis di atas menggunakan layanan AMap dan saat ini hanya mendukung pembuatan peta di dalam Tiongkok.

🤖 Penggunaan

Untuk digunakan dengan Desktop APP, seperti Claude, VSCode, Cline, Cherry Studio, Cursor, dan sebagainya, tambahkan konfigurasi server MCP di bawah ini. Pada sistem Mac:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Pada sistem Windows:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

Juga, Anda dapat menggunakannya di aliyun, modelscope, glama.ai, smithery.ai atau lainnya dengan Protokol HTTP, SSE.

🎨 Penggunaan Keterampilan

Jika Anda menggunakan IDE AI dengan dukungan keterampilan (seperti Claude Code), Anda dapat menggunakan keterampilan chart-visualization untuk secara otomatis memilih jenis grafik terbaik dan menghasilkan visualisasi.

Anda dapat menambahkan keterampilan dari https://github.com/antvis/chart-visualization-skills menggunakan:

npx skills add antvis/chart-visualization-skills

Kemudian berikan data Anda atau jelaskan visualisasi yang Anda inginkan. Keterampilan ini akan secara cerdas memilih dari 25+ jenis grafik dan menghasilkan grafik untuk Anda.

🚰 Menjalankan dengan transport SSE atau Streamable

Menjalankan langsung

Instal paket secara global.

npm install -g @antv/mcp-server-chart

Jalankan server dengan opsi transport pilihan Anda:

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Kemudian Anda dapat mengakses server di:

Transport SSE: http://localhost:1122/sse
Transport Streamable: http://localhost:1122/mcp

Penerapan Docker

Masuk ke direktori docker.

cd docker

Terapkan menggunakan docker-compose.

docker compose up -d

Kemudian Anda dapat mengakses server di:

Transport SSE: http://localhost:1123/sse
Transport Streamable: http://localhost:1122/mcp

🎮 Opsi CLI

Anda juga dapat menggunakan opsi CLI berikut saat menjalankan server MCP. Opsi perintah dengan menjalankan cli dengan -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Variabel Lingkungan

Variabel	Deskripsi	Default	Contoh
`VIS_REQUEST_SERVER`	URL layanan pembuatan grafik kustom untuk penerapan pribadi	`https://antv-studio.alipay.com/api/gpt-vis`	`https://your-server.com/api/chart`
`SERVICE_ID`	Pengidentifikasi layanan untuk catatan pembuatan grafik	-	`your-service-id-123`
`DISABLED_TOOLS`	Daftar nama alat yang dipisahkan koma untuk dinonaktifkan	-	`generate_fishbone_diagram,generate_mind_map`

📠 Penerapan Pribadi

MCP Server Chart menyediakan layanan pembuatan grafik gratis secara default. Bagi pengguna yang membutuhkan penerapan pribadi, mereka dapat mencoba menggunakan VIS_REQUEST_SERVER untuk menyesuaikan layanan pembuatan grafik mereka sendiri.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Anda dapat menggunakan proyek AntV GPT-Vis-SSR untuk menerapkan layanan HTTP di lingkungan pribadi, lalu meneruskan alamat URL melalui env VIS_REQUEST_SERVER.

Metode: POST
Parameter: Yang akan diteruskan ke GPT-Vis-SSR untuk rendering. Seperti, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
Kembalian: Objek kembalian dari layanan HTTP.
- success: boolean Apakah berhasil menghasilkan gambar grafik.
- resultObj: string URL gambar grafik.
- errorMessage: string Ketika success = false, kembalikan pesan kesalahan.

[!NOTE] Solusi penerapan pribadi saat ini tidak mendukung pembuatan grafik visualisasi geografis termasuk 3 alat: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Catatan Pembuatan

Secara default, pengguna diharuskan menyimpan hasilnya sendiri, tetapi kami juga menyediakan layanan untuk melihat catatan pembuatan grafik, yang mengharuskan pengguna membuat pengidentifikasi layanan untuk diri mereka sendiri dan mengonfigurasinya.

Gunakan Alipay untuk memindai dan membuka program mini untuk menghasilkan pengidentifikasi layanan pribadi (klik menu "Saya" di bawah, masuk ke halaman "Layanan Saya", klik tombol "Hasilkan", dan klik tombol "Salin" setelah berhasil):

Selanjutnya, Anda perlu menambahkan variabel lingkungan SERVICE_ID ke konfigurasi server MCP. Misalnya, konfigurasi untuk Mac adalah sebagai berikut (untuk sistem Windows, cukup tambahkan variabel env):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

Setelah memperbarui konfigurasi Server MCP, Anda perlu memulai ulang aplikasi klien AI Anda dan periksa kembali apakah Anda telah memulai dan terhubung ke Server MCP dengan sukses. Kemudian Anda dapat mencoba menghasilkan peta lagi. Setelah pembuatan berhasil, Anda dapat pergi ke halaman "Peta Saya" dari program mini untuk melihat catatan pembuatan peta Anda.

🎛️ Penyaringan Alat

Anda dapat menonaktifkan alat pembuatan grafik tertentu menggunakan variabel lingkungan DISABLED_TOOLS. Ini berguna ketika alat tertentu memiliki masalah kompatibilitas dengan klien MCP Anda atau ketika Anda ingin membatasi fungsionalitas yang tersedia.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

Nama alat yang tersedia untuk penyaringan Lihat ✨ Fitur.

🔨 Pengembangan

Instal dependensi:

npm install

Bangun server:

npm run build

Mulai server MCP:

npm run start

Mulai server MCP dengan transport SSE:

node build/index.js -t sse

Mulai server MCP dengan transport Streamable:

node build/index.js -t streamable

📄 Lisensi

MIT@AntV.