mcp-highcharts

AI 채팅(VS Code, GitHub Copilot, Claude Desktop 또는 MCP Apps를 지원하는 모든 MCP 클라이언트) 내에서 대화형 Highcharts 차트를 인라인으로 렌더링합니다.

Install in VS Code Install in VS Code Insiders npm

Code_-_Insiders_15uBYM8FHt

설정

위의 배지를 클릭하거나 MCP 구성에 추가하세요:

{
  "mcp": {
    "servers": {
      "highcharts": {
        "command": "npx",
        "args": ["-y", "mcp-highcharts@latest"]
      }
    }
  }
}

claude_desktop_config.json에 추가:

{
  "mcpServers": {
    "highcharts": {
      "command": "npx",
      "args": ["-y", "mcp-highcharts@latest"]
    }
  }
}

npx mcp-highcharts@latest --http          # http://localhost:3001/mcp
PORT=8080 npx mcp-highcharts@latest --http  # custom port

도구

도구	설명
`render_chart`	모든 차트 유형 — 선, 막대, 파이, 산점도, 히트맵, 생키, 게이지, 트리맵, 워드클라우드 및 60개 이상
`render_stock_chart`	내비게이터, 범위 선택기 및 40개 이상의 기술적 지표가 포함된 금융 차트
`render_dashboard`	차트, KPI 및 데이터 그리드가 포함된 다중 구성 요소 레이아웃
`render_map`	등치 지역도, 맵 버블, 맵 포인트 (CDN에서 맵 데이터를 자동으로 가져옴)
`render_gantt`	작업, 종속성 및 마일스톤이 포함된 프로젝트 타임라인
`render_grid`	정렬, 페이지 매기기 및 서식 지정이 가능한 독립형 데이터 테이블

모든 도구는 전체 Highcharts Options API를 허용합니다.

프롬프트

프롬프트	기능
`chart_from_data`	데이터 붙여넣기 → 최적의 차트 생성
`dashboard_layout`	대시보드 스캐폴딩
`stock_analysis`	캔들스틱 + 거래량 + 지표
`comparison_chart`	나란히 비교하는 패턴
`project_timeline`	종속성이 포함된 간트 차트
`live_chart`	데이터 URL에서 실시간 업데이트되는 차트

구성

테마

차트는 호스트의 라이트/다크 모드에 자동으로 적응합니다. 환경 변수로 재정의할 수 있습니다:

{
  "env": {
    "HIGHCHARTS_THEME": "dark-unica",
    "HIGHCHARTS_OPTIONS": "./my-theme.json"
  }
}

HIGHCHARTS_OPTIONS는 .json, .js, .mjs, .ts 또는 인라인 JSON을 허용합니다.

내장 테마: adaptive (기본값), avocado, brand-dark, brand-light, dark-blue, dark-green, dark-unica, gray, grid, grid-light, high-contrast-dark, high-contrast-light, sand-signika, skies, sunset

스키마 깊이

LLM으로 전송되는 유형 정보의 양을 제어합니다:

{ "env": { "SCHEMA_DEPTH": "1" } }

깊이	설명
`0`	속성 이름만 — 컨텍스트 오버헤드 없음
`1` (기본값)	최상위 유형 + 설명 + 예시
`2`	한 단계의 유형화된 자식
`3`	두 단계 깊이 — 전체 재귀적 Highcharts 유형 트리

데이터 소스

실시간 업데이트 차트의 경우 data.csvURL 및 data.enablePolling: true와 함께 Highcharts 데이터 모듈을 사용하세요.

이미지 내보내기 (앱 미지원 시 대체)

MCP Apps를 지원하지 않는 MCP 클라이언트의 경우, 서버 측 이미지 내보내기를 활성화하여 도구 응답에 각 차트의 PNG 스크린샷을 포함할 수 있습니다:

{
  "env": {
    "IMAGE_EXPORT": "true"
  }
}

차트는 PNG로 렌더링되어 base64 이미지 콘텐츠 블록으로 반환됩니다. 대화형 MCP 앱은 여전히 지원되는 클라이언트를 위해 포함됩니다.

렌더링 전략 (자동):

로컬 (Puppeteer) — highcharts-export-server가 설치된 경우, 차트는 헤드리스 브라우저를 통해 로컬에서 렌더링됩니다. 네트워크 호출이 없어 가장 빠른 옵션입니다.
원격 대체 — 로컬을 사용할 수 없는 경우, 차트 구성이 Highcharts Export Server로 POST됩니다.

로컬 렌더링을 활성화하려면 선택적 피어 종속성을 설치하세요:

npm install highcharts-export-server

사용자 지정 원격 내보내기 서버를 사용하려면:

{
  "env": {
    "IMAGE_EXPORT": "true",
    "EXPORT_SERVER_URL": "https://your-export-server.example.com/"
  }
}

프로그래밍 방식으로 활성화할 수도 있습니다: createServer({ imageExport: true }).

참고: 이미지 내보내기는 표준 차트, 주식 차트 및 간트 차트에서 작동합니다. 대시보드, 데이터 그리드 및 문자열 기반 맵 키(예: "custom/world")를 사용하는 맵은 내보낼 수 없으며 텍스트 전용 결과가 반환됩니다.

개발

npm install
node scripts/generate-from-tree.mjs --multi   # generate Zod schemas at depths 0, 1, 2
npm run build
npm test

프로젝트 구조

main.ts                  Entry point (stdio + HTTP transports)
server.ts                MCP server — tool registrations and handlers
src/
  export-image.ts        Server-side PNG export (local Puppeteer + remote fallback)
  input-schema.ts        Depth-based schema selection + LLM-friendly overrides
  mcp-app.ts             Client-side Highcharts rendering
  module-loader.ts       Dynamic Highcharts module loading
  generated/             Auto-generated from Highcharts API (do not edit)
    highcharts-depth-{0,1,2}.gen.ts   Zod schemas at each depth
    module-map.json                   Chart type → Highcharts module mapping
scripts/
  generate-from-tree.mjs   Generate Zod schemas from Highcharts tree.json
  generate-module-map.mjs  Generate module-map.json from Highcharts
  example-providers.mjs    Example extraction for schema generation
  measure-schema.ts        Measure tool context size at each depth

차트 유형, 모듈 매핑 및 스키마는 설치된 Highcharts 버전에서 자동으로 생성됩니다. npm update highcharts를 실행하고 다시 생성하기만 하면 됩니다.

라이선스

MIT

mcp-highcharts

mcp-highcharts

설정

도구

프롬프트

구성

테마

스키마 깊이

데이터 소스

이미지 내보내기 (앱 미지원 시 대체)

개발

프로젝트 구조

라이선스

Resources

Looking for Admin?

Tools

Latest Blog Posts

MCP directory API