amCharts 5 MCP Server

공식

MCP 서버로, AI 어시스턴트가 필요 시 1,500개 이상의 amCharts 문서, 약 300개의 코드 예제, 1,000개 이상의 클래스 API 참조에 접근할 수 있게 해줍니다.

amCharts 5 MCP(으)로 무엇을 할 수 있나요?

차트 빠른 시작 템플릿 — 파이 차트나 생키 차트 등 모든 차트 유형에 대해 자신의 코드에 맞게 적용할 수 있는 최소한의 작동 템플릿을 요청하세요.
문서 및 예제 검색 — 스킬 문서, 전체 문서, 290개 이상의 코드 예제를 키워드로 검색하여 관련 가이드를 찾으세요.
차트 유형 및 예제 탐색 — 사용 가능한 차트 유형을 나열하거나 카테고리별로 필터링된 예제를 탐색한 후, 특정 예제의 전체 코드를 가져오세요.
API 참조 조회 — 모든 amCharts 5 클래스, 인터페이스 또는 함수에 대한 기본값이 포함된 설정, 이벤트, 상속, import 줄을 조회하세요.
지도 지오데이터 탐색 — CDN 경로와 import 세부 정보가 포함된 세계, 대륙, 국가, 지역 및 미국 의회 선거구 팩을 포함한 지도 파일을 찾으세요.
프레임워크 통합 가이드 — Next.js, Nuxt, SvelteKit 설정을 포함하여 React, Vue, Angular, Svelte, React Native 통합을 다루는 문서를 검색하세요.

문서

amCharts 5 MCP Server

AI 어시스턴트가 완전한 amCharts 5 지식 베이스에 온디맨드로 접근할 수 있게 해주는 MCP (Model Context Protocol) 서버입니다: 160개 이상의 문서 페이지, 290개 이상의 코드 예제, 1,300개 이상의 API 레퍼런스 페이지.

Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot 및 기타 MCP 호환 AI 도구와 함께 작동합니다.

왜 필요한가요?

MCP 서버는 전체 amCharts 레퍼런스를 AI의 컨텍스트 윈도우에 로드하는 대신, AI가 필요한 것만 정확히 쿼리할 수 있게 해줍니다 — 특정 차트 유형 레퍼런스, 코드 예제, 또는 API 조회 등입니다. 이는 더 적은 컨텍스트 낭비로 더 나은 답변을 의미합니다.

빠른 시작

가장 쉬운 방법은 호스팅 서버입니다 — 설치 없이 URL 하나만 추가하면 됩니다. 직접 실행하고 싶으신가요? 아래의 로컬 설치를 참고하세요.

호스팅 (설치 불필요) — 권장

AI 클라이언트를 다음 주소로 지정하세요:

https://mcp.amcharts.com/mcp

Claude Code

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

Claude Desktop / claude.ai — 설정 → 커넥터 → 사용자 지정 커넥터 추가를 선택한 후 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) — 설정 → 커넥터 → 사용자 지정 커넥터 추가를 선택한 후 https://mcp.amcharts.com/mcp을 붙여넣으세요.

Cline (VS Code 확장) — MCP Servers 패널 → Remote Servers를 열고 https://mcp.amcharts.com/mcp을 붙여넣거나, MCP 설정 JSON에 추가하세요:

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

로컬(stdio) 서버만 지원하는 클라이언트 (예: Zed, Continue, Amazon Q Developer) — mcp-remote로 호스팅 URL에 브리지하세요. 클라이언트 설정에서 서버의 실행 명령으로 다음을 사용하세요:

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

예를 들어, command/args 스타일 설정에서:

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

원격 서버 URL을 허용하는 다른 MCP 클라이언트도 모두 작동합니다 — /mcp 엔드포인트(Streamable HTTP) 또는 /sse(레거시 SSE)을 사용하세요. 여전히 명령을 기대하는 URL 전용 클라이언트의 경우, 위에 표시된 mcp-remote 브리지를 사용하세요.

로컬 설치 (npx)

