Copilot KitとAGUIプロトコルが拓くGenerative UIの未来

皆さん、こんにちは。Tylerです。私はCopilot Kitチームの創設メンバーの一員として、約1年半在籍しています。私がこのチームに加わったのは、エージェントによる体験、特に私たちが構築するエージェントを利用するユーザーのUXをどのように最適化できるかに深く感銘を受けたからです。本日は、Generative UIについて深く掘り下げていきたいと思います。Copilot Kitの概要、現在のAgentic UIの状況、そして私たちが開発したエージェント非依存型プロトコルであるAGUIについてお話しし、その後、いくつかの魅力的なGenerative UIのデモをご紹介します。そして、Copilot Kitが描く未来の展望についても少し触れる予定です。ちなみに、この講演スライド自体もCopilot Kitを使って作成されており、実際にスライドの中にCopilot Kitが埋め込まれています。## Copilot Kitとは？Agenticアプリケーション開発を加速するフレームワークCopilot Kitは、AIコパイロットを構築するためのフレームワークであり、私たちはこれを「ユーザー向けのAgenticアプリケーション」と定義しています。私たちはオープンソースプロジェクトであり、Copilot KitはGitHubで30,000以上のスターを獲得しています。また、そのプロトコルであるAGUIも12,000スターを超え、日々成長を続けています。私たちは月間1500万件のエージェントインタラクションを支援しており、これはユーザーがエージェントに話しかけたり、UIを生成したりする行為を指します。Fortune 100企業やユニコーン企業、スタートアップなど、幅広い企業で利用されており、実際、Fortune 500企業の10%で使われています。私たちは、後ほど詳しく説明するAGUIプロトコルの開発元です。## Agentic UIの現状と複雑な課題Generative UIについて掘り下げる前に、Agentic UIの現状についてお話ししたいと思います。これは、私たちがこれから議論する興味深いパターンを理解するための素晴らしい背景となるでしょう。Copilot KitはChatGPT 3.5の登場以前から存在しており、エージェント体験の分野における多くの興味深い進展を見てきました。エージェントという概念が存在する前から活動しており、エージェントをより速く、応答性が高く、制御可能に見せるための様々なパラダイムが時間とともに進化してきました。しかし、Agenticアプリケーションを構築する際に人々が試みる2つの核となる目標は変わっていません。### Agenticアプリケーション構築の2つの主要な目的1. SaaS体験の最適化とナビゲーション簡素化:SaaSコパイロットを利用して、ユーザーが製品をより簡単に操作できるようにします。例えば、プロジェクト管理ツールのLinearにはコパイロットが搭載されており、複数のチケットを作成したり、プロジェクトのステータスについて質問したりすることができます。2. 生産性向上コパイロット:開発者が日常業務を行う環境に組み込まれるコパイロットです。例えば、Cloud CodeやCodeexといったツールは、コードの作成や管理など、コアな作業を支援します。実際、本日のスライドはすべて、HTMLで構成されたVueアプリケーションにCopilot Kitを埋め込む形で作成されました。### Agenticアプリケーション特有の複雑性しかし、Agenticアプリケーションが直面する共通の課題があります。それは、これらのアプリケーションが非常に複雑であるという点です。特に、従来の「リクエストとレスポンス」というパラダイムを打ち破る性質が、その複雑性の一因です。* 長時間の実行 (Long-running):エージェントのタスクは完了までに時間がかかることがあります。これを最適化するためにいくつかのメカニズムが使われます。例えば、モデルがストリーミングで応答することで、タスクが実際よりも速く感じられます。タスクに5分かかっても、進行中の入力をすべて受け取っていれば、ユーザーは途中で介入（ステアリング）して誤った方向に向かっていることを伝えたり、単に応答が見えることで速く感じられたりします。* 構造化データと非構造化データの混在:エージェントの出力は、構造化されたJSON形式であることもあれば、Markdownや単なるテキスト形式であることもあります。そして本日ご紹介するように、UIとして出力されることもあり、これは非常に興味深い点です。* 制御のハンドオフと並列処理:エージェントはサブエージェントに処理を委譲することができ、これらのサブエージェントは並列で実行されます。そのステータスを報告する必要があり、ユーザーにそのステータスを表示する際にはさらに複雑さが増します。* 非決定的なUIの提供:本日議論の焦点となるのは、エージェントが非決定的なUIを提供できる点です。これは、従来のUI開発とは大きく異なるアプローチです。## AGUIプロトコルがAgentic UIの課題を解決するでは、ビジネスロジックに集中しながら、いかにアプリケーションを大規模に、かつ容易に展開できるのでしょうか？そのために開発されたのがAGUI (Agent User Interaction) プロトコルです。これは、AgenticなバックエンドとAgenticなフロントエンドを接続するためのプロトコルです。### AGUIの役割私たちはAGUIを、ユーザーからエージェントへの入力の全スペクトラムを完成させるプロトコルであると捉えています。MCP (Multi-Agent Communication Protocol) は、ツール、コンテキスト、ファイルのようなリソースをエージェントに提供するために使われます。そしてAGUIは、UIも返すことができるようになりました。これにより、これらのMCPサーバーは、ChatGPTやClaudeのようなスーパーホストにアプリケーションを埋め込むことができます。A2A (Agent to Agent) は、2つのエージェントが通信するためのプロトコルで、エージェントのメッシュ（網目状の連携）を構築し、サブエージェントへの委譲を可能にします。AGUIは、A2Aと全く同じことをユーザー向けに行うことを目指しています。つまり、ユーザーがどこにいても、彼らがいる場所でエージェントと出会うことを可能にします。現在、Copilot KitはReactクライアントとして機能していますが、Angularクライアントも提供しており、Rust、Go、その他あらゆるプログラミング言語でイベントを送信する能力を持っています。また、Slack連携なども現在構築中です。### AGUIのクライアントサーバーアーキテクチャAGUIは、クライアントサーバーアーキテクチャを採用しています。クライアントはユーザーがいるアプリケーションであり、サーバーはエージェントです。例えば、バックエンドに強力なエージェント（「Monster agent」と呼んでいます）がいる場合、そのエージェントは私たちにイベントを発行し、それらのイベントはAGUIイベントとして送信されます。これはストリーミングベースのプロトコルです。#### AGUIイベントストリームの例以下は、AGUIイベントストリームの一例です。```json{