AntV Chart MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

25+ chart types covered by one server
Declarative spec per chart — data + axis + style
Returns a hosted URL or inline image you can embed
No API key, no usage cost — purely client/server rendering
Great pairing with DB MCPs for auto-charted reports

Живое демо

Как выглядит на практике

antv-chart.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

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

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

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

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add antv-chart -- npx -y @antv/mcp-server-chart

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: AntV Chart

Chart a Postgres query result in one prompt

👤 Analysts who want a picture, not a CSV ⏱ ~5 min beginner

Когда использовать: You just ran a query; next natural step is 'show me this as a bar chart'.

Предварительные требования

Data as rows (from any other MCP or pasted) — Usually output of a postgres/mongodb/duckdb query

Поток

Pick the right chart type

Given this data [paste rows with category + value], which AntV chart fits best? Options: bar, column, pie, line.✓ Скопировано

→ Justified pick (e.g. 'column — category vs value, ≤20 categories')
Render

Generate a column chart with x=category, y=value, title '<Title>'. Return the image URL.✓ Скопировано

→ URL or base64 image
Iterate on style

Same chart but sort bars by value desc, add data labels, use a single color (teal).✓ Скопировано

→ Refined chart image

Итог: A report-ready chart image in 30 seconds without touching a plotting library.

Подводные камни

Too many categories makes a bar chart unreadable — Cap at top 15 + 'Other'; use a treemap or heatmap for higher-cardinality data

Сочетать с: postgres · mongodb

Visualize a conversion funnel from event counts

👤 Growth / product analysts ⏱ ~15 min intermediate

Когда использовать: You have step-by-step event counts (signup → verify → first-action → paid) and need a funnel chart.

Поток

Get step counts

From Postgres: count distinct users at each funnel step in the last 30 days, in order.✓ Скопировано

→ Step + count rows
Render funnel

Generate an AntV funnel chart with those steps. Show absolute count and step-to-step conversion %.✓ Скопировано

→ Funnel image with labels
Compare segments

Now generate 2 funnels side-by-side: mobile vs desktop. Same steps; annotate biggest drop-off differences.✓ Скопировано

→ Comparison visualization

Итог: A ready-to-paste funnel visual with segment comparison.

Подводные камни

Counting non-unique events inflates later steps — Always count distinct user_id per step, not event rows

Сочетать с: postgres

Generate a sankey or tree diagram for relationships

👤 Anyone explaining flows or hierarchies ⏱ ~15 min intermediate

Когда использовать: You want to show 'traffic by source → landing → conversion' or an org chart.

Поток

Shape your data

I have source → destination → value edges [paste]. Shape them for an AntV sankey.✓ Скопировано

→ Normalized edges array
Render sankey

Generate the sankey with node labels and link weights. Use the '3-color' palette.✓ Скопировано

→ Sankey image
Alternative as tree

If hierarchical instead, render as a treemap or org tree — same data, different chart type.✓ Скопировано

→ Alternative visualization

Итог: The right relationship visualization for your story, first try.

Подводные камни

Sankey with too many nodes becomes spaghetti — Merge small sources into 'Other'; keep ≤20 nodes per layer

Сочетать с: neo4j

Комбинации

Сочетайте с другими MCP — эффект x10

antv-chart + postgres

Query → chart in one prompt for PM reports

Query weekly signups for the last 12 weeks from Postgres, then generate an AntV line chart of the trend.✓ Скопировано

antv-chart + mongodb

Aggregate + visualize doc data

Aggregate orders by country this quarter from Mongo, render as a column chart sorted desc.✓ Скопировано

antv-chart + filesystem

Save the generated image alongside a report markdown

Render the funnel chart, save the PNG to /reports/funnel-<date>.png, and embed in /reports/weekly.md.✓ Скопировано

antv-chart + notion

Embed charts into a Notion report page

Generate the three weekly KPI charts; create a Notion page with each chart URL embedded as an image block.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
generate_line_chart / generate_column_chart / generate_bar_chart	data: row[], x, y, title?, style?	Time-series / categorical comparisons	free
generate_pie_chart / generate_donut_chart	data, value, category, title?	Part-of-whole when ≤6 categories	free
generate_funnel_chart	data: [{step, value}]	Conversion flows	free
generate_sankey_chart	nodes, links: [{source,target,value}]	Flow between categories	free
generate_scatter_chart / generate_bubble_chart	data, x, y, size?, color?	Correlation or distribution exploration	free
generate_radar_chart	data: {dimensions, series}	Multi-dimensional comparison across ≤2 entities	free
generate_word_cloud_chart	data: [{word, weight}]	Text-frequency visualization	free
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart	data, fields	Distributions and nested categories	free

Стоимость и лимиты

Во что обходится

Квота API: No auth; practical rate-limit depends on the hosted backend (~reasonable interactive use)
Токенов на вызов: Spec + response: 300–1500 tokens
Деньги: Free — runs locally via npx / against AntV's public render service
Совет: Keep data points under a few hundred per chart; send aggregated data, not raw events.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: None required

Исходящий трафик: Data you pass in the spec is sent to AntV's rendering service to produce the image URL — do not send PII or confidential data

Anything you chart via the hosted endpoint leaves your network. For sensitive data, self-host the renderer or pre-aggregate.

Устранение неполадок

Частые ошибки и исправления

Invalid data format / missing field

Each chart type expects a specific shape; re-check the tool's inputs — funnel wants {step, value}, sankey wants {source, target, value}.

Returned URL 404 after a while

Hosted URLs expire. Save the image locally (filesystem) right after generation if you need persistence.

Chart unreadable — too many bars/nodes

Aggregate to top-N + Other, or switch chart type (sankey/treemap) better suited to cardinality.

Альтернативы

AntV Chart в сравнении

Альтернатива	Когда использовать	Компромисс
QuickChart	You want Chart.js-style charts via URL	Fewer niche chart types than AntV
Mermaid MCP	You need diagrams (flowcharts, sequence), not data charts	Not suitable for numerical data visualization
Vega-Lite MCP	You want a grammar-of-graphics approach	Steeper spec; more flexibility

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills