amCharts 5 MCP 서버

Name: amCharts 5 MCP Server
Author: amcharts

AI 어시스턴트가 전체 amCharts 5 지식 베이스(140개 이상의 문서 페이지, 280개 이상의 코드 예제, 1,000개 이상의 클래스 API 참조)에 온디맨드로 액세스할 수 있게 해주는 MCP (Model Context Protocol) 서버입니다.

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

왜 필요한가요?

amCharts 참조 전체를 AI의 컨텍스트 창에 로드하는 대신, MCP 서버를 사용하면 AI가 필요한 정보만 정확하게 쿼리할 수 있습니다(특정 차트 유형 참조, 코드 예제 또는 API 조회). 이를 통해 컨텍스트 낭비를 줄이고 더 나은 답변을 얻을 수 있습니다.

빠른 시작

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`	키워드로 기술 참조 문서 검색
`search_all`	모든 항목 검색 — 기술 문서, 전체 문서 및 코드 예제
`get_doc`	전체 문서 페이지 가져오기 (예: "charts/xy-chart/axes", "concepts/events")
`get_section`	제목을 기준으로 참조 파일의 특정 섹션 가져오기
`get_quick_start`	모든 차트 유형에 대한 최소 작동 템플릿 가져오기
`list_examples`	283개의 모든 예제 탐색 (카테고리별 필터링 가능)
`get_example`	특정 예제에 대한 전체 코드 가져오기

사용 예시

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

"파이 차트 만들어줘" → AI가 get_quick_start("pie")를 호출하고 템플릿을 조정합니다.
"날짜 축 레이블 형식은 어떻게 지정하나요?" → AI가 search_all("date axis label format")을 호출합니다.
"생키 다이어그램 예제를 보여줘" → AI가 get_example("examples/flow/sankey-diagram")을 호출합니다.
"XYChart는 어떤 설정을 지원하나요?" → AI가 get_doc("reference/xychart")를 호출합니다.
"React와는 어떻게 통합하나요?" → AI가 get_doc("getting-started/integrations/react")를 호출합니다.
"어떤 차트 유형을 사용할 수 있나요?" → AI가 list_chart_types()를 호출합니다.

콘텐츠

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

140개 이상의 문서 페이지 — 시작하기, 차트 가이드, 개념(테마, 이벤트, 어댑터, 데이터 바인딩, 애니메이션, 접근성 등) 및 프레임워크 통합 가이드(React, Angular, Vue, Next.js, Svelte 등)
280개 이상의 코드 예제 — 컬럼/바, 라인/영역, 파이/도넛, 지도, 계층 구조, 흐름, 레이더/극좌표, 스톡, 게이지, 간트, 타임라인 등을 포함한 16개 카테고리의 작동 데모
1,000개 이상의 클래스 API 참조 — 설정, 속성, 메서드, 이벤트 및 상속 체인을 포함한 amCharts 5 라이브러리의 모든 클래스
엄선된 기술 참조 — amCharts 5 AI Skill에서 제공하는 빠른 시작 템플릿 및 차트별 가이드

라이선스

MIT

amCharts 5 MCP Server