Day 2：生成的UI Gen 1 — 静的コンポーネントとAG-UI

Dev.to / 2026/6/12

💬 オピニオンDeveloper Stack & InfrastructureTools & Practical UsageModels & Research

共有:

要点

この記事では「Gen 1」の生成的UIを、エージェントがUIコードを生成せず、開発者が用意した事前定義のコンポーネントにデータを流し込む“静的生成的UI”として説明し、デザインシステムやアクセシビリティを保つ考え方を示しています。
CopilotKitチームのAG-UI（Agent–User Interaction protocol）を紹介し、エージェントのバックエンドとフロントエンドの間で双方向の型付きイベントストリーム（主にSSE）をやり取りしてUIを更新する仕組みだと位置づけています。
AG-UIは、MCP（エージェント→ツール通信）やA2A（エージェント→エージェント通信）の対になる概念として、エージェントがユーザーと安全に関わるための標準化を目指しています。
さらに、AG-UIがLangChain、Microsoft Agent Framework、AWS、Mastra、PydanticAIなど複数のフレームワーク/エコシステムに採用されていると述べ、特定のフレームワークではなく“プロトコル”に賭けられることを示唆しています。
後半では、フライト検索エージェントの例を用い、フロントエンドが「レンダリング可能なアクション」（エージェントが呼び出してよいコンポーネント）を登録することで、安全に表示を制御する手順を進めています。

この記事の続きは原文サイトでお読みいただけます。