描くのではなく、説明する：MCPとES|QLによるAIネイティブのKibanaダッシュボード

example-mcp-dashbuilderはオープンソースのMCPアプリケーションで、平易な英語のプロンプトをライブでインタラクティブなKibanaのダッシュボードに変換します。これらはすべて、エディタのチャット画面内で行われます。ダッシュボードの要望を記述すると、AIがインデックス構造を検出し、各可視化に適切なES|QLアグリゲーションを記述し、作業中にインラインでプレビューをレンダリングします。完了後、1つのコマンドで完全に機能するKibanaのダッシュボードがエクスポートされます。実際のLens可視化、正確なグリッドレイアウト、カスタムカラーもそのまま保持されます。現在、6種類のグラフがサポートされており、Kibana Lensの全機能がロードマップに設定されています。

Kibanaダッシュボードビルダーとは？

必要なダッシュボードをわかりやすい日本語で説明すると、インタラクティブなグラフ、ドラッグアンドドロップのレイアウト、Kibanaへのワンクリックエクスポートが表示・実行されるとしたらどうでしょうか。

それがまさに example-mcp-dashbuilder の役割です。これはオープンソースのモデルコンテキストプロトコル（MCP）アプリケーションで、AIアシスタントをElasticsearchに接続し、会話を通じて総合的なKibanaのダッシュボードを作成できます。メニューをクリックしたり、手動で可視化設定を書く必要はありません。必要なものを説明するだけで、AIがデータを調査し、Elasticsearch Query Language（ES|QL）でクエリを書き、グラフを作成し、ライブかつインタラクティブなダッシュボードを提供します。これらはすべて、エディタのチャット画面内で行われます。

プロンプトからダッシュボードまでを数秒で

実際の様子を以下で紹介します。次のように入力します：

「「logstash-*」から、リクエストの合計数、時間の経過に伴う転送バイト数、上位の地理的ソース、対応コードの内訳を含むWebトラフィックダッシュボードを作成してください。」

AIは次のように動作します：

1. データを発見：インデックスを一覧表示し、フィールドマッピングを検査します。
2. ES|QLのクエリを作成：スキーマに合わせ、適切なアグリゲーションを使用します。
3. 可視化を作成：棒グラフ、折れ線グラフ、スパークライン付きメトリクス、ヒートマップ、円グラフを作成できます。
4. すべてを整理整頓：折りたたみ可能なセクション、わかりやすいタイトル、適切なレイアウト。
5. インタラクティブなプレビューを表示：チャット内でツールチップ、時間選択機能、ドラッグ＆ドロップ機能を利用できます。

各グラフは作成されると同時にインラインで表示されるため、リアルタイムで進捗状況を確認できます。次にview_dashboardは、Kibanaの48列グリッドにすべてのパネルが配置された完全なダッシュボードを表示します。

単一のグラフを本文中にプレビュー表示します。

ES|QLで構築

すべてのデータ検索には、Elasticsearchのパイプ型クエリ言語であるES|QLを使用しています。AIは単に未加工のクエリをそのまま渡すだけでなく、ES|QL構文に関して標準搭載された知識とお客様のデータ構造に関する情報を使用して、各可視化タイプに対して正確かつ効率的なクエリを作成します。

サーバーには包括的なES|QLリファレンスがMCPリソースとして含まれています。クエリを書く前に、AIはこのリファレンスを読み取り、利用可能なコマンド、関数、およびパターンを理解します。データ可視化のベストプラクティス・ガイド（リソースとしても機能）と組み合わせることで、AIはクエリの方法だけでなく、何が可視化を優れたものにするのかも知ることができます：

• 時系列には BUCKET(@timestamp, 1 day) を使い、常に時間フィールドで SORT します。
• 円グラフは| SORT value DESC | LIMIT 6で6切れに制限します。
• カテゴリー比較のための棒グラフ、トレンドを示す折れ線グラフ、主要業績評価指標（KPI）のためのメトリクスを選択します。

オープンエンド分析によるAI主導のデータ探索

頭の中で既に設計したダッシュボードを、実際に作成することはまた別の作業です。「このインデックスの何が興味深いのか？」と尋ねること、そして有用な答えを得ることはより難しく、AIが単に描くのではなく、探索する方法を知る必要があります。

example-mcp-dashbuilder は、構造化された探索フローを定義する analysis://guidelines リソースを提供します。そのリソースとは、データのプロファイリング、ターゲットを絞ったアグリゲーションの実行、調査に値するパターンの抽出、最も興味深い発見のためのチャートの作成、ユーザーが次に望むかもしれないドリルダウンクエリの提案などです。トリガーフレーズ（例えば「ログを分析」や「このインデックス内のパターンを発見」）は、AIが何かを行う前にプレイブックを読み込むようにするため、オープンエンドなプロンプトはランダムなチャートの集合ではなく、一貫性のある調査を生成します。

結果：AIに馴染みのないインデックスを渡すと、開始点が返されます。開始点は、ダッシュボードと「以下に気づきました。これらの中に詳しく調べたいものはありますか？」というプロンプトと短いリストです。

