mcp-highcharts

Отображайте интерактивные диаграммы Highcharts прямо в ИИ-чате — VS Code, GitHub Copilot, Claude Desktop или любом другом MCP-клиенте с поддержкой MCP Apps.

Настройка

Нажмите на значок выше или добавьте конфигурацию в свой 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

Related MCP server: Chart-Output MCP Server

Инструменты

Все инструменты принимают полный API опций Highcharts.

Промпты

Конфигурация

Темизация

Диаграммы автоматически адаптируются к светлой/темной теме хоста. Переопределите их с помощью переменных окружения:

{
  "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" } }

Источники данных

Для диаграмм с обновлением в реальном времени используйте модуль данных Highcharts с data.csvURL и data.enablePolling: true.

Экспорт изображений (резервный вариант для не-приложений)

Для MCP-клиентов, которые не поддерживают MCP Apps, включите экспорт изображений на стороне сервера, чтобы добавить PNG-скриншот каждой диаграммы в ответ инструмента:

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

Диаграммы рендерятся как PNG и возвращаются в виде блоков контента с изображениями в формате base64. Интерактивное приложение MCP по-прежнему включено для поддерживающих его клиентов.

Стратегия рендеринга (автоматическая):

1. Локально (Puppeteer) — если установлен highcharts-export-server, диаграммы рендерятся локально через headless-браузер. Никаких сетевых вызовов, самый быстрый вариант.

2. Удаленный резервный вариант — если локальный вариант недоступен, конфигурация диаграммы отправляется POST-запросом на сервер экспорта Highcharts.

Чтобы включить локальный рендеринг, установите опциональную зависимость:

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