AntV Chart MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

하나의 서버로 25개 이상의 차트 유형 지원
차트당 선언적 명세 — 데이터 + 축 + 스타일
호스팅된 URL 또는 삽입 가능한 인라인 이미지 반환
API 키 불필요, 사용 비용 없음 — 순수 클라이언트/서버 렌더링
DB MCP와의 조합으로 자동 차트화된 보고서 생성 가능

라이브 데모

실제 사용 모습

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는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

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

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "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는 맵이 아닌 서버 오브젝트 배열 사용.

~/.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

한 프롬프트로 Postgres 쿼리 결과를 차트화하기

👤 CSV가 아닌 시각화가 필요한 분석가 ⏱ ~5 min beginner

언제 쓸까: 쿼리를 실행한 직후; 다음 자연스러운 단계는 '이것을 막대 차트로 보여주세요'입니다.

사전 조건

행으로 표현된 데이터(다른 MCP에서 가져오거나 붙여넣기) — 보통 postgres/mongodb/duckdb 쿼리의 출력

흐름

적절한 차트 유형 선택하기

이 데이터[카테고리 + 값이 있는 행을 붙여넣기]가 주어졌을 때 어떤 AntV 차트가 가장 적합합니까? 옵션: bar, column, pie, line.✓ 복사됨

→ 정당화된 선택(예: 'column — 카테고리 vs 값, ≤20개 카테고리')
렌더링

x=카테고리, y=값, title '<제목>'인 열 차트를 생성하세요. 이미지 URL을 반환하세요.✓ 복사됨

→ URL 또는 base64 이미지
스타일 반복하기

동일한 차트이지만 막대를 값 내림차순으로 정렬하고, 데이터 레이블을 추가하고, 단일 색상(청록색)을 사용하세요.✓ 복사됨

→ 개선된 차트 이미지

결과: 그리기 라이브러리를 건드리지 않고 30초 안에 보고서용 차트 이미지 생성

함정

너무 많은 카테고리는 막대 차트를 읽기 어렵게 만듭니다 — 상위 15개 + '기타'로 제한하고, 높은 카디널리티 데이터에는 트리맵이나 히트맵을 사용하세요

함께 쓰기: postgres · mongodb

이벤트 개수로부터 전환 펀넬 시각화하기

👤 성장 / 제품 분석가 ⏱ ~15 min intermediate

언제 쓸까: 단계별 이벤트 개수(가입 → 검증 → 첫 동작 → 결제)가 있고 펀넬 차트가 필요할 때

흐름

단계별 개수 얻기

Postgres에서: 지난 30일 동안 각 펀넬 단계에서 고유 사용자를 순서대로 집계하세요.✓ 복사됨

→ 단계 + 개수 행
펀넬 렌더링

해당 단계로 AntV 펀넬 차트를 생성하세요. 절대 개수와 단계별 전환 %를 표시하세요.✓ 복사됨

→ 레이블이 있는 펀넬 이미지
세그먼트 비교

이제 2개의 펀넬을 나란히 생성하세요: 모바일 vs 데스크톱. 동일한 단계이지만 가장 큰 이탈 차이에 주석을 붙이세요.✓ 복사됨

→ 비교 시각화

결과: 세그먼트 비교가 포함된 붙여넣기 가능한 펀넬 시각화

함정

중복되지 않은 이벤트를 집계하면 이후 단계가 부풀어집니다 — 항상 각 단계에서 고유 user_id를 집계하고, 이벤트 행을 집계하지 마세요

함께 쓰기: postgres

관계를 위한 산키 또는 트리 다이어그램 생성하기

👤 흐름이나 계층 구조를 설명하는 모든 사람 ⏱ ~15 min intermediate

언제 쓸까: '소스별 트래픽 → 방문 → 전환' 또는 조직도를 표시하려고 할 때

흐름

데이터 형성하기

소스 → 대상 → 값 엣지[붙여넣기]가 있습니다. AntV 산키용으로 형성하세요.✓ 복사됨

→ 정규화된 엣지 배열
산키 렌더링

노드 레이블과 링크 가중치가 있는 산키를 생성하세요. '3-color' 팔레트를 사용하세요.✓ 복사됨

→ 산키 이미지
트리로 대체

계층적인 경우, 트리맵 또는 조직 트리로 렌더링하세요 — 동일한 데이터, 다른 차트 유형.✓ 복사됨

