amCharts 5 MCP Server

amCharts 5 MCP 서버

AI 어시스턴트에게 완전한 amCharts 5 지식 베이스에 대한 온디맨드 액세스를 제공하는 MCP (모델 컨텍스트 프로토콜) 서버: 140개 이상의 문서 페이지, 280개 이상의 코드 예제, 1,000개 이상의 클래스 API 참조.

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

왜 필요한가요?

전체 amCharts 참조를 AI의 컨텍스트 창에 로드하는 대신, MCP 서버는 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 서버 패널 → 원격 서버를 열고 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 엔드포인트 (스트리밍 가능 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	키워드로 스킬 참조 문서 검색
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")을 호출합니다
• "Sankey 다이어그램 예제를 보여줘" → 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개 이상의 코드 예제 — 열/막대, 선/영역, 파이/도넛, 지도, 계층 구조, 흐름, 레이더/극좌표, 주식, 게이지, Gantt, 타임라인 등을 포함한 16개 카테고리의 작동 데모
• 1,000개 이상의 클래스 API 참조 — 설정, 속성, 메서드, 이벤트 및 상속 체인을 포함한 amCharts 5 라이브러리의 모든 클래스
• 큐레이션된 스킬 참조 — amCharts 5 AI 스킬의 빠른 시작 템플릿 및 차트별 가이드

라이선스

MIT