AG-UIとは？AIエージェントとフロントエンドをつなぐプロトコルの仕組みと実装

AG-UI（Agent–User Interaction Protocol）とは、AIエージェントとユーザー向けアプリのフロントエンドの間で交わすやり取りを標準化する、オープンでイベントベースのプロトコルです。名前の見た目から「エージェントがUIを自動生成する技術」と誤解されがちですが、そうではありません。エージェントが送るメッセージ・ツール呼び出し・状態更新・実行状況を、決められた種類のイベントとしてフロントへ流し込むための共通規格であり、CopilotKitが中心となって策定しています。ツール接続を担うMCP、エージェント間連携を担うA2Aと並ぶ「接続の一角」を、AG-UIはエージェントとユーザーの間で担います。本記事では、正しい定義・標準イベント・MCP／A2Aとの違い・実装コード・対応フレームワークを、公式仕様に沿って整理します。

まとめ：AG-UIの要点

• AG-UIは「Agent–User Interaction Protocol」の略。UIを自動生成する技術ではなく、エージェントとフロントを結ぶイベント通信の規格。
• やり取りは17種類の標準イベント（ライフサイクル／テキスト／ツール呼び出し／状態／特殊）に分かれ、SSEなどでストリーム配信される。
• MCPは「エージェント↔ツール」、A2Aは「エージェント↔エージェント」、AG-UIは「エージェント↔ユーザー」。担当レイヤーが違い、排他ではなく併用できる。
• 実装はCopilotKitが中心。TypeScriptは @ag-ui/client、Pythonは ag-ui-protocol パッケージを使う。LangGraph・CrewAI・Mastra・Google ADKなどが対応する。
• 状態やツール実行の進行をUIへリアルタイム反映したい場面で効く。単純な一問一答チャットや「UIそのものをAIに生成させたい」用途には向かない。

AG-UIとは何か（Agent–User Interaction Protocolの定義）

AG-UIは、AIエージェントのバックエンドと、それを表示するフロントエンド（Reactアプリなど）の間の通信を標準化する、軽量なイベントベースのプロトコルです。エージェントが生成するテキスト、実行するツール呼び出し、共有する状態、実行のライフサイクルといった情報を、型付けされたJSONイベントの連続としてフロントへ送ります。フロント側はそのイベントを受け取って画面へ反映するだけでよく、エージェントの実装がLangGraphでもCrewAIでも、フロントの受け口は共通化されます。

AG-UIが生まれた背景と解決する課題

エージェントアプリでは、バックエンドの出力をどうフロントへ渡すかがプロジェクトごとにバラバラでした。テキストのストリーミング、ツール呼び出しの途中経過、共有状態の差分更新を、独自のWebSocketメッセージやアドホックなJSONで実装するたびに作り直す状態です。AG-UIはこの「エージェントとUIをつなぐ最後の1マイル」を型付きイベントの共通規格として定義し、バックエンドとフロントの結合を疎にします。仕様はCopilotKitが主導し、ソースは ag-ui-protocol/ag-ui リポジトリで公開されています。

「UIを自動生成するプロトコル」ではない（A2UIとの区別）

ここが最も誤解されやすい点です。AG-UIの「UI」は User Interaction（ユーザーとのやり取り）を指し、LLMが画面レイアウトやコンポーネントを動的に生成する仕組みではありません。UI要素そのものを生成AIに組み立てさせる用途は「生成UI（generative UI）」の領域で、公式ドキュメントでも A2UI という別の仕様として区別されています。AG-UIが標準化するのは「何を描くか」ではなく「エージェントの出来事をどうフロントへ伝えるか」です。日本語の解説記事ではこの2つを混同したものが多いため、実装を検討する際は「イベント通信の規格」として捉えるのが正確です。

AG-UIとMCP・A2Aの違い（プロトコルの住み分け）

AG-UIはMCPやA2Aとしばしば並べて語られますが、担当する接続レイヤーが異なります。3つは競合せず、1つのエージェントで併用できます。

たとえばMCPで社内データベースに接続したエージェントが、A2Aで別の専門エージェントへ処理を委ね、その進行状況をAG-UIでユーザー画面へ流す、という構成が成り立ちます。各プロトコルの詳細はMCPとは何か？その基本概念と役割とAgent2Agent（A2A）とは何かで解説しています。AG-UIはこの中で「人が見る画面」への出口を担当するプロトコルだと押さえておけば、役割を取り違えません。

AG-UIの標準イベントと通信の仕組み

AG-UIの通信は、すべて型付きイベントの連なりで表現されます。各イベントは共通の BaseEvent を継承し、type に加えて runId や threadId など種類ごとのプロパティを持ちます。

17種の標準イベント（5カテゴリ）

標準イベントは次の5カテゴリ・17種にまとまります（別途、非ストリーミング用の TextMessageChunk 変種があります）。

旧来この記事に載っていた「action／observation／command」という標準イベントは仕様に存在しません。実際のイベント名は上表のとおりで、たとえば応答は TEXT_MESSAGE_START → TEXT_MESSAGE_CONTENT（差分を連続送信）→ TEXT_MESSAGE_END の順に流れ、フロントはこれを受けて文字を1つずつ表示します。

トランスポートとストリーミング（SSE中心）

AG-UIはWeb標準のHTTPやWebSocketの上に載る抽象層で、実運用ではServer-Sent Events（SSE）でイベントをストリーム配信する構成が中心です。バックエンドがエージェントの出来事を発生順にイベント化して送り、フロントは接続を張ったまま受信して画面を更新します。STATE_DELTA のような差分イベントを使えば、状態全体を毎回送らずに変化分だけを反映でき、長時間動くエージェントでも通信量を抑えられます。

