アプリにAIエージェントを組み込もうとすると、なぜいつもチャットウィンドウのポップアップになってしまうんでしょう。
CopilotKitはこの問題に2,700万ドルをベットしました。答えはプロトコル — そしてそのパズルの最後のピースが今まさに完成しました。
第3のプロトコルが完成した
AIエージェントのインフラには3つの通信課題があります。
1つ目は、エージェントがツールをどう使うかという問題 — AnthropicのMCP(Model Context Protocol)が解決しました。SlackでメールしたりGitHubにPRを出す、あのつなぎ役ですね。
2つ目は、エージェント同士がどう協力するか — GoogleのA2A(Agent-to-Agent)が担当しています。
でも、3つ目の問題が残っていました。エージェントがユーザーとリアルタイムでどう通信するかという問題です。この空白をCopilotKitのAG-UIが埋めました。
AG-UIはオープンソースのMITライセンスプロトコルです。エージェントがUIとどう対話するか — ストリーミングテキスト送信、アプリ状態の共有、動的UIコンポーネントの生成 — これらすべてを標準化します。LangGraph、CrewAI、Microsoft Agent Framework、Google ADK、AWS Strands、Mastra、PydanticAIなど9つ以上の主要エージェントフレームワークがAG-UIをサポートしています。
"エージェントとユーザーの間の標準インターフェース — 人間とAIエージェントの間に、これまで存在しなかったインフラレイヤー。"
— AG-UIシリーズA投資家
チャットボットポップアップと何が違うんですか?
従来の方式はこうでした。アプリを作って、その上にAIチャット画面を「追加する」。エージェントはアプリが今何をしているか知りません。ユーザーがどんなデータを見ているか、どんな作業をしようとしているか — 何も共有されていないんですよ。
| 従来のチャットポップアップ | AG-UI方式 | |
|---|---|---|
| アプリ状態の把握 | 不可 | リアルタイム同期 |
| UI生成 | テキストのみ | 動的UIコンポーネント |
| 人間-ループ連携 | 限定的 | 承認ゲート内蔵 |
| フレームワーク対応 | 特定ベンダー依存 | 9+フレームワーク対応 |
| エンタープライズセキュリティ | 独自実装が必要 | CORS・認証・監査内蔵 |
AG-UIの核心的な違いはエージェントがアプリの中に住むことです。useCopilotReadableフックでアプリの現在の状態をエージェントと共有すると、エージェントは「このユーザーは第3四半期の売上データを見ているんだな」と理解して動けます。テキスト応答の代わりに、開発者が事前に定義したカスタムのパイチャートコンポーネントを直接レンダリングすることもできます。
Deutsche Telekom、Docusign、Cisco、S&P GlobalがAG-UIを使う理由がここにあります。既存のデザインシステムの中でエージェントがUIを生成するので、ブランドの一貫性を保ちながらAIを展開できるんですよ。
今すぐ始める方法
事前準備
Reactベースのアプリがあれば十分です。Node.js環境とnpm/yarn/pnpmのいずれかがあればOKです。
- プロジェクトの初期化
ターミナルでnpx copilotkit@latest createを実行します。既存のNext.js/Reactアプリに追加する場合はnpm install @copilotkit/react-core @copilotkit/react-ui。 - CopilotKit Providerでラップする
アプリのルートを<CopilotKit runtimeUrl="/api/copilotkit">でラップします。これがエージェントとUIの橋渡しになります。 - アプリの状態を共有する
useCopilotReadable({ description: "現在のデータ", value: yourData })でエージェントにコンテキストを渡します。この瞬間からエージェントがアプリの文脈を理解できるようになります。 - エージェントバックエンドを接続する
LangGraph、Mastra、LangChainなど、すでに使っているフレームワークをAG-UIアダプターで接続します。各フレームワークのクイックスタートガイドはdocs.copilotkit.aiにあります。 - チャットUIまたはカスタムUIを追加する
<CopilotPopup />で素早くスタートするか、Generative UIでエージェントがカスタムコンポーネントを直接レンダリングするよう設定してみましょう。
注意
AG-UIはエージェント-UI間の通信標準です。LLMのAPIキーは別途設定が必要です(OpenAI、Anthropicなど)。CopilotKit自体がLLMを提供するわけではありません。
もっと深く知りたい方へ
CopilotKit公式ドキュメント クイックスタートからエンタープライズ展開まで全ガイド docs.copilotkit.ai
AG-UI Protocol GitHub プロトコル仕様、イベントタイプ、対応フレームワークの全アダプター github.com
CopilotKit GitHub (40K+ stars) ソースコード、サンプルアプリ、React/Angular/Vueコンポーネントライブラリ github.com
AG-UIブログ発表記事 プロトコル誕生の背景とMCP・A2Aとの役割分担 copilotkit.ai
TechCrunchシリーズA記事 $27M調達の背景、投資家コメント、市場コンテキスト techcrunch.com
