Beschreiben statt zeichnen: KI-native Kibana-Dashboards über MCP und ES|QL

example-mcp-dashbuilder ist eine Open-Source-MCP-Anwendung, die einen Prompt in einfachem Englisch in ein interaktives Kibana-Dashboard verwandelt – und das alles direkt im Chatfenster Ihres Editors. Beschreiben Sie das gewünschte Dashboard, und die KI ermittelt Ihre Indexstruktur, schreibt korrekte ES|QL-Aggregationen für jede Visualisierung und rendert währenddessen eine Inline-Vorschau. Wenn Sie fertig sind, exportiert ein Befehl ein voll funktionsfähiges Kibana-Dashboard: echte Lens-Visualisierungen, Ihr exaktes Rasterlayout und benutzerdefinierte Farben werden beibehalten. Aktuell werden sechs Diagrammtypen unterstützt, wobei die vollständige Kibana Lens geplant ist.

Was ist ein Kibana-Dashboard-Builder?

Wie wäre es, wenn Sie das gewünschte Dashboard in einfachem Englisch beschreiben könnten und es dann mit interaktiven Diagrammen, einem Drag-and-Drop-Layout und einem Export nach Kibana mit einem Klick erscheinen würde?

Genau das macht example-mcp-dashbuilder. Es handelt sich um eine Open-Source-Anwendung (Modellkontextprotokoll (MCP)), die KI-Assistenten mit Elasticsearch verbindet und es Ihnen ermöglicht, vollständige Kibana-Dashboards durch Konversation zu erstellen. Kein Durchklicken durch Menüs. Kein manuelles Schreiben von Visualisierungskonfigurationen. Beschreiben Sie einfach, was Sie benötigen, und die KI untersucht Ihre Daten, schreibt die ES|QL-Abfragen (Elasticsearch Query Language), erstellt die Diagramme und liefert ein lebendiges, interaktives Dashboard – alles im Chatfenster Ihres Editors.

Vom Prompt zum Dashboard in Sekunden

So sieht das in der Praxis aus. Sie geben beispielsweise Folgendes ein:

„Erstellen Sie mir ein Web-Traffic-Dashboard aus logstash-* mit Gesamtanfragen, übertragenen Bytes im Laufe der Zeit, wichtigen geografischen Quellen und einer Aufschlüsselung der Antwortcodes.“

Die KI daraufhin:

1. Erkennt Ihre Daten: Listet Indizes auf, inspiziert Feldzuordnungen.
2. Schreibt ES|QL-Abfragen: Angepasst an Ihr Schema, mit den richtigen Aggregationen.
3. Erstellt Visualisierungen: Balkendiagramme, Liniendiagramme, Metriken mit Sparklines, Heatmaps, Kreisdiagramme.
4. Organisiert alles: Zusammenklappbare Abschnitte, aussagekräftige Titel, ordentliches Layout.
5. Rendert eine interaktive Vorschau: Direkt im Chat, mit Tooltips, einem Zeitwähler und Drag-and-Drop.

Jedes Diagramm wird bei der Erstellung inline angezeigt, sodass Sie den Fortschritt in Echtzeit verfolgen können. Dann zeigt view_dashboard das vollständige Dashboard mit allen Panels, die im 48-spaltigen Raster von Kibana angeordnet sind.

Einzelne Inline-Diagrammvorschau.

Bereitgestellt von ES|QL

Alle Datenabrufe verwenden ES|QL, die Pipe-basierte Abfragesprache von Elasticsearch. Die KI verarbeitet nicht nur rohe Abfragen, sondern nutzt auch integrierte ES|QL-Syntax zusammen mit Informationen zur Struktur Ihrer Daten, um korrekte, effiziente Abfragen für jeden Visualisierungstyp zu schreiben.

Der Server enthält eine umfassende ES|QL-Referenz als MCP-Ressource. Bevor eine Abfrage geschrieben wird, liest die KI diese Referenz, um die verfügbaren Befehle, Funktionen und Muster zu verstehen. In Kombination mit einem Dataviz-Best-Practices-Leitfaden (der auch als Ressource diente) weiß die KI nicht nur, wie sie Abfragen gestaltet, sondern auch, was eine gute Visualisierung ausmacht:

• Verwenden Sie BUCKET(@timestamp, 1 day) für Zeitreihen; gruppieren Sie immer SORT nach dem Zeitfeld.
• Beschränken Sie Kreisdiagramme mit | SORT value DESC | LIMIT 6 auf sechs Abschnitte.
• Wählen Sie Balkendiagramme für Kategorienvergleiche, Liniendiagramme für Trends und Kennzahlen für Leistungsindikatoren (KPI).