AG-UIの実装方法（CopilotKit・@ag-ui/client・Python）

実装は「フロント側でイベントを受けて表示する」部分と「バックエンド側でエージェントの出来事をイベントとして発行する」部分に分かれます。フロントはCopilotKitのReactコンポーネントを併用すると、チャットUIや状態表示を短く組めます。

TypeScript／フロント側（@ag-ui/client）

TypeScriptでは @ag-ui/client の HttpAgent でAG-UI対応エンドポイントへ接続します。型定義とスキーマは @ag-ui/core が提供します。

npm install @ag-ui/client @ag-ui/core

import { HttpAgent } from "@ag-ui/client";

const agent = new HttpAgent({
  url: "https://api.example.com/agent",
});

// 会話履歴を積んでからエージェントを実行する
agent.messages = [
  { id: "1", role: "user", content: "今日のタスクを整理して" },
];

// イベントを購読して画面へ反映し、実行する
agent.subscribe({
  onTextMessageContentEvent: ({ event }) => appendToUI(event.delta),
});
await agent.runAgent();

Python／バックエンド側（ag-ui-protocol）

Pythonでは ag-ui-protocol パッケージを使い、Pydanticモデルで型付けされたイベントを組み立て、EventEncoder でSSE形式へエンコードして返します。

pip install ag-ui-protocol

from ag_ui.core import TextMessageContentEvent, EventType
from ag_ui.encoder import EventEncoder

event = TextMessageContentEvent(
    type=EventType.TEXT_MESSAGE_CONTENT,
    message_id="msg_123",
    delta="こんにちは",
)

encoder = EventEncoder()
sse_data = encoder.encode(event)  # SSEで送出できる文字列になる

LangGraphやCrewAIなど対応フレームワークを使う場合は、各フレームワークのAG-UIアダプタがこのイベント発行を肩代わりするため、上記のような手書きは主にカスタムバックエンドで必要になります。

AG-UI対応フレームワークと連携（LangGraph・Mastra・CrewAIほか）

AG-UIはフレームワーク非依存の規格ですが、主要なエージェントフレームワークが公式に対応しており、アダプタ経由でイベント発行を任せられます。

たとえばLangChainとLangGraphの違いで扱う状態遷移型のエージェントは、AG-UIを通じて各ノードの進行やツール実行をそのままUIへ映せます。TypeScript製のMastraも対応フレームワークの1つで、フロントにCopilotKit、バックエンドにこれらを置く構成が典型です。対応状況は更新が速いため、採用前に公式ドキュメントで最新の一覧を確認してください。

AG-UIを使うべき場面と避けるべき場面

AG-UIは「エージェントの中で何が起きているか」を画面へ丁寧に見せる用途で価値が出ます。逆に、それが不要な構成では導入コストが上回ります。判断軸をはっきり分けておきます。

向いている場面。ツール実行の途中経過や共有状態の変化をリアルタイムでUIに反映したいエージェントアプリ。複数のエージェントフレームワークを1つのフロント実装で受けたいケース。CopilotKit系のReact UIで対話アシスタントを組む場合。これらは標準イベントの恩恵がそのまま効きます。

避けるべき／不要な場面。状態同期もツール可視化も要らない単純な一問一答チャットは、素のSSEで十分でありAG-UIは過剰です。「UIのレイアウトそのものをAIに生成させたい」という要件は生成UI（A2UI等）の領域で、AG-UIの守備範囲ではありません。また、対応アダプタの無い独自バックエンドにゼロから組み込む場合は、イベント発行を自前実装するコストが見合うかを先に見極めるべきです。名前の連想で「動的UI生成の魔法」を期待して採用すると、実態とのギャップで失敗します。

よくある質問

AG-UIは何の略ですか？

Agent–User Interaction Protocol（エージェント–ユーザー間インタラクション・プロトコル）の略です。「Agent-Generated User Interface（UIを自動生成する仕組み）」ではありません。

AG-UIとMCPの違いは何ですか？

MCPはエージェントと外部ツール・データソースをつなぐ規格、AG-UIはエージェントとユーザー向けフロントエンドをつなぐ規格です。担当レイヤーが異なり、1つのエージェントで併用できます。

AG-UIはReact以外（Vueなど）でも使えますか？

プロトコル自体はフロントエンド非依存です。ただし公式に整備されたUIコンポーネント（CopilotKit）はReact中心で、VueなどはAG-UIのクライアントSDKを使って自前実装するか、コミュニティ実装を利用する形になります。最新の対応状況は公式で確認してください。

AG-UIの標準イベントはいくつありますか？

ライフサイクル・テキストメッセージ・ツール呼び出し・状態管理・特殊の5カテゴリで計17種です（加えて非ストリーミング用の TextMessageChunk 変種があります）。

AG-UIは無料で使えますか？

AG-UIはオープンな仕様で、TypeScript（@ag-ui/client など）やPython（ag-ui-protocol）のSDKもオープンソースとして公開されています。

関連記事

• MCP（Model Context Protocol）とは？AIと外部ツールをつなぐ標準規格の仕組みをわかりやすく解説
• Agent2Agent（A2A）とは何か？次世代エージェント間通信の定義と概要
• LangChainとLangGraphの違い｜v1.0で逆転した関係と使い分け
• Mastraとは？TypeScript製AIエージェントフレームワークの使い方とSkills