Descreva, não desenhe: dashboards nativos de IA do Kibana via MCP e ES|QL

O example-mcp-dashbuilder é um aplicativo MCP open source que transforma um prompt em inglês simples em um dashboard do Kibana ao vivo e interativo, tudo dentro da janela de bate-papo do seu editor. Descreva o dashboard desejado e a IA descobre sua estrutura de índice, escreve agregações ES|QL corretas para cada visualização e exibe uma pré-visualização embutida enquanto trabalha. Quando terminar, um comando exporta um dashboard do Kibana totalmente funcional: visualizações reais do Lens, layout exato da sua grade, cores personalizadas preservadas. Atualmente, há seis tipos de gráficos compatíveis, com o conjunto completo do Kibana Lens previsto no roadmap.

O que é um construtor de dashboard do Kibana?

E se você pudesse descrever o dashboard que deseja em inglês simples e vê-lo aparecer completo, com gráficos interativos, um layout de arrastar e soltar e exportação para o Kibana com um clique?

É exatamente isso que o example-mcp-dashbuilder faz. É um aplicativo open source (Model Context Protocol (MCP)) que conecta assistentes de IA ao Elasticsearch, permitindo que você crie painéis completos do Kibana por meio de conversas. Sem precisar clicar nos menus. Sem escrever manualmente as configs de visualização. Basta descrever o que você precisa para que a IA explore seus dados, escreva as consultas Elasticsearch Query Language (ES|QL), crie os gráficos e forneça um dashboard interativo ao vivo, tudo dentro da janela de bate-papo do seu editor.

Do prompt ao dashboard em segundos

Veja como isso funciona na prática. Você digita algo como:

"Crie para mim um dashboard de tráfego da web a partir do logstash-* com total de solicitações, bytes transferidos ao longo do tempo, principais fontes geográficas e um detalhamento do código de resposta"

A IA então:

1. Descobre seus dados: lista índices e inspeciona mapeamentos de campos.
2. Escreve consultas ES|QL: adaptadas ao seu esquema, usando as agregações corretas.
3. Cria visualizações: gráficos de barras, gráficos de linhas, métricas com sparklines, mapas de calor, gráficos de pizza.
4. Organiza tudo: seções retráteis, títulos significativos, layout adequado.
5. Renderiza uma visualização interativa: diretamente no bate-papo, com dicas de ferramentas, um seletor de tempo e arrastar e soltar.

Cada gráfico aparece em linha conforme é criado, então você pode ver o progresso em tempo real. Depois, view_dashboard mostra o dashboard completo com todos os painéis dispostos na grade de 48 colunas de Kibana.

Prévia de gráfico único em linha.

Desenvolvido por ES|QL

Toda recuperação de dados utiliza ES|QL, a linguagem de consulta em pipeline do Elasticsearch. A IA não apenas passa por consultas brutas, ela também usa conhecimento integrado do ES|QL junto com informações sobre a estrutura dos seus dados para escrever consultas corretas e eficientes para cada tipo de visualização.

O servidor inclui uma referência abrangente de ES|QL como um recurso MCP. Antes de escrever qualquer consulta, a IA lê essa referência para entender os comandos, funções e padrões disponíveis. Em conjunto com um guia de **práticas recomendadas** de visualização de dados (que também serviu como recurso), a IA sabe não apenas como fazer consultas, mas o que torna uma visualização boa:

• Use BUCKET(@timestamp, 1 day) para séries temporais; sempre SORT pelo campo de tempo.
• Limite os gráficos de pizza a seis fatias com | SORT value DESC | LIMIT 6.
• Escolha gráficos de barras para comparações de categorias, gráficos de linhas para tendências, métricas para indicadores-chave de desempenho (KPIs).

Exploração de dados orientada por IA com análise aberta

Construir um dashboard que você já imaginou na cabeça é outra história. Perguntar "O que há de interessante nesse índice?" e obter uma resposta útil é mais difícil; isso exige que a IA saiba como explorar, não apenas como desenhar.

O example-mcp-dashbuilder envia um recurso analysis://guidelines que define um fluxo de exploração estruturado: faça o perfil dos dados, execute agregações direcionadas, identifique padrões que valem a pena investigar, crie gráficos para as descobertas mais interessantes e proponha consultas detalhadas que o usuário possa querer em seguida. Frases gatilho, como "analisar meus logs" ou "encontrar padrões neste índice", fazem a IA ler o manual antes de fazer qualquer outra coisa, então um prompt aberto produz uma investigação coerente em vez de uma pilha aleatória de gráficos.

O resultado: você pode entregar um índice não familiar à IA e receber de volta um ponto de partida: um dashboard mais uma pequena lista de prompts "Aqui estão minhas impressões, quer que eu investigue mais a fundo algum desses?"

