😎

[Mastra YouTube 解説] ジェネレーティブUIの3つのフレーバー

に公開
TypeScript
copilotkit
AIエージェント
Mastra
idea

Mastra の公式YouTubeチャンネルにアップされた動画を速報ベースでお伝えします。ただの文字起こしではなく、扱われているトピックの抽出と、トピックごとの要約をしています。速報性重視でAIの力を多分に使っているので、私自身の考察は少なめです。

Mastra YouTube動画 速報解説一覧

動画情報

https://www.youtube.com/watch?v=a-K_qFUmda0

概要

CopilotKitの創設メンバーであるTyler Slatonが、Mastraのイベントで行ったトーク。エージェンティックアプリケーションにおけるジェネレーティブUIを「コントロールド（Controlled）」「宣言的（Declarative）」「オープン（Open）」の3段階のスペクトラムとして整理し、それぞれのメリット・デメリットをライブデモを交えて紹介します。さらに、Mastraのワーキングメモリ（Working Memory）を活用したエージェントステートの双方向同期パターンや、CopilotKitが開発するAUI（Agent User Interaction）プロトコルの位置づけについても解説しています。

ジェネレーティブUI（Generative UI）とは、生成AI（AIエージェント）がユーザーの状況や目的に応じて、リアルタイムに操作画面（ユーザーインターフェース）を動的に生成・変更する技術や概念のことです。ユーザーの入力や対話に合わせて、UIコンポーネントがリアルタイムで構築されます。例えば、チャットで「今月の売上グラフを表示して」と頼むと、グラフコンポーネントをその場で生成して表示する、といったシナリオが考えられます。

要点

  1. CopilotKitはAIコパイロット構築フレームワーク ― GitHubスター30,000、AUIプロトコルは12,000スター。月間1,500万のエージェントインタラクションを処理し、Fortune 500の10%に採用されている
  2. エージェンティックアプリケーションは従来のリクエスト・レスポンスパラダイムを壊す ― 長時間実行、構造化/非構造化の混在、サブエージェントへの制御委任、非決定的UIなど複雑性が高い
  3. AUIプロトコルはMCPやA2Aと補完関係 ― MCPはツール・コンテキスト・リソース、A2Aはエージェント間通信、AUIはユーザーとエージェント間のストリーミング通信を担当する
  4. ジェネレーティブUIには3つのフレーバーがある ― 「コントロールド」「宣言的」「オープン」の3段階で、コントロールからフレキシビリティへのスペクトラムを形成する
  5. コントロールドGenerative UI ― Reactコンポーネントをエージェントに渡し、エージェントがpropsを推論してレンダリング。ピクセルパーフェクトだが結合度が高い
  6. 宣言的Generative UI（A2UI） ― GoogleのA2UIスペックを利用。JSONスキーマがレンダラーにマッピングされ、結合度は低いがレイアウトが変動する
  7. オープンGenerative UI ― エージェントが生のHTMLを生成し、二重iframeでセキュアにレンダリング。最大の柔軟性を持つが予測不能
  8. エージェントステートはMastraのワーキングメモリで双方向同期 ― ユーザーとエージェントの両方がステートを更新・参照でき、キャンバスアプリケーションのような体験を実現
  9. ヒューマンインザループは自己改善の鍵 ― ユーザーのステアリング操作が暗黙のRLHFシグナルになり、明示的フィードバックなしでエージェントを改善できる
  10. AGIとA2UIは競合ではなく補完関係 ― A2UIはUIの宣言的スキーマ、AGI（AUI）はそれを含むすべてのデータを転送するストリーミングプロトコル

詳細

CopilotKitとエージェンティックUIの現状

CopilotKitは、ChatGPT 3.5の時代から存在するAIコパイロット構築フレームワークです。「ユーザー向けのエージェンティックアプリケーション」を構築するためのオープンソースツールで、GitHubスターは30,000を超え、AUIプロトコルは12,000スターを獲得しています。月間1,500万のエージェントインタラクションを処理し、Fortune 500の10%に採用されるなど、幅広い規模の企業に利用されています。

Tylerは、エージェンティックアプリケーションのユースケースを大きく2つに分類しました。1つはSaaSコパイロットで、LinearのようなプランニングソフトにAIを統合し、チケット作成やプロジェクトステータス確認を自然言語で行えるようにするパターン。もう1つはプロダクティビティコパイロットで、Claude CodeやCodexのように、コアワーク自体をAIで加速するパターンです。

