Nepula ZERO-UI
"Agentic UI"
AIがコンテキストを理解し、
その場に最適なUIを自動で生成して3D空間に配置する
ZERO-UIは、AIがその場に最適なUIを自動で生成して表示する
Agentic UIの実装です。
近未来SF映画に出てくるような3D空間に、AIが生成したUIパネルを配置する実験的なプロジェクトです。
ユーザーが自然言語で問いかけるだけで、データ可視化、フォーム入力、ダッシュボードなどの
最適なUIがリアルタイムに生成・表示されます。
テキスト入力だけで、ダッシュボードやフォームなどのUIパネルがリアルタイムに生成される様子をご覧いただけます。
3D空間上で、生成されたUIパネルを自由に配置・操作するインタラクションのデモです。
サーバーがJSON形式でUI定義を送信し、クライアントが動的にレンダリングする
Server-Driven UI (SDUI) アーキテクチャを採用。
ユーザーがテキストで問いかけると、AIエージェントがクエリの意図を解析
AgentPipelineがLLM・DB・検索を組み合わせ、最適なUIレスポンスを生成
生成されたパネルが3D空間上にリアルタイムで配置・描画
業界標準プロトコルに準拠した通信・UI生成方式を採用。
Agent-User Interaction Protocol
docs.ag-ui.com通信トランスポート・ライフサイクル管理・状態同期・ツール呼び出しを担うランタイムプロトコル。SSEベースのイベントストリームで16種類のイベントをリアルタイム配信。
Agent to UI
a2ui.org宣言的UIコンポーネント定義・データバインディング・ストリーミング生成を担うUI記述プロトコル。20種類以上のUIコンポーネントを組み合わせてリッチなインターフェースを構成。
ZERO-UIが生成するUIは表示するだけではありません。
フォーム入力・ボタン操作・データ送信など、ユーザーの操作をリアルタイムにサーバーへ伝達し、
双方向のインタラクションを実現します。
AG-UIプロトコルのイベントを拡張し、UIから発生するユーザーアクション(クリック・入力・送信)を
サーバーサイドのエージェントに伝達。エージェントが処理結果に応じたUIの更新・再生成をストリーミングで返却します。
ユーザー操作
クリック・入力・送信
エージェント処理
解析・実行・UI再生成
生成されたフォームからのデータ送信・バリデーション・DB書き込みまでを一貫して処理。CRUD操作をUI上で完結。
ユーザーの操作結果をSSEイベントストリームで即座にUIへ反映。ローディング・成功・エラーの各状態をシームレスに遷移。
操作履歴と会話コンテキストを維持し、前回の操作を踏まえた次のUI生成を実現。自然な対話フローを構築。
用途に応じてLight LLMと推論LLMを使い分け、
コストとレスポンス速度を最適化しながら高品質なUIを生成します。
ユーザーの自然言語クエリ
+ 会話履歴を取得
高速・低コストなモデルで
クエリの意図と機能領域を特定
高精度な推論モデルで
要件の構造化・詳細分析を実行
不足情報があればWeb検索・
DB参照で自動補完
分析結果を統合し
最適なUI構造を生成
AIが最適なUIを推定しA2UI仕様で生成
AIが最適なUIを推定し生htmlを生成
AIが事前に決められたUIパターンを選択
テキスト、チャート、テーブル、フォームなど多様なブロックタイプを組み合わせ、
あらゆる業務シーンに対応するUIを自動生成します。
AgentPipelineインターフェースを唯一の拡張ポイントとする
プラガブルアーキテクチャを採用。
ユーザー個別のエージェントを追加することで、任意のデータ取得+カスタムUIに対応可能。
OpenAI・Anthropicなど複数のLLMプロバイダーに対応。用途に応じてモデルを使い分けた処理を構築できます。
SQL実行・スキーマ参照を通じて、リアルデータに基づくUI生成を実現。フォームミューテーションによるCRUD操作にも対応。
ベクトル埋め込みによるパネル間コネクション自動生成。表示中のパネルとの意味的関連性を判定し、自然な会話継続を実現。
ビルトイン・プラグイン・ランタイムアップロードの3つの方式でエージェントを登録。ブラウザからの動的アップロードにも対応。
import type { AgentPipeline } from 'zero-ui/pipeline/types';
import type { PipelineToolkit } from 'zero-ui/pipeline/toolkit';
export function createPipeline(): AgentPipeline {
return {
metadata: {
id: 'hello-agent',
label: 'Hello Agent',
description: 'はじめてのエージェント',
icon: '👋',
},
async execute(input, tk) {
tk.log.progress('処理中...');
return {
response: {
id: `hello-${Date.now()}`,
groupLabel: 'Hello',
intent: 'answer',
view: {
layout: 'single',
panels: [{
id: `panel-${Date.now()}`,
label: 'ごあいさつ',
icon: '👋',
blocks: [{ type: 'markdown', content: `入力: ${input.query}` }],
}],
},
},
};
},
};
}RAGを追加することで、ユーザー独自のデータを参照し、
コンテキストに応じた最適なUIを生成することが可能です。
フロントエンド
自然言語入力・UI描画
エージェント処理
LLM・パイプライン実行
ユーザー独自RAG
独自データの検索・取得
基幹システム
業務データ・マスタ情報
基幹システムのデータをRAGに取り込むことで、社内の業務データや顧客情報を反映した
UIをリアルタイムに生成できます。
ZERO-UIの詳細やデモについてはお気軽にお問い合わせください
お問い合わせ