KI-gestützte Datenexploration mit ergebnisoffener Analyse

Ein Dashboard zu erstellen, das Sie bereits in Ihrem Kopf entworfen haben, ist das eine. Die Frage lautet: „Was ist an diesem Index interessant?“ und eine brauchbare Antwort zu bekommen, ist das andere. Dafür muss die KI wissen, wie man erkundet, nicht nur, wie man zeichnet.

example-mcp-dashbuilder versendet eine analysis://guidelines-Ressource, die einen strukturierten Explorationsablauf definiert: Daten profilieren, gezielte Aggregationen ausführen, Muster aufzeigen, die es wert sind, untersucht zu werden, Diagramme für die interessantesten Ergebnisse erstellen und Drilldown-Abfragen vorschlagen, die der Nutzer als Nächstes haben könnte. Triggerphrasen wie „Analysiere meine Logs“ oder „Finde Muster in diesem Index“ veranlassen die KI, das Playbook zu lesen, bevor sie irgendetwas anderes tut. So entsteht durch einen offenen Prompt eine zusammenhängende Untersuchung und nicht ein zufälliger Haufen von Diagrammen.

Das Ergebnis: Sie können der KI einen unbekannten Index übergeben und erhalten einen Ausgangspunkt zurück: ein Dashboard sowie eine kurze Liste von Prompts, wie „Das mir aufgefallen, soll ich mir das genauer ansehen?“.

Kibana-Dashboard Export und Import: Ein vollständiger Rundgang

Der Export-/Import-Rundgang ist der Punkt, an dem example-mcp-dashbuilder für Teams, die bereits mit Kibana arbeiten, wirklich nützlich wird. example-mcp-dashbuilder ist etwas Eigenständiges, eine dialogorientierte Dashboard-Oberfläche, die in Ihren Editor integriert ist, aber Ihre Arbeit nicht dort einschließt. Hier erstellte Dashboards können bei Bedarf in Kibana übertragen werden, und bestehende Kibana-Dashboards können umgekehrt zur KI-gestützten Bearbeitung importiert werden.

Nach Kibana exportieren

Wenn Sie mit Ihrem Dashboard zufrieden sind, exportieren Sie es mit einem Befehl:

„Dieses Dashboard nach Kibana exportieren“

Jedes Panel wird als echte Kibana Lens-Visualisierung dargestellt. Die Übersetzung bewahrt:

• ES|QL-Abfragen: Direkt übertragen als Lens ES|QL-Datenquellen.
• Rasterpositionen: Das gleiche 48-Spalten-System, das Kibana verwendet, Ihr Layout sieht also identisch aus.
• Benutzerdefinierte Farben: Serienpaletten, metrische Hintergründe, Heatmap-Farbrampen.

Das Ergebnis ist ein voll funktionsfähiges Kibana-Dashboard. Kein Screenshot. Keine Einbettung. Ein echtes Dashboard, das Sie teilen und in Kibana weiter bearbeiten können.

Kibana-Dashboard und Dashboard im Cursor-Chat nebeneinander.

Aus Kibana importieren

Der Rundgang funktioniert auch in die andere Richtung:

„Importieren Sie das Kibana-Dashboard mit der ID abc-123“

Hierbei wird ein bestehendes Kibana-Dashboard abgerufen, dessen Lens-Visualisierungen in bearbeitbare Diagrammkonfigurationen übersetzt, das Rasterlayout und die Abschnitte beibehalten und alles in example-mcp-dashbuilder geladen. Von dort aus können Sie es mit natürlicher Sprache ändern und erneut exportieren.

Dadurch wird die KI zu einem Mitarbeiter in Ihrem bestehenden Kibana-Workflow, nicht zu einem Ersatz.

Benutzerdefinierte Themen und Farben

Sie wünschen sich ein Dashboard mit Ihrem Branding? Stellen Sie einfach folgende Frage:

„Erstellen Sie ein Dashboard im pinken Design mit benutzerdefinierten Farben"

Jeder Visualisierungstyp unterstützt eine benutzerdefinierte Farbkonfiguration:

• Diagramme: palette akzeptiert ein Array von Hex-Farben für Serien und Segmente.
• Metriken: color legt die Hintergrundfarbe fest.
• Heatmaps: colorRamp definiert den Verlauf von niedrigen zu hohen Werten.