しかし、どちらのパターンにも共通する課題があります。エージェンティックアプリケーションは従来のリクエスト・レスポンスパラダイムを壊してしまうのです。具体的には、タスクが長時間実行されること、出力が構造化（JSON）と非構造化（マークダウン、テキスト）の混在であること、サブエージェントへの制御委任と並列処理が必要なこと、そしてUIが非決定的になることが挙げられます。これらの複雑さに対処するため、ストリーミングによる「速く見せる」工夫や、中断・ステアリングの仕組みが重要になります。

AUIプロトコル ― エージェントとユーザーを繋ぐ

CopilotKitが開発するAUI（Agent User Interaction）プロトコルは、エージェンティックバックエンドとフロントエンドを接続するためのストリーミングベースのプロトコルです。クライアント・サーバーアーキテクチャで、クライアント側がユーザーのアプリケーション、サーバー側がエージェントになります。

AUIの位置づけを既存プロトコルとの関係で整理すると以下のようになります：

  • MCP（Model Context Protocol） ― ツール、コンテキスト、リソース（ファイルなど）をエージェントに提供。最近ではUIの返却にも対応
  • A2A（Agent to Agent） ― エージェント間通信。エージェントメッシュの構築を可能にする
  • AUI ― ユーザーとエージェント間の通信。A2Aのユーザー版で、ユーザーがいる場所でエージェントと対話できるようにする

AUIのイベントストリームには、実行開始/終了、テキストメッセージ（デルタ形式）、ツール呼び出し、アクティビティイベント（ステートには含まれないが、ユーザーへの進捗通知）などが含まれます。CopilotKitはこのAUIイベントのReactコンシューマーとして機能します。現在はReactクライアントが中心ですが、Angular、Rust、Goへのイベント送信も対応しており、Slackインテグレーションも構築中とのことです。

フレーバー1：コントロールドGenerative UI

ジェネレーティブUIの最初のフレーバーは「コントロールド（Controlled）」で、最もコントロール度が高いアプローチです。

仕組みは非常にシンプルです。フロントエンドのReactコンポーネントをエージェントに渡すと、エージェントがそのコンポーネントのprops（パラメータ）を推論し、ツールコールの引数としてストリーミングします。CopilotKitのuseComponentというコンセプトがこれを実現しています。

コード上では以下の流れになります：

  1. Mastraバックエンド: データ取得ツールを持つエージェント（例：data agent）を定義
  2. フロントエンド: pie chartなどのReactコンポーネントを定義し、Zodスキーマでエージェントが提供できるパラメータを記述
  3. AUI経由: エージェントがデータを取得し、コンポーネントのパラメータをストリーミングでフロントエンドに送信
  4. レンダリング: ZodスキーマのパラメータがReactコンポーネントに注入され、リアルタイムでUIが表示される

メリット：

  • 書くのが非常に簡単
  • ピクセルパーフェクトなUX（自分で定義したコンポーネントなのでデザインシステムと完全に一致）
  • アプリケーションの一般的なパス（常に同じ動作をさせたいもの）に最適

デメリット：

  • バックエンドとフロントエンドの結合度が非常に高い
  • コンポーネントごとにツールを追加する必要があり、コードベースが線形に増大
  • 25個のコンポーネント = 25個のツール → コンテキストウィンドウの汚染

フレーバー2：宣言的Generative UI（A2UI）

2番目のフレーバーは「宣言的（Declarative）」で、コントロールとフレキシビリティの中間に位置します。GoogleのA2UI（Agent to UI）スペックを活用しています。

A2UIは、制約付きのUIを宣言的なスキーマで駆動するセミオープンなアプローチです。エージェントがレイアウトを決定しますが、使えるコンポーネントは事前に定義されたものに限られます。典型的にはカードやウィジェットの中に繰り返し要素を埋め込む形で記述されます。

デモでは、フライト検索エージェントが航空会社のロゴやフライト情報を含むカードUIを生成し、ユーザーがDelta Airlinesのフライトを選択すると、その操作がエージェントに送り返される様子が示されました。

コード上の流れは：

  1. Mastraバックエンド: flights agentがA2UIのサーフェス（コンポーネント）とアップデート（データモデルの更新）を定義
  2. フロントエンド: A2UIカタログとしてコンポーネントを登録。MastraがTypeScriptなので型の共有が可能
  3. 実行時: エージェントがJSONスキーマを生成し、フロントエンドに送信。スキーマがレンダラーによってインタラクティブなコンポーネントにハイドレートされる

メリット：

  • バックエンドとフロントエンドの結合度が低い
  • サブエージェントに委任してスキーマ生成するため、20個のツールが1個に集約される
  • JSONスキーマなのでどのレンダリングフレームワークにも拡張可能
  • ユーザーインタラクションのロングテールに対応しやすい