Exportação e importação do dashboard do Kibana: a viagem completa de ida e volta

A viagem de ida e volta de exportação/importação é onde o example-mcp-dashbuilder se torna realmente útil para as equipes que já trabalham com o Kibana. O example-mcp-dashbuilder é algo próprio, uma superfície de dashboard de conversação que fica dentro do seu editor, mas não prende o seu trabalho lá. Dashboards construídos aqui podem ser movidos para o Kibana quando você quiser, e dashboards existentes do Kibana podem seguir o caminho inverso para edição assistida por IA.

Exportar para Kibana

Quando você estiver satisfeito com seu dashboard, um comando irá exportá-lo:

"Exportar este dashboard para o Kibana"

Cada painel é traduzido para uma visualização real do Kibana Lens. A tradução preserva:

• Consultas ES|QL: transferidas diretamente como fontes de dados ES|QL do Lens.
• Posições de grade: o mesmo sistema de 48 colunas que o Kibana usa, para que você tenha um layout idêntico.
• Cores personalizadas: paletas de séries, fundos métricos, rampas de cores de heatmap.

O resultado é um dashboard do Kibana totalmente funcional. Não é uma captura de tela. Não é uma incorporação. Um dashboard do Kibana que você pode compartilhar e continuar editando.

Dashboard do Kibana e dashboard no chat do Cursor lado a lado.

Importar do Kibana

A viagem de ida e volta também funciona na outra direção:

"Importar o dashboard do Kibana com o ID abc-123"

Isso busca um dashboard do Kibana existente, traduz suas visualizações do Lens para configurações de gráficos editáveis, preserva o layout e as seções da grade e carrega tudo no example-mcp-dashbuilder. A partir daí, você pode modificar com linguagem natural e reexportar.

Isso torna a IA uma colaboradora em seu fluxo de trabalho existente do Kibana, não uma substituta para ele.

Temas e cores personalizados

Quer um dashboard de marca? É só pedir:

"Crie um dashboard com tema rosa e cores personalizadas"

Todo tipo de visualização permite configuração de cor personalizada:

• Gráficos: palette aceita uma matriz de cores hexadecimais para séries e fatias.
• Métricas: color define a cor de plano de fundo.
• Mapas de calor: colorRamp define o gradiente, dos valores baixos aos altos.

A IA identifica os pedidos de tema naturalmente. Diga "tema do oceano", e ele vai escolher tons de azul e verde-azulado. Diga "Combine as cores da nossa marca" e forneça valores hexadecimais, e eles serão aplicados no Kibana na exportação.

Um dashboard temático com cores personalizadas.

Como funciona o example-mcp-dashbuilder: arquitetura MCP

O example-mcp-dashbuilder foi desenvolvido com base no MCP, o padrão aberto para conectar assistentes de IA a ferramentas e dados externos. Aqui está a arquitetura em alto nível:

O servidor MCP expõe 25 ferramentas que a IA pode chamar diretamente, desde a execução de consultas ES|QL até a exportação de painéis, além de algumas ferramentas internas "exclusivas do app" que a pré-visualização embutida usa para buscar dados, persistir alterações de layout e detectar campos de tempo. Ele oferece três recursos: um guia de **práticas recomendadas** de dataviz, uma referência ES|QL e um manual de análise aprofundada que entra em ação para prompts abertos ("analisar meus logs", "o que há de interessante neste índice"). E executa tanto em stdio quanto em HTTP; o transporte HTTP permite respostas em fluxo contínuo e gerenciamento de sessão, permitindo que vários clientes se conectem a um mesmo servidor.

O MCP App é uma pré-visualização interativa. Ele foi desenvolvido com React, Elastic Charts e Elastic UI, agrupados em um único arquivo HTML independente. Quando a IA chama view_dashboard ou cria um gráfico, o host renderiza este HTML em um iframe isolado. O aplicativo se comunica com o servidor inteiramente através do protocolo MCP Apps, usando callServerTool() sobre postMessage para buscar dados, salvar layouts e detectar campos de tempo. Não há servidor localhost, nenhuma porta para configurar, nenhuma dependência de rede externa.

Isso significa que funciona com qualquer cliente compatível com MCP: Cursor, Claude Desktop, Claude.ai, VS Code com Copilot e muito mais.

Quais tipos de gráficos o example-mcp-dashbuilder permite?

No momento desta publicação, são permitidos seis tipos de gráficos que cobrem os cenários de dashboard mais comuns:

Dashboards permitem seções recolhíveis para organização, um seletor de tempo com detecção automática de campos de tempo e a capacidade de salvar e alternar entre múltiplos dashboards; sessões paralelas de chat permanecem isoladas umas das outras por meio de um dashboardId que passa por cada chamada de ferramenta.

Como instalar e executar o example-mcp-dashbuilder

