Omni Agent でダッシュボード App を作ってみた
こんにちは、ikumiです。
Omni には通常のダッシュボードとは別に、App という機能があります。カスタム HTML/JavaScript で自由なレイアウトや操作性を持つインターフェースをデータと組み合わせて作れる機能で、Omni Agent に自然言語で指示するだけで App の雛形を生成できます。
今回は Omni Agent に指示して App を作成し、App エディターで確認・修正する流れを試してみました。
Omni App とは
通常のダッシュボードがグリッドレイアウトにタイルを並べる形式であるのに対し、App はカスタム HTML/JavaScript で自由にレイアウトや対話性を設計できるインターフェースです。同じ Omni のセマンティックモデルを使ってデータをクエリしながら、ダッシュボードでは難しい独自の UI を作れます。2026年7月17日時点では本機能はベータ版となります。
また、Omni Agent を使うと、「こういう画面が欲しい」という要件を自然言語で伝えるだけで、クエリの生成・HTML の作成・データの接続まで Agent が自動で行います。
試してみた
事前準備
Omni Appの機能を有効化していない場合には、設定 ＞ 一般 から有効化をします
1. Omni Agent を開く
メインナビゲーションの Omni Agent をクリックしてチャット画面を開きます。
チャットボックス下部の + ボタンから、クエリに使用するモデルやトピックを絞り込めます。今回は Omni_mart トピック（注文・顧客・商品を結合したトピック）を指定して進めます。
2. Agent に App の要件を指示する
チャットで作りたい App の要件を自然言語で伝えます。今回はフードとドリンクの売上サマリーと直近注文一覧を表示する App を作ることを想定して以下のように指示しました。
Omni_mart トピックを使って、フードとドリンクそれぞれの注文数と売上合計を
KPI カードで並べて表示し、その下に直近の注文一覧を表形式で表示する App を作ってください。
注文一覧には注文日・顧客名・売上・フード/ドリンクの区別を含めてほしいです。
Agent が Omni_mart トピックに対してクエリを生成し、HTML を作成しします。処理が完了すると App のプレビューが表示されます。
3. App エディターで確認・修正する
編集 画面に入り、コードをクリックすると App エディターが開きます。左側にHTMLコードエディター、右側にライブプレビューが並んだ構成で、コードを編集するとプレビューがリアルタイムで更新されます。
生成されたコードを確認しながら、細かい調整が必要な箇所を直接編集します。たとえばタイトルテキストや色などの微調整はコードエディターで直接行います。
4. Agent との反復でAppを改善する
App エディターからも Omni Agent に追加指示を出して反復的に改善できます。たとえば以下のように続けて指示します。
注文一覧の行をクリックしたときに注文詳細をモーダルで表示できるようにしてほしいです。
Agent がコードを更新し、変更がプレビューに即時反映されれば問題ありません。
->
5. （参考）ワークブックから手動で App を作成する
Agent を使わず手動で App を作成することもできます。ワークブックの +ダッシュボード ボタンから App を選択すると、スターターテンプレートをベースに空の App エディターが開きます。コードを直接記述するか、エディター上で Agent に指示して構築していきます。
最後に
Omni Agent を使ったダッシュボード App の作成を試してみました。
自然言語で要件を伝えるだけで、クエリ生成から HTML の作成・データ接続まで Agent が一括でやってくれるのはかなり体験が良いです。App エディターでの反復改善も Agent に追加指示を出すだけで済むため、HTML/JavaScript に慣れていなくても修正を重ねやすいのが助かります。
ただし、スケジュール配信や埋め込みが未対応という制限は今後の対応に期待したいです。
