Descríbelo, no lo dibujes: dashboard de Kibana con IA integrada a través de MCP y ES|QL

example-mcp-dashbuilder es una aplicación MCP open source que convierte una línea de comandos en inglés sencillo en un dashboard de Kibana interactivo y en tiempo real, todo dentro de la ventana de chat de tu editor. Describe el dashboard que deseas y la IA descubre tu estructura de índice, escribe las agregaciones ES|QL correctas para cada visualización y muestra una vista previa en línea a medida que va trabajando. Cuando termines, con un solo comando podrás exportar un dashboard de Kibana totalmente funcional con las visualizaciones reales de Lens, tu diseño de cuadrícula exacto y los colores personalizados conservados. En la actualidad, se admiten seis tipos de gráficos. El conjunto completo de Kibana Lens está previsto en el roadmap.

¿Qué es el generador de dashboard de Kibana?

¿Y si pudieras describir el dashboard que quieres en un lenguaje sencillo y ver cómo aparece, con gráficos interactivos, un diseño de arrastrar y soltar y la posibilidad de exportarlo a Kibana con un solo clic?

Eso es precisamente lo que hace example-mcp-dashbuilder. Es una aplicación open source (Model Context Protocol (MCP)) que conecta asistentes de IA a Elasticsearch que te permiten crear paneles completos de Kibana a través de la conversación. No hay que hacer clic en los menús. No hay que escribir manualmente las configuraciones de visualización. Solo describe lo que necesitas y la IA explora tus datos, escribe las consultas en lenguaje de búsqueda de Elasticsearch (ES|QL), construye los gráficos y entrega un dashboard interactivo en vivo, todo dentro de la ventana de chat de tu editor.

De la línea de comandos al dashboard en segundos

Así es como se ve en la práctica. Escribes algo como:

"Crea un dashboard de tráfico web desde logstash-*, con solicitudes totales, bytes transferidos a lo largo del tiempo, fuentes geográficas principales y un desglose de código de respuesta"

La IA entonces:

1. Descubre tus datos: enumera índices, inspecciona mapeos de campo.
2. Escribe consultas ES|QL: adaptadas a tu esquema con las agregaciones correctas.
3. Crea visualizaciones: gráficos de barras, gráficos de líneas, métricas con líneas de destellos, mapas de calor, gráficos circulares.
4. Organiza todo: secciones plegables, títulos significativos, diseño adecuado.
5. Muestra una vista previa interactiva: directamente en el chat, con descripciones emergentes, un selector de hora y arrastrar y soltar.

Cada gráfico aparece en línea a medida que se crea, por lo que puedes ver el progreso en tiempo real. Luego view_dashboard muestra el dashboard completo con todos los paneles dispuestos en la cuadrícula de 48 columnas de Kibana.

Vista previa de un solo gráfico en línea.

Impulsado por ES|QL

Toda recuperación de datos usa ES|QL, el lenguaje de búsquedas canalizadas de Elasticsearch. La IA no se limita a pasar consultas sin procesar, sino que también utiliza su conocimiento integrado de la sintaxis de ES|QL, junto con la información sobre la estructura de tus datos, para escribir consultas correctas y eficientes para cada tipo de visualización.

El servidor incluye una referencia completa de ES|QL como recurso MCP. Antes de escribir cualquier consulta, la IA lee esta referencia para comprender los comandos, funciones y patrones disponibles. Combinada con una guía de mejores prácticas de visualización de datos (que también sirve como recurso), la IA sabe no solo cómo realizar consultas, sino qué constituye una buena visualización:

• Usa BUCKET(@timestamp, 1 day) para series temporales; siempre SORT por el campo de tiempo.
• Limita los gráficos circulares a seis porciones con | SORT value DESC | LIMIT 6.
• Elige gráficos de barras para comparaciones de categorías, gráficos de líneas para tendencias, métricas para indicadores clave de rendimiento (KPIs).

Exploración de datos basada en IA con análisis abierto

Una cosa es crear un dashboard que ya diseñaste en tu cabeza. Preguntar "¿Qué tiene de interesante este índice?" y obtener una respuesta útil es más difícil. Requiere que la IA sepa cómo explorar, no solo cómo dibujar.

example-mcp-dashbuilder envía un recurso analysis://guidelines que define un flujo de exploración estructurado: perfila los datos, ejecuta agregaciones específicas, revela patrones que vale la pena investigar, crea gráficos para los hallazgos más interesantes y propone consultas desglosadas que el usuario podría querer a continuación. Frases desencadenantes, como "analizar mis registros" o "encontrar patrones en este índice", hacen que la IA lea el manual antes de hacer cualquier otra cosa, por lo que un prompt abierto produce una investigación coherente en lugar de un montón aleatorio de gráficos.

El resultado: puedes proporcionarle a la IA un índice desconocido y obtener a cambio un punto de partida: un dashboard más una breve lista de preguntas del tipo "¿Esto es lo que observé, quieres que profundice en alguno de estos puntos?".