→ 대체 시각화

결과: 첫 시도에 당신의 이야기에 적합한 관계 시각화

함정

노드가 너무 많은 산키는 스파게티가 됩니다 — 작은 소스를 '기타'로 병합하고, 계층당 ≤20개 노드를 유지하세요

함께 쓰기: neo4j

조합

다른 MCP와 조합해 10배 효율

antv-chart + postgres

PM 보고서를 위해 한 프롬프트에서 쿼리 → 차트

Postgres에서 지난 12주의 주간 가입을 쿼리하고, 추세의 AntV 라인 차트를 생성하세요.✓ 복사됨

antv-chart + mongodb

문서 데이터 집계 및 시각화

Mongo에서 이번 분기의 주문을 국가별로 집계하고, 내림차순으로 정렬한 열 차트로 렌더링하세요.✓ 복사됨

antv-chart + filesystem

생성된 이미지를 보고서 마크다운 옆에 저장하기

펀넬 차트를 렌더링하고, PNG를 /reports/funnel-<date>.png로 저장하고, /reports/weekly.md에 임베드하세요.✓ 복사됨

antv-chart + notion

차트를 Notion 보고서 페이지에 임베드하기

3개의 주간 KPI 차트를 생성하고, 각 차트 URL이 이미지 블록으로 임베드된 Notion 페이지를 만드세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
generate_line_chart / generate_column_chart / generate_bar_chart	data: row[], x, y, title?, style?	시계열 / 카테고리 비교	무료
generate_pie_chart / generate_donut_chart	data, value, category, title?	≤6개 카테고리일 때 부분 대 전체	무료
generate_funnel_chart	data: [{step, value}]	전환 흐름	무료
generate_sankey_chart	nodes, links: [{source,target,value}]	카테고리 간 흐름	무료
generate_scatter_chart / generate_bubble_chart	data, x, y, size?, color?	상관 관계 또는 분포 탐색	무료
generate_radar_chart	data: {dimensions, series}	≤2개 항목 간 다차원 비교	무료
generate_word_cloud_chart	data: [{word, weight}]	텍스트 빈도 시각화	무료
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart	data, fields	분포 및 중첩된 카테고리	무료

비용 및 제한

운영 비용

API 쿼터: 인증 불필요; 실제 속도 제한은 호스팅된 백엔드에 따라 다릅니다(~합리적인 대화형 사용)
호출당 토큰: 명세 + 응답: 300–1500 토큰
금액: 무료 — npx를 통해 로컬에서 실행하거나 AntV의 공개 렌더 서비스에 대해 실행
팁: 차트당 몇 백 개 미만의 데이터 포인트를 유지하세요; 원본 이벤트가 아닌 집계된 데이터를 전송하세요.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 필요 없음

데이터 외부 송신: 명세에 전달하는 데이터는 이미지 URL을 생성하기 위해 AntV의 렌더링 서비스로 전송됩니다 — 개인 식별 정보나 기밀 데이터를 전송하지 마세요

호스팅된 엔드포인트를 통해 차트화하는 모든 것은 네트워크를 떠납니다. 민감한 데이터의 경우 렌더러를 자체 호스팅하거나 사전 집계하세요.

문제 해결

자주 발생하는 오류와 해결

Invalid data format / missing field

각 차트 유형은 특정 형태를 예상합니다; 도구의 입력을 다시 확인하세요 — funnel은 {step, value}, sankey는 {source, target, value}를 원합니다.

Returned URL 404 after a while

호스팅된 URL은 만료됩니다. 지속성이 필요한 경우 생성 직후 이미지를 로컬(파일시스템)로 저장하세요.

Chart unreadable — too many bars/nodes

상위 N개 + 기타로 집계하거나, 카디널리티에 더 적합한 차트 유형(sankey/treemap)으로 전환하세요.

대안

AntV Chart 다른 것과 비교

대안	언제 쓰나	단점/장점
QuickChart	URL을 통해 Chart.js 스타일 차트를 원할 때	AntV보다 니치한 차트 유형이 더 적습니다
Mermaid MCP	데이터 차트가 아닌 다이어그램(플로우차트, 시퀀스)이 필요할 때	수치 데이터 시각화에는 적합하지 않습니다
Vega-Lite MCP	그래픽 문법 접근 방식을 원할 때	더 가파른 명세; 더 많은 유연성

AntV Chart