デメリット：

  • LLMがレイアウトを制御するため、実行ごとにレイアウトが変動する
  • 毎回JSONをオンザフライで生成するため、結果が予測不能になる場合がある

フレーバー3：オープンGenerative UI

3番目のフレーバーは「オープン（Open）」で、最もフレキシビリティが高いアプローチです。CopilotKitが昨日リリースしたばかりの新機能です。

エージェントが生のHTMLを生成し、セキュリティのための二重iframe内でアプリケーションに直接レンダリングします。デモでは電卓コンポーネントが生成され、2 + 2 = 4 が正しく動作していました。ただし、見た目は毎回変わります。

実装は驚くほどシンプルで、Mastraバックエンドにシンプルなエージェントを定義し、フロントエンド側でオープンジェネレーティブUIをオンにするだけです。CopilotKitがAUIを通じてクライアントツールをエージェントに送信し、エージェントがHTMLを書く能力を得ます。

メリット：

  • バックエンドとフロントエンドの結合度が極めて低い（バックエンドは1つのツールのみ）
  • 文字通りどんなUIでも生成可能で、すべてデータにグラウンドされる
  • 定義不要の「使い捨てインターフェース」を即座に作成できる

デメリット：

  • UIが非常に予測不能に変化する
  • スタイリングが難しい（ネオブルータリストを指定しても品質がばらつく）
  • セッションハイジャック防止のため二重iframeが必要

質疑応答で挙げられた実用的ユースケースとしては、Claudeのように「電子の仕組み」を視覚化するなど、見た目を気にしない使い捨ての情報提示が最適とのこと。ユーザーが「このデータをこのフォーマットで見せて」と言ったとき、エージェントがHTMLを即興で生成して見せ、用が済んだら捨てるようなインタラクションです。CopilotKitではUIスキルを挿入してブランドのガイダンスを与えるカスタマイズも可能です。

エージェントステート：Mastraのワーキングメモリとの連携

3つのフレーバーに加え、Tylerはエージェントステートの概念を紹介しました。これはMastraのワーキングメモリ（Working Memory）を活用したパターンです。

ワーキングメモリとは、Mastraエージェントの実行中に操作できる構造化されたデータのことで、CopilotKitとAUIがこれを活用して、UIとバックエンド間でステートを双方向に共有します。

デモでは、ToDoリストのキャンバスアプリケーションが示されました：

  1. 「アプリモードを有効にして」とエージェントに頼むと、スライダーがトグルされ、ToDoが追加される
  2. ユーザーがToDoをクリックして完了状態に変更できる
  3. 「今のToDoは？」と聞くと、エージェントがユーザーの操作を認識して回答する
  4. ユーザーが🔥絵文字を追加してテキストを編集しても、エージェントがそれを認識する

コード上では、Zodオブジェクトを定義してMastraエージェントのワーキングメモリにバインドし、CopilotKitのuseAgentフックを使ってフロントエンドからアクセスします。agent.setStateでユーザー側からの更新が可能で、AUIプロトコルがMastraエージェント実行中のステートイベントをリアルタイムに転送します。

今後の展望：ステアリングとRLHF

Tylerは最後に、CopilotKitが注目する今後のトレンドを紹介しました。

エージェントがより自律的になるほど、実行中のステアリング（mid-run steering） の重要性が増します。Mastraのsuspendとresumeプリミティブは、エージェントが明示的にフィードバックを求められる仕組みとして、これに最適です。

さらに興味深いのは、ヒューマンインザループのインタラクション自体が暗黙のRLHF（人間のフィードバックからの強化学習）シグナルになるという視点です。Cursorがユーザーのインタラクションデータを使ってComposerモデルを構築したように、ユーザーがエージェントをやさしくステアリングする操作をトレーニングデータとして活用できます。サムズアップ/ダウンのようなボタンを押す必要はなく、自然なインタラクションから学習できるのです。

CopilotKitはこの「自己改善するエージェント」を目指しており、今後の重要な方向性として位置づけています。

AGIプロトコルとA2UIの関係

質疑応答で、AGI（AUI）プロトコルとGoogleのA2UIの関係について質問がありました。Tylerの回答によると、両者はまったく競合しないとのことです。

  • A2UI: UIがどのように見えるか・見えるべきかを記述する宣言的スキーマ。エージェントの構造化出力をUIの見た目にマッピングする
  • AGI（AUI）: A2UI、A2A、MCPアプリの通信を含むすべてのデータを転送するストリーミングプロトコル。スーパーセットとして機能する

CopilotKitのAGIパッケージは全体で月間300万ダウンロードがあり、Tylerは「AGIはすでにスタンダード、A2UIは台頭中」と述べ、近々興味深いリリースがあることを示唆しました。

関連リンク

Discussion