Exportación e importación de dashboard de Kibana: el viaje de ida y vuelta completo

El viaje de ida y vuelta de exportación e importación es donde example-mcp-dashbuilder se vuelve realmente útil para los equipos que ya trabajan en Kibana. example-mcp-dashbuilder es una interfaz de dashboard conversacional que vive dentro de tu editor, pero no limita tu trabajo allí. Los paneles que crees aquí pueden trasladarse a Kibana cuando quieras, y los paneles existentes de Kibana pueden venir de otro lado para la edición asistida por IA.

Exportar a Kibana

Cuando te guste tu dashboard, un solo comando lo exporta:

"Exportar este dashboard a Kibana"

Cada panel se traduce a una visualización real de Kibana Lens. La traducción preserva:

• Consultas ES|QL: transferidas directamente como fuentes de datos Lens ES|QL.
• Posiciones de cuadrícula: el mismo sistema de 48 columnas que usa Kibana, así tu diseño se ve idéntico.
• Colores personalizados: paletas de series, fondos de métricas, rampas de color de mapa de calor.

El resultado es un dashboard de Kibana completamente funcional. No es una captura de pantalla. No es una inserción. Un dashboard real que puedes compartir y continuar editando en Kibana.

El dashboard de Kibana y el dashboard del chat de cursor, uno al lado del otro.

Importar desde Kibana

El viaje de ida y vuelta también funciona en la otra dirección:

"Importar el dashboard de Kibana con ID abc-123"

Esto recupera un dashboard de Kibana existente, traduce sus visualizaciones de Lens de vuelta a configuraciones de gráficos editables, conserva la disposición de la cuadrícula y las secciones, y carga todo en example-mcp-dashbuilder. Desde ahí, puedes modificarlo con lenguaje natural y volver a exportarlo.

Esto hace que la IA sea un complemento de tu flujo de trabajo actual en Kibana, no un sustituto.

Temas personalizados y colores

¿Quieres un dashboard de marca? Solo pregúntanos.

"Crea un dashboard de temática rosa con colores personalizados"

Cada tipo de visualización admite una configuración de color personalizada:

• Gráficos: palette acepta una matriz de colores hexadecimales para series y segmentos.
• Métricas: color establece el color de fondo.
• Mapas de calor: colorRamp define el gradiente, de valores bajos a altos.

La IA capta las solicitudes de temas de forma natural. Di, "Tema oceánico," y elegirá azules y verdes azulados. Di: "Que coincidan con los colores de nuestra marca" y proporciona los valores hexadecimales, y estos se transferirán a Kibana en el momento de la exportación.

Un dashboard temático con colores personalizados.

Cómo funciona example-mcp-dashbuilder: arquitectura MCP

example-mcp-dashbuilder se basa en MCP, el estándar abierto para conectar asistentes de IA con herramientas y datos externos. Aquí está la arquitectura a alto nivel:

El servidor MCP expone 25 herramientas que la IA puede llamar directamente, desde ejecutar consultas ES|QL hasta exportar dashboards, junto con un puñado de herramientas internas "exclusivas de la app" que la vista previa en línea usa para obtener datos, conservar los cambios de diseño y detectar campos de tiempo. Ofrece tres recursos: una guía de mejores prácticas para la visualización de datos, una referencia de ES|QL y un manual de análisis profundo que se activa con preguntas abiertas ("analiza mis logs", "¿qué hay de interesante en este índice?"). Y se ejecuta por stdio o HTTP. El transporte HTTP soporta respuestas transferibles y gestión de sesiones, de modo que varios clientes pueden conectarse a un solo servidor.

La app MCP es la vista previa interactiva. Está hecha con React, Elastic Charts y Elastic UI, todo empaquetado en un único archivo HTML independiente. Cuando la IA llama a view_dashboard o crea un gráfico, el host renderiza este HTML en un iframe en modo sandbox. La app se comunica completamente con el servidor a través del protocolo de aplicaciones MCP, con callServerTool() a través de postMessage para obtener datos, almacenar diseños y detectar campos de tiempo. No hay un servidor localhost, no hay un puerto para configurar ni una dependencia de red externa.

Esto significa que funciona con cualquier cliente compatible con MCP: Cursor, Claude Desktop, Claude.ai, VS Code con Copilot y más.

¿Qué tipos de gráficos soporta example-mcp-dashbuilder?

Al momento de escribir, se admiten seis tipos de gráficos que cubren los escenarios de dashboard más comunes:

Los paneles de control admiten secciones plegables para su organización, un selector de tiempo con detección automática de campos de tiempo y la capacidad de guardar y cambiar entre varios paneles; las sesiones de chat paralelas permanecen aisladas entre sí mediante un dashboardId que se interpone en cada llamada a la herramienta.

Cómo instalar y ejecutar example-mcp-dashbuilder