O example-mcp-dashbuilder é open source e está pronto para uso. Você vai precisar de Node.js 22+, uma instância Elasticsearch (local ou Elastic Cloud) e um cliente compatível com MCP.

Claude Desktop: baixe a versão mais recente .mcpb do GitHub Releases, e clique duas vezes nela. O Claude Desktop solicitará suas credenciais do Elasticsearch.

Cursor / Claude Code / VS Code Copilot: aponte sua configuração MCP para o tarball liberado; sem clone, sem npm install:

Configure ES_NODE, ES_API_KEY (ou ES_USERNAME / ES_PASSWORD) e KIBANA_URL como variáveis de ambiente. Se você preferir trabalhar a partir da fonte, clone o repositório e execute npm run setup para um assistente interativo que lida com o Elasticsearch local e o Elastic Cloud (Cloud ID + chave de API).

E comece a construir:

"Explore o índice de logs e construa o dashboard mais perspicaz que puder"

A partir daí, a IA assume o controle. 😉

Roadmap: o que está por vir para o example-mcp-dashbuilder

Este é um lançamento antecipado, e estamos em desenvolvimento ativo. Algumas áreas em que estamos focados:

• Mais tipos de gráficos: medidor, donut, treemap, tabela de dados e nuvem de tags para combinar com todas as capacidades da Lens.
• Envie dashboards para o Git: escreva configurações de dashboards em um repositório para fluxo de trabalho de controle de versões e revisão de código.
• Melhor UX de erro: feedback mais detalhado quando o ES|QL falha, com sugestões comuns de correções.
• Fluxos de análise mais ricos: estenda o manual de análise profunda para cobrir mais formas de dados (logs, métricas, rastreamentos).

Adoraríamos saber o que você cria com ele. Experimente, registre problemas e conte para a gente quais visualizações e fluxos de trabalho seriam mais úteis para sua equipe.

GitHub: elastic/example-mcp-dashbuilder

Agradecimentos

Agradecemos a Walter Rafelsberger e Tim Schnell por suas contribuições para a implementação.

Perguntas frequentes

O que é o example-mcp-dashbuilder? o example-mcp-dashbuilder é um aplicativo MCP (Model Context Protocol) open source que conecta assistentes de IA ao Elasticsearch. Ele permite que você descreva um dashboard do Kibana e automaticamente gera consultas ES|QL, cria visualizações e entrega um dashboard interativo ao vivo dentro da janela de chat do seu editor.

Qual linguagem de consulta o example-mcp-dashbuilder usa para recuperar dados? Toda recuperação de dados utiliza ES|QL, a linguagem de consulta com barras verticais do Elasticsearch. O servidor MCP inclui uma referência ES|QL integrada que a IA lê antes de escrever qualquer consulta, garantindo a sintaxe correta e agregações eficientes para cada tipo de visualização.

Posso exportar dashboards construídos com example-mcp-dashbuilder para Kibana? Sim. Executar "Exportar este dashboard para Kibana" traduz todos os painéis em uma visualização real do Kibana Lens, preservando as consultas ES|QL, o layout de grade de 48 colunas, cores personalizadas e paletas de séries. O resultado é um dashboard do Kibana totalmente funcional, não uma captura de tela ou incorporação.

Posso importar um dashboard do Kibana existente para o example-mcp-dashbuilder para edição assistida por IA? Sim. Fornecer um ID de dashboard do Kibana busca o dashboard existente, traduz suas visualizações do Lens em configurações de gráfico editáveis e as carrega no example-mcp-dashbuilder. Você pode então modificar o dashboard usando linguagem natural e reexportar para o Kibana.

Quais clientes MCP são compatíveis com o example-mcp-dashbuilder? O example-mcp-dashbuilder funciona com qualquer cliente compatível com MCP, incluindo Cursor, Claude Desktop, Claude.ai e VS Code com Copilot. Ele permite tanto transporte stdio quanto HTTP, sem necessidade de configuração de servidor localhost ou de porta.

Quais tipos de gráficos o example-mcp-dashbuilder permite? A versão atual permite seis tipos de gráficos: barra, linha, área, pizza, métrica (com sparkline) e heatmap. As adições planejadas incluem indicador, rosca, mapa de árvore, tabela de dados e nuvem de tags para combinar com todas as capacidades do Kibana Lens.

O que eu preciso para executar o example-mcp-dashbuilder? Você precisa do Node.js versão 22 ou superior, uma instância do Elasticsearch (local ou Elastic Cloud) e um cliente compatível com MCP. Defina as variáveis de ambiente ES_NODE, ES_API_KEY (ou ES_USERNAME/ES_PASSWORD) e KIBANA_URL. Para o Claude Desktop, baixe o arquivo .mcpb do GitHub Releases e clique duas vezes para instalar.