Kibanaダッシュボードのエクスポートとインポート：完全な往復処理

エクスポート/インポートの往復処理は、既に Kibana を使用しているチームにとって example-mcp-dashbuilder が真に役立つ部分です。example-mcp-dashbuilder は独自の機能を持ち、エディタ内に存在する対話型のダッシュボード画面ですが、作業内容をエディタ内に閉じ込めることはありません。ここで構築されたダッシュボードは、必要に応じてKibanaに移動できます。既存のKibanaダッシュボードは、AI支援による編集のために逆方向に移動させることが可能です。

Kibanaにエクスポート

ダッシュボードにご満足いただけましたら、次のコマンド1つでエクスポートできます：

「このダッシュボードをKibanaにエクスポートしてください」

すべてのパネルは実際のKibana Lensの可視化に変換されます。変換後も以下は保持されます：

• ES|QLクエリ：LensにおけるES|QLのデータソースとして直接転送されます。
• グリッド位置：Kibanaと同じ48列システムを使用しているため、レイアウトはKibanaと全く同じに見えます。
• カスタムカラー：シリーズパレット、メトリックの背景、ヒートマップのカラーランプ。

その結果として、全面的に機能するKibanaのダッシュボードができます。スクリーンショットでも埋め込みでもありません。共有してKibanaで編集を続けることができるダッシュボードです。

Kibanaダッシュボードとカーソルチャットのダッシュボードを並べて表示します。

Kibanaからインポート

往復処理は逆方向でも機能します。

「ID abc-123でKibanaのダッシュボードをインポート」

これは既存のKibanaのダッシュボードを取得し、そのLensの可視化を編集可能なチャート構成に変換し、グリッドのレイアウトとセクションを保持して、すべてを example-mcp-dashbuilder に読み込みます。そこから自然言語で修正し、再エクスポートできます。

このように、AIは既存のKibanaワークフローにおける共同作業者となり、それを置き換えるものではありません。

カスタムテーマと色

ブランド化されたダッシュボードをご希望ですか？お問い合わせください：

「カスタムカラーを使用したピンクを基調としたダッシュボードを作成」

すべての可視化タイプはカスタムカラー設定をサポートしています：

• チャート：palette はシリーズとスライスに対して16進数の色の配列を指定できます。
• 指標：color が背景色を設定します。
• ヒートマップ： colorRamp は、低い値から高い値への勾配を定義します。

AIはテーマのリクエストを自然に受け取ります。「海のテーマ」と伝えると、青やティールの色合いが選択されます。「自社のブランドカラーと一致させてください」と伝えて16進数の値を指定すると、エクスポート時にKibanaに引き継がれます。

カスタムカラーの、テーマを使用したダッシュボード。

example-mcp-dashbuilder の仕組み：MCPアーキテクチャ

example-mcp-dashbuilderは、AIアシスタントを外部ツールやデータに接続するためのオープン標準である MCPに基づいて構築されています。アーキテクチャの概要は以下の通りです：

MCPサーバーは、AIが直接呼び出せる25のツールを公開しています。これには、ES|QLクエリの実行からダッシュボードのエクスポートまで、網羅的な内容が含まれています。さらに、インラインプレビューがデータの取得、レイアウト変更の永続化、時間フィールドの検出に使用する内部専用の「アプリのみ」ツールもいくつかあります。また、3つのリソースも提供しており、データ可視化のベストプラクティスガイド、ES|QLリファレンス、そしてオープンエンドのプロンプト（「ログを分析」、「このインデックスで何が興味深いのか」）に対応する深度分析プレイブックがあります。そして、stdioまたはHTTPのいずれかで実行されます。HTTPトランスポートはストリーム可能な対応とセッション管理をサポートしているため、複数のクライアントが1つのサーバーに接続できます。

MCPアプリは、インタラクティブなプレビューを表示します。React、Elastic Charts、Elastic UIを組み合わせて構築されており、1つの独立したHTMLファイルにまとめられています。AIが view_dashboard を呼び出したり、チャートを作成したりすると、ホストはこのHTMLをサンドボックス化されたiframe内にレンダリングします。アプリ全体はMCP Appsのプロトコルを通じてサーバーと通信し、postMessage上の callServerTool() を使ってデータの取得、レイアウトの保存、時間フィールドの検出を行います。localhostサーバーもなく、ポート設定も、外部ネットワーク依存もありません。

これは、あらゆるMCP互換のクライアント（Cursor、Claude Desktop、Claude.ai、VS CodeとCopilotの併用など）と動作することを意味します。

example-mcp-dashbuilder はどのようなチャートタイプをサポートしていますか？

執筆時点では、最も一般的なダッシュボードのシナリオをカバーする以下の6種類のチャートタイプがサポートされています。

ダッシュボードは、整理のための折りたたみ可能なセクション、自動時間フィールド検出を備えたタイムピッカー、および複数のダッシュボードを保存して切り替える機能をサポートしています。並行チャットセッションは、すべてのツールコールでdashboardIdがスレッド化されているため、互いに分離された状態を維持します。

