ChartPane

Renderiza gráficos interactivos de Chart.js y pan

GitHub
1
Prueba este MCPPatrocinado

Documentación

ChartPane

Aplicación MCP que renderiza gráficos interactivos de Chart.js en línea dentro de la interfaz de Claude. Funciona con Claude Desktop, ChatGPT, VS Code, Cursor y cualquier cliente que admita aplicaciones MCP.

Instancia en vivo: mcp.chartpane.com

Características

  • 9 tipos de gráficos: barras, líneas, áreas, circular, dona, polarArea, burbuja, dispersión, radar
  • Variantes de gráficos de barras apiladas y horizontales
  • Cuadrículas de paneles con múltiples gráficos (hasta 4 columnas)
  • Colores personalizados o paleta automática de 12 colores
  • Renderizado del lado del cliente: los datos de los gráficos nunca se almacenan en el servidor
  • Funciona con cualquier cliente compatible con MCP (Claude Desktop, ChatGPT, VS Code, Cursor)

Herramientas

  • render_chart — Renderiza un solo gráfico (barras, líneas, áreas, circular, dona, polarArea, burbuja, dispersión, radar, apilado)
  • render_dashboard — Renderiza un diseño de cuadrícula con múltiples gráficos

Inicio rápido

Agrega ChartPane a Claude Desktop mediante Configuración > Conectores > Agregar conector personalizado:

https://mcp.chartpane.com/mcp

O usa mcp-remote (requiere Node.js):

{
  "mcpServers": {
    "chartpane": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.chartpane.com/mcp"]
    }
  }
}

Ejemplos de uso

1. Gráfico de barras

Solicitud: "Crea un gráfico de barras de ingresos trimestrales: Q1 $50k, Q2 $80k, Q3 $120k, Q4 $95k"

Claude llama a render_chart con:

{
  "type": "bar",
  "title": "Quarterly Revenue",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{ "label": "Revenue ($k)", "data": [50, 80, 120, 95] }]
  }
}

Un gráfico de barras interactivo se renderiza en línea en la conversación.

2. Gráfico circular

Solicitud: "Muestra la cuota de mercado de navegadores como un gráfico circular: Chrome 65%, Safari 19%, Firefox 8%, Edge 5%, Otros 3%"

Claude llama a render_chart con:

{
  "type": "pie",
  "title": "Browser Market Share",
  "data": {
    "labels": ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    "datasets": [{ "label": "Share", "data": [65, 19, 8, 5, 3] }]
  }
}

Cada segmento recibe un color distintivo de la paleta integrada.

3. Panel con múltiples gráficos

Solicitud: "Crea un panel con usuarios activos mensuales como gráfico de líneas y registros por canal como gráfico de barras"

Claude llama a render_dashboard con:

{
  "title": "Growth Dashboard",
  "charts": [
    {
      "type": "line",
      "title": "Monthly Active Users",
      "data": {
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        "datasets": [{ "label": "MAU", "data": [12000, 15000, 18000, 22000, 28000, 35000] }]
      }
    },
    {
      "type": "bar",
      "title": "Signups by Channel",
      "data": {
        "labels": ["Organic", "Referral", "Paid", "Social"],
        "datasets": [{ "label": "Signups", "data": [4500, 3200, 2800, 1500] }]
      }
    }
  ],
  "columns": 2
}

Ambos gráficos se renderizan lado a lado en un diseño de cuadrícula.

Autoalojamiento

ChartPane se ejecuta en Cloudflare Workers.

npm install
cp .dev.vars.example .dev.vars    # Configure secrets (optional)
npm run dev                        # Local dev server (port 8787 + sandbox on 3456)
npm run deploy                     # Deploy to Cloudflare Workers

Necesitarás crear tu propio espacio de nombres KV y base de datos D1: consulta los comentarios en wrangler.jsonc.

Desarrollo

npm run dev        # wrangler dev + sandbox dev server (localhost:3456)
npm run build      # Type-check (tsc --noEmit) + bundle UI
npm test           # Run all tests (vitest)
npm run test:watch # Watch mode

Arquitectura

Las llamadas a herramientas de Claude fluyen a través de un servidor MCP ligero que valida la entrada y devuelve structuredContent. La interfaz del lado del navegador transforma la entrada en configuraciones de Chart.js y la renderiza en canvas. Toda la lógica compartida (tipos, validación, colores, configuración) reside en shared/.

Claude tool call → server.ts (validate) → structuredContent
    → mcp-app.ts (browser) → buildChartConfig() → Chart.js canvas

Privacidad

ChartPane registra solo metadatos de solicitudes (tipo de gráfico, título, marca de tiempo). Los valores de los datos de los gráficos nunca se almacenan. Los gráficos se renderizan completamente en el lado del cliente en tu navegador. Política completa: chartpane.com/privacy

Soporte

Licencia

MIT