>_tech-draft
Mastra AIのアイコン
Mastra AI
動画公開日
タイトル

Agentic UX: Three Ways to Let an Agent Build Its Own UI - Tyler Slaton, CopilotKit

再生時間

27分 38秒

AI時代のUI変革:Agentic UXとCopilot KitのAGUIプロトコルがもたらす未来

ポイント

  • AIがUIを根本的に変革し、すべてのUIがAIになるAgentic UXの未来が到来するとCopilot Kitは提唱します。
  • Agentic UXの構築は、長時間実行や非決定的なUIなど、従来の開発パラダイムと異なる固有の課題を伴います。
  • これらの課題を解決するため、エージェントとあらゆるUIを繋ぐオープンソースの標準プロトコル「AGUI」の仕組みと重要性を解説します。

AI時代のUI変革:Agentic UXとCopilot KitのAGUIプロトコルがもたらす未来Copilot KitのTyler Sllaytonです。本日は「Agentic UX」と、それがなぜ重要なのか、そして私たちが開発・維持している「AGUIプロトコル」がAI駆動のユーザーエクスペリエンスをどのように再定義するかについてお話しします。## Copilot Kitのビジョン:すべてのUIはAIになるCopilot Kitでは、「すべてのUIはAIになる」という明確な信念を持っています。現在のアプリケーション、例えばFigma、Linear、Stripeといった中核的なアプリケーションは、ますますエージェント化しています。私たちはこの傾向が今後も継続し、AIの導入がユーザーインターフェースを通じて進むと確信しています。私たちは素晴らしいAIエージェントを多数構築していますが、それらを実際にユーザーに提供する手段はユーザーインターフェースに他なりません。現状では、エージェントにメッセージを送ると、大量のテキストが返ってくることがほとんどです。これは、私たちが1980年代に経験したコマンドラインインターフェースの時代と似た状況にあると言えるでしょう。私たちは今、AIの世界において「Macの時代」、すなわちユーザーインターフェースの時代に突入していると考えており、Copilot Kitはこの変革を推進する企業です。### Copilot Kitとは?Copilot Kitは、AIエージェントのためのフロントエンドスタックです。フロントエンドスタックとは、ユーザーインターフェースを構築するあらゆる場所を指します。例えば、Slack内、ReactやAngularのウェブアプリケーション、KotlinやDartを使用したモバイルアプリなど、多岐にわたります。私たちは、以下の主要な機能を提供しています。* ジェネレーティブUIの構築: エージェントが動的にUIを生成する機能を提供します。* 人間によるエージェントの制御: ユーザーがエージェントとの協調的な対話を通じて制御できる機能を提供します。* あらゆるサーフェスでの利用: Slackのようなコアワークスペースだけでなく、既存のアプリケーションに埋め込むためのReactなど、様々なプラットフォームで利用可能です。私たちは「AGUI(Agent User Interaction)プロトコル」を開発しました。これについては後ほど詳しく説明しますが、私たちが構築するすべてのものはオープンソースとして提供されています。現在、GitHubスターは35,000を超え、AGUI単独でも14,000のスターを獲得しています。また、当社のパッケージは週に300万回以上インストールされており、週に3,000万回ものエージェントインタラクションを処理しています。これは、ユーザーがエージェントにメッセージを送る「ターン」を指し、私たちはその膨大な数を支えています。さらに、Fortune 500企業の50%で利用されています。## Agentic UX開発の難しさ現在、私たちが目にするUIの多くがテキストベースであるのには理由があります。それは、Agentic UXの構築が非常に困難だからです。Agentic UXは、インターネットが始まって以来30年間私たちが慣れ親しんできた「リクエストとレスポンス」という従来のパラダイムを打ち破ります。私たちはリクエストを送信し、適時なレスポンスを受け取ることに慣れていますが、エージェントはこのサイクルを大きく変えます。### Agentic UXがもたらす主な課題エージェントの動作特性が、Agentic UXの構築を複雑にしています。* 長時間実行されるプロセス: エージェントはタスクを完了するまでに長い時間を要することがあります。例えば、15分以上実行されるエージェントをサーバーレス環境で構築した経験がある方なら、その課題をご理解いただけるでしょう。システム全体をこの長時間実行に対応するように再設計する必要があります。* 構造化・非構造化された入出力: エージェントは、構造化されたデータと非構造化されたデータの両方を入力として受け取り、出力として生成します。これにより柔軟性が高まりますが、同時にその維持と対話の管理が困難になります。* コンポジション(構成): 複雑なタスクを分解し、複数のサブエージェントに割り当てて完了させることがあります。この際、それらのエージェントのUIを効率的に表示する手段が必要となります。* 非決定的なUI: エージェントは、必ずしも予測可能なUIを生成するとは限りません。このような非決定的なUIをいかに制御し、ユーザーにとって快適な体験を提供するかが課題となります。これらの問題を解決するために、私たちはAGUIを開発しました。## AGUIプロトコルとは?AGUI(Agent User Interaction)は、AgenticなフロントエンドとAgenticなバックエンドを接続するためのプロトコルです。特に、本記事ではMRAやTypeScript、Reactを用いたエンドツーエンドの開発について強調します。### プロトコルエコシステムにおけるAGUIの位置づけプロトコルには様々な種類があり、それぞれ異なる目的を持っています。* MCP: ツールやコンテキスト、最近ではiframeを返す機能も追加され、エージェントが動作する環境にアプリケーション全体を埋め込むことが可能になっています。* A2A: エージェント間通信を目的としたプロトコルです。大規模なエンタープライズ環境で標準的なマイクロサービスアーキテクチャを持つ場合、サービス間のメッシュ構造をエージェントレベルで促進することを目指しています。AGUIは、これらのプロトコルとは異なる役割を担っています。AGUIの目的は、マイクロサービスメッシュ内のエージェントであれ、いかなるエージェントであれ、そのエージェントをあらゆるサーフェス(Slack、React、WhatsAppなど)で利用できるようにすることです。Copilot Kitはフロントエンドとして機能し、AGUIはそのフロントエンドとバックエンドを接続する役割を果たします。AGUIのリリースは、エコシステム全体に大きな変化をもたらしました。Google、Amazon、Microsoft、Oracleといったハイパースケーラー企業と協力し、彼らのプラットフォームでAGUIを大規模に展開しています。また、MRAを含む多くのAI業界のリーダー企業にも採用されており、多くのコンサルティング会社と連携して、様々な企業がAGUIを本番環境に導入する支援を行っています。## AGUIの仕組みAGUIは、18の標準イベントからなるセットです(最近、暗号化された推論のための2つのイベントが追加されました)。これらはエージェントの抽象化を目的としています。約2年前に登場したモデルルーターは、異なるモデルAPIを1つの統一されたストリームに集約し、モデルを変更してもビジネスロジックを変える必要がないようにしました。しかし、エージェントに関しては、同様の課題が残っていました。異なるフレームワークでエージェントを構築すると、それぞれ異なるストリームが発生し、モデルルーターが解決したのと同じ問題に直面していました。AGUIはこの問題を解決し、これらのストリームを1つの出力に統合することを目的としています。AGUIは基本的にJSONデータとして定義されており、イベントベースの非常にシンプルな構造をしています。そのため、異なるフレームワークへの移植が非常に容易であり、採用のハードルが低いのが特徴です。イベントは単純なJSONオブジェクトとして送信するだけで、AGUIを導入できます。### AGUIの主要なイベント例AGUIプロトコルには、エージェントの動作を表現し、ユーザーインターフェースに反映させるための様々なイベントが含まれています。* テキストメッセージ (text message): コンテンツのストリーミングを開始します。AGUIはデルタベースのプロトコルであるため、変更点のみを送信することで効率的なストリーミングを実現します。* ツールコール (tool call): エージェントがツールを実行し始める際に発生します。* ステートスナップショット (state snapshots): これはエージェントの「記憶」をユーザーに可視化する方法です。会話の一部として直接表示されるわけではありませんが、舞台裏でエージェントが保持している情報や状態をユーザーに提示するのに役立ちます。これにより、ユーザーはエージェントの内部状況をより深く理解し、対話をより効果的に進めることができます。## まとめCopilot Kitが提唱する「すべてのUIはAIになる」というビジョンは、Agentic UXによって実現されます。しかし、このAgentic UXの開発は、長時間実行されるプロセス、多様な入出力、コンポジション、非決定的なUIといった多くの課題を伴います。AGUIプロトコルは、これらの課題を解決するために設計された、エージェントとユーザーインターフェースをつなぐ重要な架け橋です。シンプルでイベントベースのJSON形式、そしてあらゆるサーフェスへの展開能力により、AGUIはAI駆動のユーザーエクスペリエンスの未来を形作るための基盤を提供します。Agentic UXの可能性を最大限に引き出し、より直感的で協力的なAIとの対話を実現するために、AGUIの進化にこれからもご期待ください。### 参考動画https://www.youtube.com/watch?v=mGyyTVk8Ggw