Visões e modo de incorporação: duas novas maneiras de usar gráficos MCP

Nós lançamos duas funcionalidades solicitadas por adotantes iniciais do nosso pacote de gráficos MCP de código aberto.

Views trazem BI para o seu servidor MCP: você define um painel ou um único gráfico uma vez, e o agente o renderiza pelo nome em vez de escrever SQL do zero toda vez. O pacote adiciona duas ferramentas de agente para isso: explore_views lista o que está disponível, e render_view renderiza o que o agente escolhe.

A segunda funcionalidade, embed mode, renderiza os mesmos gráficos dentro do seu próprio aplicativo web, não apenas dentro de um cliente de chat. Sirva o widget da sua própria rota, insira-o em um iframe, e ele renderiza sem chrome.

Views: um painel a partir de uma chamada de ferramenta

Uma view aqui é uma coisa real e nomeada que você cria: uma grade de tiles de KPI, células de gráfico e blocos de texto que renderiza como um painel. Você escreve as consultas e escolhe o layout. O agente escolhe qual view mostrar, não o que vai nela.

Uma chamada addViews dá ao seu servidor duas ferramentas: uma para listar o que está publicado, uma para renderizá-lo por id.

import { addViews, chartCell } from "@bonnard/mcp-charts";
import { z } from "zod";

addViews(server, {
  views: [
    {
      id: "sales_overview",
      title: "Visão geral de vendas",
      kind: "painel",
      params: { region: z.enum(["EU", "US", "APAC"]).optional() },
      render: ({ region }) => ({
        columns: 2,
        items: [
          { type: "kpi", label: "Receita", value: 336800, format: "moeda" },
          chartCell(monthlyRows(region), { chartType: "linha", title: "Receita por mês", span: 2 }),
          chartCell(regionRows(region), { chartType: "barra", title: "Receita por região" }),
        ],
      }),
    },
  ],
});

Views aceitam parâmetros tipados, então um painel serve todas as regiões em vez de ser reconstruído por filtro. Precisa apenas de um gráfico dele sozinho? Dê à célula um id e o agente pode chamar esse gráfico diretamente, sem ferramenta extra necessária.

Essa é a diferença entre um agente que improvisa um gráfico e um agente que mostra aos seus clientes um número que você já apoia. As consultas, o layout e a redação são seus. O trabalho do agente é a recuperação.

Detalhes completos estão no guia de views nomeadas e na referência de painéis. examples/dashboard é um servidor de seis views executável que você pode apontar para um cliente.

Os mesmos gráficos dentro do seu próprio produto

A maioria dos produtos que adicionam um servidor MCP ainda tem um aplicativo web, e esse aplicativo web ainda precisa de gráficos. O modo embed permite que um renderizador sirva ambos.

O pacote exporta WIDGET_HTML, o mesmo arquivo autocontido que o recurso MCP serve. Sirva-o da sua própria rota, aponte um iframe para ele com um #embed fragmento, e poste uma especificação. O widget remove seu padding, bordas de célula e título, então seu cartão fornece o chrome.

import { WIDGET_HTML } from "@bonnard/mcp-charts";

app.get("/chart-widget", (_req