mcp-highcharts

Renderiza gráficos interactivos de Highcharts directamente en el chat de IA: VS Code, GitHub Copilot, Claude Desktop o cualquier cliente MCP con soporte para MCP Apps.

Configuración

Haz clic en una insignia de arriba o añádela a tu configuración de MCP:

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

Añadir a 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

Herramientas

Todas las herramientas aceptan la API de opciones de Highcharts completa.

Prompts

Configuración

Temas

Los gráficos se adaptan automáticamente al modo claro/oscuro del host. Puedes sobrescribirlo con variables de entorno:

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

HIGHCHARTS_OPTIONS acepta .json, .js, .mjs, .ts o JSON en línea.

Temas integrados: adaptive (predeterminado), 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

Profundidad del esquema

Controla cuánta información de tipo se envía al LLM:

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

Fuentes de datos

Para gráficos con actualización en tiempo real, utiliza el módulo de datos de Highcharts con data.csvURL y data.enablePolling: true.

Exportación de imágenes (alternativa si no es una app)

Para clientes MCP que no admiten MCP Apps, habilita la exportación de imágenes del lado del servidor para incluir una captura de pantalla PNG de cada gráfico en la respuesta de la herramienta:

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

Los gráficos se renderizan como PNG y se devuelven como bloques de contenido de imagen en base64. La aplicación MCP interactiva sigue estando incluida para los clientes compatibles.

Estrategia de renderizado (automática):

1. Local (Puppeteer) — si highcharts-export-server está instalado, los gráficos se renderizan localmente a través de un navegador sin interfaz gráfica. Sin llamadas de red, la opción más rápida.

2. Alternativa remota — si la opción local no está disponible, la configuración del gráfico se envía mediante POST al Servidor de exportación de Highcharts.

Para habilitar el renderizado local, instala la dependencia opcional:

npm install highcharts-export-server

Para usar un servidor de exportación remoto personalizado:

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

También puedes habilitarlo mediante programación: createServer({ imageExport: true }).

Nota: La exportación de imágenes funciona para gráficos estándar, gráficos de acciones y gráficos de Gantt. Los paneles de control, las cuadrículas de datos y los mapas con claves de mapa basadas en cadenas (por ejemplo, "custom/world") no se pueden exportar y devolverán resultados solo de texto.

Desarrollo

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

Estructura del proyecto

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

Los tipos de gráficos, las asignaciones de módulos y los esquemas se generan automáticamente a partir de la versión instalada de Highcharts; simplemente ejecuta npm update highcharts y vuelve a generar.

Licencia

MIT