ChartPane

Renderiza gráficos interativos do Chart.js e dashboards diretamente em conversas de IA.

GitHub
1
Experimente este MCPPatrocinado

Documentação

ChartPane

Aplicativo MCP que renderiza gráficos interativos Chart.js inline na interface do Claude. Funciona com Claude Desktop, ChatGPT, VS Code, Cursor e qualquer cliente que suporte aplicativos MCP.

Instância ao vivo: mcp.chartpane.com

Recursos

  • 9 tipos de gráficos: barra, linha, área, pizza, rosca, polarArea, bolha, dispersão, radar
  • Variantes de gráfico de barras empilhadas e horizontais
  • Grades de painéis com vários gráficos (até 4 colunas)
  • Cores personalizadas ou paleta automática de 12 cores
  • Renderização no lado do cliente — os dados do gráfico nunca são armazenados no servidor
  • Funciona com qualquer cliente compatível com MCP (Claude Desktop, ChatGPT, VS Code, Cursor)

Ferramentas

  • render_chart — Renderiza um único gráfico (barra, linha, área, pizza, rosca, polarArea, bolha, dispersão, radar, empilhado)
  • render_dashboard — Renderiza um layout de grade com vários gráficos

Início Rápido

Adicione ChartPane ao Claude Desktop via Configurações > Conectores > Adicionar conector personalizado:

https://mcp.chartpane.com/mcp

Ou use mcp-remote (requer Node.js):

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

Exemplos de Uso

1. Gráfico de barras

Prompt: "Crie um gráfico de barras da receita trimestral: Q1 $50k, Q2 $80k, Q3 $120k, Q4 $95k"

Claude chama render_chart com:

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

Um gráfico de barras interativo é renderizado inline na conversa.

2. Gráfico de pizza

Prompt: "Mostre a participação de mercado dos navegadores como um gráfico de pizza: Chrome 65%, Safari 19%, Firefox 8%, Edge 5%, Outros 3%"

Claude chama render_chart com:

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

Cada fatia recebe uma cor distinta da paleta integrada.

3. Painel com vários gráficos

Prompt: "Crie um painel com usuários ativos mensais como um gráfico de linha e inscrições por canal como um gráfico de barras"

Claude chama render_dashboard com:

{
  "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 os gráficos são renderizados lado a lado em um layout de grade.

Auto-hospedagem

ChartPane roda em 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

Você precisará criar seu próprio namespace KV e banco de dados D1 — veja os comentários em wrangler.jsonc.

Desenvolvimento

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

Arquitetura

As chamadas de ferramentas do Claude passam por um servidor MCP leve que valida a entrada e retorna structuredContent. A interface no lado do navegador transforma a entrada em configurações do Chart.js e renderiza no canvas. Toda a lógica compartilhada (tipos, validação, cores, configuração) fica em shared/.

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

Privacidade

ChartPane registra apenas metadados de solicitação (tipo de gráfico, título, timestamp). Os valores dos dados do gráfico nunca são armazenados. Os gráficos são renderizados inteiramente no lado do cliente no seu navegador. Política completa: chartpane.com/privacy

Suporte

Licença

MIT