Nepula ZERO-UI

UIは もう作らない。
AIが生成する。

"Agentic UI"
AIがコンテキストを理解し、
その場に最適なUIを自動で生成して3D空間に配置する

OVERVIEW サービス概要

ZERO-UIは、AIがその場に最適なUIを自動で生成して表示する
Agentic UIの実装です。

近未来SF映画に出てくるような3D空間に、AIが生成したUIパネルを配置する実験的なプロジェクトです。
ユーザーが自然言語で問いかけるだけで、データ可視化、フォーム入力、ダッシュボードなどの
最適なUIがリアルタイムに生成・表示されます。

DEMO 動画デモ

自然言語からUI自動生成

テキスト入力だけで、ダッシュボードやフォームなどのUIパネルがリアルタイムに生成される様子をご覧いただけます。

3D空間でのパネル操作

3D空間上で、生成されたUIパネルを自由に配置・操作するインタラクションのデモです。

ARCHITECTURE Server-Driven UI

サーバーがJSON形式でUI定義を送信し、クライアントが動的にレンダリングする
Server-Driven UI (SDUI) アーキテクチャを採用。

01

自然言語入力

ユーザーがテキストで問いかけると、AIエージェントがクエリの意図を解析

02

UI自動生成

AgentPipelineがLLM・DB・検索を組み合わせ、最適なUIレスポンスを生成

03

3D空間に配置

生成されたパネルが3D空間上にリアルタイムで配置・描画

PROTOCOL AG-UI + A2UI

業界標準プロトコルに準拠した通信・UI生成方式を採用。

AG-UI

Agent-User Interaction Protocol

docs.ag-ui.com

通信トランスポート・ライフサイクル管理・状態同期・ツール呼び出しを担うランタイムプロトコル。SSEベースのイベントストリームで16種類のイベントをリアルタイム配信。

A2UI

Agent to UI

a2ui.org

宣言的UIコンポーネント定義・データバインディング・ストリーミング生成を担うUI記述プロトコル。20種類以上のUIコンポーネントを組み合わせてリッチなインターフェースを構成。

INTERACTIVE UI インタラクティブなUI

ZERO-UIが生成するUIは表示するだけではありません。
フォーム入力・ボタン操作・データ送信など、ユーザーの操作をリアルタイムにサーバーへ伝達し、
双方向のインタラクションを実現します。

AG-UIプロトコルのイベントを拡張し、UIから発生するユーザーアクション(クリック・入力・送信)を
サーバーサイドのエージェントに伝達。エージェントが処理結果に応じたUIの更新・再生成をストリーミングで返却します。

ZERO-UI

ユーザー操作
クリック・入力・送信

AG-UI
(イベント拡張)
Server

エージェント処理
解析・実行・UI再生成

フォームミューテーション

生成されたフォームからのデータ送信・バリデーション・DB書き込みまでを一貫して処理。CRUD操作をUI上で完結。

リアルタイム状態同期

ユーザーの操作結果をSSEイベントストリームで即座にUIへ反映。ローディング・成功・エラーの各状態をシームレスに遷移。

コンテキスト継続

操作履歴と会話コンテキストを維持し、前回の操作を踏まえた次のUI生成を実現。自然な対話フローを構築。

UI生成アルゴリズム

用途に応じてLight LLMと推論LLMを使い分け、
コストとレスポンス速度を最適化しながら高品質なUIを生成します。

INPUT

プロンプト入力

ユーザーの自然言語クエリ
+ 会話履歴を取得

Light LLM

意図分類・ルーティング

高速・低コストなモデルで
クエリの意図と機能領域を特定

推論 LLM

詳細分析・要件抽出

高精度な推論モデルで
要件の構造化・詳細分析を実行

条件分岐

外部情報の補完

不足情報があればWeb検索・
DB参照で自動補完

推論 LLM

UI統合・レンダリング

分析結果を統合し
最適なUI構造を生成

出力方式の決定
A2UI仕様生成

AIが最適なUIを推定しA2UI仕様で生成

生HTML生成

AIが最適なUIを推定し生htmlを生成

パターンから選択

AIが事前に決められたUIパターンを選択

パターンから選択 の詳細

UI BLOCKS 13種類のUIブロック

テキスト、チャート、テーブル、フォームなど多様なブロックタイプを組み合わせ、
あらゆる業務シーンに対応するUIを自動生成します。

TextBlock heading/body/caption/label
MarkdownBlock Markdown形式テキスト
ImageBlock 画像表示
ChartBlock チャート(bar/hbar/line/pie)
TableBlock データテーブル
FormBlock フォーム入力
ListBlock リスト(bullet/numbered/checklist)
CodeBlock コードブロック
ActionBlock ボタングループ
DividerBlock 区切り線
ProgressBlock プログレスバー
MetricBlock メトリクスカード
HtmlAppBlock カスタムHTML

AGENT プラガブルエージェント

AgentPipelineインターフェースを唯一の拡張ポイントとする
プラガブルアーキテクチャを採用。
ユーザー個別のエージェントを追加することで、任意のデータ取得+カスタムUIに対応可能。

LLM統合

OpenAI・Anthropicなど複数のLLMプロバイダーに対応。用途に応じてモデルを使い分けた処理を構築できます。

データベース連携

SQL実行・スキーマ参照を通じて、リアルデータに基づくUI生成を実現。フォームミューテーションによるCRUD操作にも対応。

Embedding検索

ベクトル埋め込みによるパネル間コネクション自動生成。表示中のパネルとの意味的関連性を判定し、自然な会話継続を実現。

動的拡張

ビルトイン・プラグイン・ランタイムアップロードの3つの方式でエージェントを登録。ブラウザからの動的アップロードにも対応。

hello-agent.ts
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}` }],
            }],
          },
        },
      };
    },
  };
}

INTEGRATION 周辺システム連携

RAGを追加することで、ユーザー独自のデータを参照し、
コンテキストに応じた最適なUIを生成することが可能です。

ZERO-UI

フロントエンド
自然言語入力・UI描画

リクエスト
Server

エージェント処理
LLM・パイプライン実行

検索・参照 検索結果をLLMへ
RAG

ユーザー独自RAG
独自データの検索・取得

データ連携
基幹

基幹システム
業務データ・マスタ情報

基幹システムのデータをRAGに取り込むことで、社内の業務データや顧客情報を反映した
UIをリアルタイムに生成できます。

ZERO-UIの詳細やデモについてはお気軽にお問い合わせください

お問い合わせ