example-mcp-dashbuilder のインストールと実行方法

example-mcp-dashbuilder はオープンソースであり、すぐに利用可能です。Node.js 22+、Elasticsearchインスタンス（ローカルまたはElastic Cloud）、およびMCP互換のクライアントが必要です。

Claude Desktop： GitHub Releasesから最新版.mcpbをダウンロードし、ダブルクリックします。Claude Desktopから、Elasticsearchの認証情報を入力するよう促されます。

Cursor / Claude Code / VS Code Copilot：MCP設定をリリースされた tarball に指定します。クローンや npm install は不要です。

環境変数として ES_NODE, ES_API_KEY（または ES_USERNAME / ES_PASSWORD）と KIBANA_URL を設定します。ソースから作業したい場合は、リポジトリをクローンし、npm run setup を実行して、ローカルのElasticsearchとElastic Cloud（Cloud ID + APIキー）の両方を処理するインタラクティブウィザードを使用します。

次のように、構築を開始できます：

「ログのインデックスを探索し、可能な限り洞察に富むダッシュボードを作成してください」

AIがその後を引き継ぎます。😉

ロードマップ：example-mcp-dashbuilder の今後

これは初期リリースであり、現在も鋭意開発を進めています。以下の分野などに注力しています。

• より多くのチャートタイプ：ゲージグラフ、ドーナツグラフ、ツリーマップ、データテーブル、タグクラウドなど、Lensの全機能に対応。
• ダッシュボードをGitにプッシュ：ダッシュボードの設定をリポジトリに書き込み、バージョン管理やコードレビューのワークフローを行います。
• 優れたエラーUX：ES|QLクエリが失敗した場合、一般的な修正案を含むより詳細なフィードバックを提供します。
• より高度な分析フロー：詳細分析のプレイブックを拡張し、より多くのデータ形式（ログ、メトリクス、トレース）に対応します。

お客様が構築されたものを、ぜひご紹介ください。お試しの後で問題があればご報告いただき、お客様のチームにとって最も役立つ可視化やワークフローはどのようなものかお知らせください。

GitHub: elastic/example-mcp-dashbuilder

謝辞

ウォルター・ラフェルズバーガーとティム・シュネルの実装への貢献に感謝します。

FAQ

example-mcp-dashbuilder とは？example-mcp-dashbuilder は、AIアシスタントをElasticsearchに接続するオープンソースのMCP（Model Context Protocol）アプリケーションです。Kibanaのダッシュボードを平易な日本語で説明し、ES|QLクエリを自動生成し、可視化を作成し、エディタのチャット画面内にライブかつインタラクティブなダッシュボードを表示できます。

example-mcp-dashbuilder はデータ取得にどのようなクエリ言語を使っていますか？すべてのデータ取得には、Elasticsearchのパイプクエリ言語であるES|QLを使用しています。MCPサーバーには、クエリを書く前にAIが読み取るES|QLリファレンスが標準搭載されているため、各可視化タイプの正しい構文と効率的なアグリゲーションが確保されます。

example-mcp-dashbuilder で作成したダッシュボードをKibanaにエクスポートできますか？はい。「このダッシュボードをKibanaにエクスポート」を実行すると、すべてのパネルが実際の Kibana Lens の可視化に変換され、ES|QLクエリ、48列のグリッドレイアウト、カスタムカラー、シリーズパレットが保持されます。結果は、スクリーンショットや埋め込みではなく、全面的に機能するKibanaのダッシュボードです。

既存のKibanaのダッシュボードを example-mcp-dashbuilder にインポートして、AI支援型編集はできますか？はい。KibanaのダッシュボードIDを指定すると、既存のダッシュボードが取得され、Lensの可視化が編集可能なグラフ構成に変換され、example-mcp-dashbuilder に読み込まれます。その後、自然言語を使用してダッシュボードを変更し、Kibanaに再エクスポートできます。

example-mcp-dashbuilder と互換性のあるMCPクライアントはどれですか？example-mcp-dashbuilder は、Cursor、Claude Desktop、Claude.ai、VS Code with Copilotなど、あらゆるMCP互換クライアントで動作します。stdioとHTTPトランスポートの両方をサポートしており、localhostサーバーやポートの設定は不要です。

example-mcp-dashbuilder はどのチャートタイプをサポートしていますか？現在のリリースでは、棒グラフ、折れ線グラフ、面グラフ、円グラフ、メトリクス（スパークライン付き）、ヒートマップの6種類のグラフがサポートされています。Kibana Lensの全機能に合わせて、ゲージグラフ、ドーナツ、ツリーマップ、データテーブル、タグクラウドなどを追加する予定です。

example-mcp-dashbuilder を実行するには何が必要ですか？Node.js 22以上、Elasticsearchインスタンス（ローカルまたはElastic Cloud）、およびMCP互換クライアントが必要です。環境変数 ES_NODE、ES_API_KEY（またはES_USERNAME/ES_PASSWORD）、KIBANA_URLを設定します。Claude Desktopの場合は、GitHub Releasesから.mcpbファイルをダウンロードし、ダブルクリックしてインストールします。