직접 실행하고 싶으신가요? 서버는 npm에도 게시되어 있으며 stdio를 통해 실행됩니다.

Claude Code

모든 프로젝트에 대해 (전역, 권장):

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

현재 프로젝트만:

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

Claude Desktop

claude_desktop_config.json에 추가하세요:

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

Cursor

프로젝트 루트에 .cursor/mcp.json를 생성하거나 편집하세요 (전역의 경우 ~/.cursor/mcp.json):

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

Windsurf

~/.codeium/windsurf/mcp_config.json을 편집하세요:

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

VS Code + GitHub Copilot

워크스페이스에 .vscode/mcp.json을 생성하거나 편집하세요:

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

기타 MCP 호환 도구

MCP를 지원하는 다른 도구(Cline, Continue, Amazon Q, Zed 등)의 경우, 다음을 실행하도록 구성하세요:

npx -y @amcharts/amcharts5-mcp

로컬 실행 (개발용)

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

사용 가능한 도구

도구	설명
`get_core_reference`	핵심 amCharts 5 문서 가져오기 — 설정, 테마, 색상, 이벤트, 일반적인 함정
`get_chart_reference`	차트 유형의 전체 레퍼런스 가져오기 (예: "pie", "sankey", "xy")
`list_chart_types`	사용 가능한 모든 차트 유형과 해당 키워드 나열
`search_docs`	스킬 레퍼런스 문서를 키워드로 검색 (`scope: "all"`는 전체 문서, API 레퍼런스 및 예제를 추가)
`search_all`	모든 것에서 검색 — 스킬 문서, 전체 문서, 코드 예제
`get_doc`	전체 문서 페이지 가져오기 (예: "charts/xy-chart/axes", "concepts/events")
`get_section`	제목으로 레퍼런스 파일에서 특정 섹션 가져오기
`get_quick_start`	모든 차트 유형에 대한 최소한의 작동 템플릿 가져오기
`list_examples`	290개 이상의 모든 예제 탐색, 선택적으로 카테고리별 필터링
`get_example`	특정 예제의 전체 코드 가져오기
`get_api_reference`	클래스, 인터페이스 또는 함수의 API 레퍼런스 가져오기 — 기본값이 있는 설정, 이벤트, 상속 및 import 줄
`list_geodata`	맵(지오데이터) 파일 찾기 — 세계, 대륙, 국가, 지역 팩 및 의회별 미국 하원 선거구 팩 — 각 파일의 CDN 경로, 스크립트 전역 및 ES import 포함

사용 예시

연결되면 AI 어시스턴트가 다음을 수행할 수 있습니다:

"파이 차트를 만들어줘" → AI가 get_quick_start("pie")을 호출하고 템플릿을 조정
"날짜 축 레이블은 어떻게 포맷하나요?" → AI가 search_all("date axis label format")를 호출
"Sankey 다이어그램 예제를 보여줘" → AI가 get_example("examples/flow/sankey-diagram")을 호출
"XYChart는 어떤 설정을 지원하나요?" → AI가 get_doc("reference/xychart")를 호출
"React와 어떻게 통합하나요?" → AI가 get_doc("getting-started/integrations/react")를 호출하며, 이는 @amcharts/amcharts5-react 패키지를 다룸
"어떤 차트 유형이 있나요?" → AI가 list_chart_types()을 호출
"현재 미국 하원 선거구를 매핑해줘" → AI가 list_geodata("congressional whole country")을 호출

콘텐츠

서버에는 1,800개 이상의 문서가 포함되어 있습니다:

