【要約】【Generative UI】3Dアバターとの対話体験を壊さない設計 - ホワイトボードAIエージェントを作った話 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者が3D空間でのAIエージェント体験を構築する際、従来のチャット型Generative UIでは没入感が損なわれる問題に直面した。筆者は、対話体験を最大化するために以下の課題を特定した。
- ・チャット欄にUIが現れると、アバターとの対話という「誰かと話している感覚」が阻害される。
- ・チャットの履歴とともにUIが流れてしまい、情報を固定して参照し続けることが困難である。
- ・テキスト主体のUIは、複雑な情報の視覚化において表現力に限界がある。
// Approach
UIの表示場所をチャット欄から分離し、3D空間内の「ホワイトボード」へ配置する設計アプローチを採用した。筆者は、柔軟なUI構築とリアルタイムな同期を実現するために以下の手法を組み合わせた。
- ・A2UIを利用し、AIがJSON形式でUI構造を宣言的に定義する仕組みを導入した。
- ・AG-UIプロトコルとSSEを用い、エージェントとフロントエンド間のリアルタイム通信を確立した。
- ・@react-three/dreiのHtmlコンポーネントを活用し、3D空間の座標にReactコンポーネントを埋め込んだ。
- ・Strands Agentsのスキル機能を用いて、エージェントがA2UIのカタログを理解できるよう補完した。
// Result
試作段階ではあるが、対話の流れを維持したまま、スライドやグラフなどのUIを空間内に提示することに成功した。筆者は、以下の成果を得ている。
- ・会話の文脈に応じた柔軟なUI生成と、3D空間への自然な統合を実現した。
- ・UIの表示場所を設計の重要要素として定義し、Generative UIの活用領域を広げた。
- ・今後は、より多様なUIコンポーネントの検証と3Dモデルの作り込みを予定している。
Senior Engineer Insight
> UIをチャットから分離する設計は、UXの観点で極めて合理的だ。しかし、実戦投入には以下の課題が残る。まず、AG-UI/SSEによる通信レイテンシが、3D空間の滑らかな体験を阻害するリスクがある。次に、宣言的UI（A2UI）は柔軟だが、出力の整合性担保にLLMの制御コストがかかる。また、3D空間へのDOM埋め込みは、描画負荷やレイヤー管理の複雑化を招く。スケーラビリティ確保のためには、UI生成ロジックの軽量化と、状態管理の厳格な設計が不可欠だ。