example-mcp-dashbuilder es de open source y está listo para usar. Necesitarás Node.js 22+, una instancia de Elasticsearch (local o Elastic Cloud) y un cliente compatible con MCP.

Claude Desktop: descarga la última versión .mcpb de GitHub Releases y haz doble clic. Claude Desktop te pedirá tus credenciales de Elasticsearch.

Cursor / Claude Code / VS Code Copilot: apunta tu configuración de MCP al archivo tar publicado; sin clonar, sin npm install:

Establece ES_NODE, ES_API_KEY (o ES_USERNAME / ES_PASSWORD) y KIBANA_URL como variables de entorno. Si prefieres trabajar desde el código fuente, clona el repositorio y ejecuta npm run setup para un asistente interactivo que gestione tanto Elasticsearch local como Elastic Cloud (Cloud ID + clave API).

Y empieza a crear:

"Explora el índice de logs y crea el dashboard más completo que puedas"

A partir de ahí, la IA se encarga de todo. 😉

Roadmap: lo que viene para example-mcp-dashbuilder

Esta es una versión preliminar y la estamos desarrollando activamente. Algunas áreas en las que nos enfocamos:

• Más tipos de gráficos: indicador, donut, treemap, tabla de datos y nube de cloud para igualar todas las capacidades de Lens.
• Enviar paneles a Git: escribe las configuraciones de los paneles en un repositorio para el control de versiones y los flujos de trabajo de revisión de código.
• Mejor experiencia de error: comentarios más detallados cuando las consultas ES|QL fallan, con sugerencias para correcciones comunes.
• Flujos de análisis más ricos: ampliación del manual de análisis profundo para cubrir más formas de datos (log, métricas, trazas).

Nos encantaría saber lo que crees con él. Pruébalo, reporta problemas y cuéntanos qué visualizaciones y flujos de trabajo serían más útiles para tu equipo.

GitHub: elastic/example-mcp-dashbuilder

Agradecimientos

Gracias a Walter Rafelsberger y Tim Schnell por sus contribuciones a la implementación.

Preguntas frecuentes

¿Qué es example-mcp-dashbuilder? example-mcp-dashbuilder es una aplicación de open source MCP (Model Context Protocol) que conecta asistentes de IA con Elasticsearch. Te permite describir un dashboard de Kibana en lenguaje sencillo y genera automáticamente consultas ES|QL, crea visualizaciones y muestra un dashboard interactivo en tiempo real dentro de la ventana de chat de tu editor.

¿Qué lenguaje de búsqueda usa example-mcp-dashbuilder para recuperar datos? Toda la recuperación de datos utiliza ES|QL, el lenguaje de búsqueda de Elasticsearch. El servidor MCP incluye una referencia integrada de ES|QL que la IA consulta antes de escribir cualquier consulta, lo que garantiza una sintaxis correcta y agregaciones eficientes para cada tipo de visualización.

¿Puedo exportar paneles creados con example-mcp-dashbuilder a Kibana? Sí. Ejecutar "Exporta este dashboard a Kibana" convierte cada panel en una visualización real de Kibana Lens, conserva las consultas ES|QL, el diseño de cuadrícula de 48 columnas, los colores personalizados y las paletas de series. El resultado es un dashboard de Kibana completamente funcional, no una captura de pantalla ni una incrustación.

¿Puedo importar un dashboard de Kibana existente en example-mcp-dashbuilder para una edición asistida por IA? Sí. Al introducir el ID de un dashboard de Kibana, se recupera el dashboard existente, se convierten sus visualizaciones de Lens en configuraciones de gráficos editables y se cargan en example-mcp-dashbuilder. Después puedes modificar el dashboard usando lenguaje natural y volver a exportarlo a Kibana.

¿Qué clientes de MCP son compatibles con example-mcp-dashbuilder? example-mcp-dashbuilder funciona con cualquier cliente compatible con MCP, incluidos Cursor, Claude Desktop, Claude.ai y VS Code con Copilot. Es compatible tanto con el transporte stdio como HTTP, sin necesidad de configuración de servidor o puerto localhost.

¿Qué tipos de gráficos admite example-mcp-dashbuilder? La versión actual admite seis tipos de gráficos: barra, línea, área, circular, métrica (con minigráfico) y mapa de calor. Las adiciones previstas incluyen medidor, dona, gráfico de rectángulos, tabla de datos y nube de etiquetas para igualar las capacidades completas de Kibana Lens.

¿Qué necesito para ejecutar example-mcp-dashbuilder? Necesitas Node.js versión 22 o superior, una instancia de Elasticsearch (local o en Elastic Cloud) y un cliente compatible con MCP. Configura las variables de entorno ES_NODE, ES_API_KEY (o ES_USERNAME/ES_PASSWORD) y KIBANA_URL. Para Claude Desktop, descarga el archivo .mcpb Descarga el archivo desde GitHub Releases y haz doble clic para instalarlo.