160개 이상의 문서 페이지 — 시작하기, 차트 가이드, 개념(테마, 이벤트, 어댑터, 데이터 바인딩, 애니메이션, 접근성 등), 그리고 amCharts의 React, Vue, Angular, Svelte 및 React Native 패키지에 대한 프레임워크 통합 가이드 (Next.js, Nuxt, SvelteKit, React Router 및 Remix 3 포함)
290개 이상의 코드 예제 — column/bar, line/area, pie/donut, maps, hierarchy, flow, radar/polar, stock, gauges, Gantt, timeline 등 16개 카테고리에 걸친 작동하는 데모
1,300개 이상의 API 레퍼런스 페이지 — amCharts 5 라이브러리의 모든 클래스, 인터페이스 및 함수로, 릴리스의 타입 정의에서 생성됨: 실제 기본값이 있는 설정(테마 규칙 포함), 이벤트, 속성, 데이터 항목 필드, 상속 체인 및 import 줄
670개 이상의 지오데이터 항목 — @amcharts/amcharts5-geodata의 모든 맵, list_geodata용
큐레이션된 스킬 레퍼런스 — amCharts 5 AI Skill의 빠른 시작 템플릿 및 차트별 가이드

보안

읽기 전용 도구. 모든 도구는 번들된 amCharts 문서를 읽고 텍스트를 반환합니다. 어떤 도구도 파일을 쓰거나, 명령을 실행하거나, URL을 가져오지 않습니다.
호스팅 엔드포인트는 설계상 인증이 없습니다. https://mcp.amcharts.com/mcp은 amcharts.com과 동일한 공개 문서를 제공합니다. 계정, API 키, 사용자 데이터 또는 쓰기 작업은 없습니다.
- Cloudflare Workers에서 실행됩니다.
- MCP 세션 상태는 MCP 에이전트 프레임워크가 요구하는 대로 Durable Object에 보관됩니다. 세션이 종료되거나 마지막 요청 후 24시간이 지나면 삭제됩니다.
- 요청별 로그(Workers 호출 로그)는 꺼져 있습니다. 오류 메시지만 기록되며, 도구 인수는 포함하지 않습니다. 아래 "개인정보"를 참고하세요.
로컬 설치. npm 패키지는 사용자 컴퓨터에서 stdio를 통해 실행되며 패키지에 번들된 콘텐츠만 읽습니다. 네트워크 요청을 하지 않습니다. 런타임 의존성은 @modelcontextprotocol/sdk와 zod뿐입니다.
유지관리자 스크립트. scripts/의 스크립트(데모 및 문서 스크레이퍼, API 레퍼런스 생성기)는 npm 패키지의 일부가 아니며 서버에서 실행되지 않습니다.
취약점 신고: https://www.amcharts.com/report-vulnerability/

개인정보

호스팅 서버와 npm 패키지 모두 계정이 필요하지 않으며 개인 데이터를 요청하지 않습니다.

호스팅 서버 (https://mcp.amcharts.com/mcp):
- AI 앱이 보내는 것: 검색어, 차트 유형, 문서 경로. 이는 답변을 구성하는 데만 사용되며 기록되거나 저장되지 않습니다. 응답은 전달될 때까지(끊긴 스트림이 재개될 수 있도록) 세션의 저장소에 보관된 후 삭제됩니다.
- 세션 기록: AI 앱이 연결하면 서버는 해당 MCP 초기화 메시지를 세션의 저장소에 보관합니다. 이 메시지에는 앱이 자신에 대해 말하는 정보(이름과 버전, 그리고 그곳에 넣는 기타 정보), 프로토콜 버전 및 앱의 MCP 기능이 포함됩니다. 세션의 저장소는 앱이 세션을 종료하거나 마지막 요청 후 24시간이 지나면 모두 삭제됩니다.
- 로그: 서버는 요청 로그를 보관하지 않습니다(Workers 호출 로그는 꺼져 있음). Cloudflare Workers에서 실행되며, Cloudflare는 요청을 전달하기 위해 각 요청(IP 주소 포함)을 처리합니다. 오류 및 경고 메시지는 기록되며 최대 7일간 보관됩니다. 이에는 요청 내용이나 도구 인수가 포함되지 않습니다.
npm 패키지: 사용자 컴퓨터에서 stdio를 통해 실행되며 amCharts나 다른 누구에게도 아무것도 전송하지 않습니다.
정책 및 문의: amCharts 개인정보 처리방침을 참고하거나 contact@amcharts.com으로 문의하세요.

라이선스

MIT