provchart-mcp

Servidor MCP para ProvChart — los agentes generan gráficos de CSS puro (HTML + CSS) o SVG para README/docs.

Sin Chart.js. No se requiere runtime de gráficos en el cliente para el renderizado. El mismo JSON que usa tu panel.

Qué hace

Los agentes llaman a estas herramientas en lugar de inventar fragmentos de Chart.js.

Related MCP server: ECharts ChartPage MCP Server

Requisitos

• Node.js 18+ (fetch nativo)

• Clave de API de ProvChart — las cuentas gratuitas registradas incluyen generaciones de prueba mensuales limitadas

export PROVCHART_API_KEY=pc_live_xxxxxxxx

Nunca confirmes claves reales. Prefiere la configuración de env / MCP env.

Instalación y ejecución

Desde el código fuente (este repositorio)

cd provchart-mcp
npm install
export PROVCHART_API_KEY=pc_live_xxxxxxxx
node src/index.js

El proceso habla MCP a través de stdio (permanece en silencio hasta que un cliente se conecta).

Tras la publicación

npx -y provchart-mcp

Claude Desktop

Edita claude_desktop_config.json:

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

O con npx (una vez publicado):

{
  "mcpServers": {
    "provchart": {
      "command": "npx",
      "args": ["-y", "provchart-mcp"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Reinicia Claude Desktop después de guardar.

Cursor

mcp.json (de proyecto o global):

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Ejemplos de prompts

• Usa provchart_generate para un gráfico de área con tema midnight: Tráfico vs Registros, de lunes a domingo.

• Genera un gráfico de líneas SVG de la latencia p50/p95 para un README de GitHub.

• Explica cómo inyectar HTML/CSS de ProvChart sin una librería de gráficos.

Ejemplo de argumentos de la herramienta (provchart_generate)

{
  "type": "area",
  "theme": "midnight",
  "series": [
    { "name": "Traffic", "color": "#4fd8c4", "points": [30, 45, 40, 60, 55, 70, 65] },
    { "name": "Signups", "color": "#f0a860", "points": [8, 12, 11, 18, 16, 22, 20] }
  ],
  "axisX": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}

Inyecta el CSS devuelto en una etiqueta <style> y el HTML en un contenedor. Opcional: provchart-runtime para tooltips — no es necesario para el renderizado.

Entorno

*O pasa apiKey en los argumentos de la herramienta (se prefiere env).

Errores

Estructura del proyecto

provchart-mcp/
  package.json
  README.md
  src/
    index.js    # MCP stdio server
    client.js   # ProvChart HTTP helper
    tools.js    # Tool schemas + handlers

Relacionados

• ProvChart — producto y constructor

• Demo en vivo — lote de API de múltiples gráficos

• Developer API

• provchart-runtime — mejoras opcionales de HTML

• st-core.fscss — raíces CSS puras abiertas