Die KI erkennt Themenwünsche auf natürliche Weise. Sagen Sie „maritimes Design“ und es wählt Blau- und Türkistöne aus. Sagen Sie „Unsere Markenfarben verwenden“ und geben Sie Hexadezimalwerte an, diese werden beim Export in Kibana übernommen.

Ein thematisches Dashboard mit benutzerdefinierten Farben.

Funktionsweise von example-mcp-dashbuilder: MCP-Architektur

example-mcp-dashbuilder basiert auf MCP, dem offenen Standard zur Verbindung von KI-Assistenten mit externen Werkzeugen und Daten. Hier die Architektur im Überblick:

Der MCP-Server stellt 25 Tools bereit, die die KI direkt aufrufen kann, vom Ausführen von ES|QL-Abfragen, dem Exportieren von Dashboards sowie einige interne „App-only“-Tools, die die Inline-Vorschau nutzt, um Daten abzurufen, Layoutänderungen zu speichern und Zeitfelder zu erkennen. Er dient als Ressource für drei Bereiche: Als Leitfaden mit Best Practices für die Datenvisualisierung, als ES|QL-Referenz und als Playbook für die Tiefenanalyse, das bei offenen Prompts („Analysiere meine Logs“, „Was ist in diesem Index interessant?“) zum Einsatz kommt. Er wird entweder über stdio oder HTTP ausgeführt, der HTTP-Transport unterstützt streamfähige Antworten und Sitzungsmanagement, sodass mehrere Clients mit einem Server verbunden werden können.

Die MCP-App dient als interaktive Vorschau. Sie basiert auf React, Elastic Charts und Elastic UI, gebündelt in einer einzigen, eigenständigen HTML-Datei. Wenn die KI view_dashboard aufruft oder ein Diagramm erstellt, rendert der Host dieses HTML in einem Sandbox-iframe. Die App kommuniziert vollständig über das MCP Apps-Protokoll mit dem Server und nutzt callServerTool() über postMessage, um Daten abzurufen, Layouts zu speichern und Zeitfelder zu erkennen. Es gibt keinen lokalen Server, keinen Port zum Konfigurieren, keine externe Netzwerkabhängigkeit.

Das bedeutet, dass es mit jedem MCP-kompatiblen Client funktioniert: Cursor, Claude Desktop, Claude.ai, VS Code mit Copilot und mehr.

Welche Diagrammtypen unterstützt example-mcp-dashbuilder?

Zum Zeitpunkt der Erstellung dieses Artikels werden sechs Diagrammtypen unterstützt, die die gängigsten Dashboard-Szenarien abdecken:

Die Dashboards unterstützen ausklappbare Abschnitte zur besseren Übersicht, eine Zeitauswahl mit automatischer Zeitfelderkennung sowie die Möglichkeit, mehrere Dashboards zu speichern und zwischen ihnen zu wechseln. Parallele Chat-Sitzungen bleiben durch einen dashboardId-Thread, der bei jedem Tool-Aufruf durchlaufen wird, voneinander isoliert.

Installation und Ausführung von example-mcp-dashbuilder

example-mcp-dashbuilder ist Open-Source und sofort einsatzbereit. Sie benötigen Node.js 22+, eine Elasticsearch-Instanz (lokal oder Elastic Cloud) und einen MCP-kompatiblen Client.

Claude Desktop: Laden Sie die neueste .mcpb von GitHub Releases herunter und klicken Sie doppelt darauf. Claude Desktop fordert Sie zur Eingabe Ihrer Elasticsearch-Zugangsdaten auf.

Cursor / Claude Code / VS Code Copilot: Richten Sie Ihre MCP-Konfiguration auf den veröffentlichten Tarball – kein Klon, kein npm install:

Legen Sie ES_NODE, ES_API_KEY (oder ES_USERNAME / ES_PASSWORD) und KIBANA_URL als Umgebungsvariablen fest. Wenn Sie lieber von der Quelle aus arbeiten möchten, klonen Sie das Repository und führen Sie npm run setup als interaktiven Assistenten aus, der Elasticsearch lokal sowie Elastic Cloud (Cloud ID + API-Schlüssel) verwaltet.

Beginnen Sie mit der Entwicklung:

„Erkunden Sie den Log-Index und erstellen Sie mir ein möglichst aussagekräftiges Dashboard.“

Die KI übernimmt dann den Rest. 😉

Roadmap: Die Zukunft von example-mcp-dashbuilder

Dies ist eine frühe Version, die wir aktiv weiter entwickeln. Dies sind einige Bereiche, auf die wir uns konzentrieren:

• Weitere Diagrammtypen: Gauge, Donut, Treemap, Datentabelle und Tag Cloud, passend zu den vollständigen Funktionen von Lens.
• Dashboards auf Git pushen: Schreiben Sie Dashboard-Konfigurationen in ein Repository für Versionskontrolle und Code-Review-Workflows.
• Verbesserte Fehlerbehandlung: Detaillierteres Feedback, wenn ES|QL-Abfragen fehlschlagen, mit Vorschlägen für allgemeine Problemlösungen.
• Effektivere Analyseströme: Erweiterung des Deep-Analysis-Playbooks, um mehr Datenformen (Logs, Metriken, Traces) abzudecken.

Wir würden uns freuen zu erfahren, was Sie damit entwickeln. Probieren Sie es aus, melden Sie Probleme und lassen Sie uns wissen, welche Visualisierungen und Workflows für Ihr Team am nützlichsten wären.

GitHub: elastic/example-mcp-dashbuilder

Danksagungen

Vielen Dank an Walter Rafelsberger und Tim Schnell für ihren Beitrag zur Umsetzung.

FAQ

Was ist example-mcp-dashbuilder? example-mcp-dashbuilder ist eine Open-Source-MCP (Model Context Protocol) Anwendung, die KI-Assistenten mit Elasticsearch verbindet. Es ermöglicht Ihnen, ein Kibana-Dashboard in einfachem Englisch zu beschreiben und generiert automatisch ES|QL-Abfragen, erstellt Visualisierungen und liefert ein interaktives Live-Dashboard direkt im Chatfenster Ihres Editors.

Welche Abfragesprache verwendet example-mcp-dashbuilder, um Daten abzurufen? Alle Datenabrufe verwenden ES|QL, die Pipe-basierte Abfragesprache von Elasticsearch. Der MCP-Server enthält eine integrierte ES|QL-Referenz, die die KI vor dem Schreiben einer Abfrage liest, um eine korrekte Syntax und effiziente Aggregationen für jeden Visualisierungstyp zu gewährleisten.

Kann ich mit example-mcp-dashbuilder erstellte Dashboards nach Kibana exportieren? Ja. Mithilfe von „Dieses Dashboard nach Kibana exportieren“ wird jedes Panel in eine echte Kibana Lens-Visualisierung übersetzt, wobei ES|QL-Abfragen, das 48-spaltige Rasterlayout, benutzerdefinierte Farben und Serienpaletten erhalten bleiben. Das Ergebnis ist ein voll funktionsfähiges Kibana-Dashboard, kein Screenshot oder Einbettung.

Kann ich ein bestehendes Kibana-Dashboard in example-mcp-dashbuilder importieren, um eine KI-unterstützte Bearbeitung durchzuführen? Ja. Durch Angabe einer Kibana-Dashboard-ID wird das vorhandene Dashboard abgerufen, dessen Lens-Visualisierungen in bearbeitbare Diagrammkonfigurationen übersetzt und in example-mcp-dashbuilder geladen. Anschließend können Sie das Dashboard mithilfe natürlicher Sprache modifizieren und wieder nach Kibana exportieren.

Welche MCP-Clients sind mit example-mcp-dashbuilder kompatibel? example-mcp-dashbuilder funktioniert mit jedem MCP-kompatiblen Client, einschließlich Cursor, Claude Desktop, Claude.ai und VS Code mit Copilot. Es unterstützt sowohl stdio- als auch HTTP-Transport, ohne dass eine lokale Server- oder Portkonfiguration erforderlich ist.

Welche Diagrammtypen werden von example-mcp-dashbuilder unterstützt? Die aktuelle Version unterstützt sechs Diagrammtypen: Balkendiagramm, Liniendiagramm, Flächendiagramm, Kreisdiagramm, Metrik (mit Sparkline) und Heatmap. Geplante Ergänzungen umfassen Gauge, Donut, Treemap, Datentabelle und Tag Cloud, um den vollen Funktionsumfang von Kibana Lens zu erreichen.

Was benötige ich, um example-mcp-dashbuilder auszuführen? Sie benötigen Node.js 22 oder höher, eine Elasticsearch-Instanz (lokal oder Elastic Cloud) und einen MCP-kompatiblen Client. Legen Sie die Umgebungsvariablen ES_NODE, ES_API_KEY (oder ES_USERNAME/ES_PASSWORD) und KIBANA_URL fest. Für Claude Desktop laden Sie die .mcpb- Datei von GitHub Releases herunter und installieren sie per Doppelklick.