【要約】Microsoft Agent Framework × AG-UI をお試し [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
AIエージェントとの対話において、情報の視認性と制御性が低下するという課題がある。チャットのテキストのみでは、複雑なデータや選択肢の提示が困難である。具体的には以下の問題に直面する。
- ・テキスト情報の過多によるユーザーの認知負荷の増大。
- ・LLMにUI（HTML/CSS）を直接生成させることによる、セキュリティリスクとデザイン品質の低下。
- ・既存のAG-UI実装（Dojo）における、マルチターン対話時の履歴シリアライズバグ。
- ・HITL（Human in the Loop）における、ドキュメント化されていない通信仕様の不透明さ。
// Approach
開発者は、LLMにUIの構造を決めさせ、描画はクライアントが行う「分業型」のアプローチを採用した。これにより、見栄えとセキュリティを両立させている。
- ・Pattern A (Backend Tool Rendering): サーバー側でDBからデータを取得し、UI用ペイロードを返す手法。
- ・Pattern B (Tool-based Generative UI): LLMに構造化データのみを生成させ、クライアント側で描画する手法。
- ・HITLの実装: MAF独自のCustomEventを利用し、ユーザーの承認プロセスを組み込む手法。
- ・不具合への対策: 自前でのSSEパース実装や、LLMの挙動を制御するためのtool resultへの指示注入。
// Result
レンタカー予約のPoCにおいて、プラン提示から車種選択、予約承認までの一連のフローを視覚的なUIで実現した。これにより、ユーザーはクリック操作のみで予約を進められるようになった。
- ・チャットとUIコンポーネントのシームレスな連携を確認。
- ・LLMの指示（instructions）よりも、tool resultによる文脈制御の方が高い制御性を得られることを実証。
- ・フレームワークの未成熟な仕様（履歴管理やHITLの形式）を、実装レベルで回避・補完する具体的な手法を確立。
Senior Engineer Insight
> Generative UIはUXを劇的に向上させるが、本記事が示す通り、フレームワークの未成熟な挙動への対処が不可欠である。実戦投入には、LLMの出力揺れを吸収するサーバー側のラッパー実装や、クライアント側の堅牢な状態管理が求められる。特に、LLMに「次に何をすべきか」をtool result経由で指示する手法は、プロンプトエンジニアリングよりも実効性が高く、システム設計として極めて合理的である。