CopilotKit + AG-UIを学ぶ

2026/02/13開催 第140回NearMe技術勉強会 資料

単なるテキストチャットを超えた、リッチでインタラクティブなAIアプリケーション（Agent-Native App）を構築するためのSDK「CopilotKit」と、そのUIプロトコルである「AG-UI」の活用事例について解説しました。

【主なトピック】

エージェントがUIを動的に生成・操作する仕組み

バックエンドとフロントエンドの双方向状態同期 (CoAgent)

Human-in-the-Loop (人間介在型) の実装パターン

Next.js + Pythonバックエンドでの実装フロー

従来のチャットボットUIの限界を超え、AIエージェントとユーザーがシームレスに協調するアプリケーションを作りたい開発者向けの資料です。

■ サンプルコード (GitHub)
https://github.com/kenji4569/learn-copilotkit-agui

#CopilotKit #AGUI #AI #LLM #Nextjs #React #NearMe

Transcript

1. 0 CopilotKit + AG-UIを学ぶ 2026-02-13 第140回NearMe技術勉強会 Kenji Hosoda
2. 1 CopilotKitについて • エージェント‧ネイティブなチャットアプリ を作るためのWebのSDK • リッチなUIを通してユーザーとエージェント のやり取りができるようになる • エージェントがUIを動的に⽣成‧更新できる ようになる https://www.copilotkit.ai/
3. 2 AG-UIについて • エージェントとユーザー向けアプリの接続を標準 化するオープンなイベント駆動プロトコル • 約16種の標準イベントで、実⾏中の状態やUI意図 をストリーミング伝達する • ストリーミングチャット、双⽅向の状態同期、⽣ 成UI、HITLなどをプロトコルとして⽀える • SSE/WebSocketなど任意の転送⽅式に乗せられる ため、実装の⾃由度が⾼い • MCP（ツール連携）やA2A（エージェント間）と 補完関係にあり、「UIとの橋渡し」に特化 https://www.copilotkit.ai/ag-ui-and-a2ui
4. 3 モチベーション • 昨年、スピード優先でStreamlitで作成した AIエージェンによる⾒積もりチャットアプリ を、最新の技術で作り替えてUIをリッチにし つつ拡張性を⾼くしたい • 構造的な情報の表⽰や、カレンダーによる⼊ ⼒、サジェストなど、チャット内のUIを独⾃ にカスタマイズしていたので、標準的な仕様 を探していた https://agent.nearme.jp/
5. 4 クイックスタート • まずは本家のQuickstart試してみてください ◦ https://docs.copilotkit.ai/direct-to-llm/g uides/quickstart?copilot-hosting=self-ho sted ▪ まずはプレーンな、Starting from scratch、Self-hosting がオススメ ▪ 以下のコードを追加して挙動を確認 LLMとの接続 (環境変数にキーを設定 ) Copilotkitを利用する ためのプロバイダー チャットを表示す るためのUI app/page.tsx app/layout.tsx app/api/copilotkit/route.tsx
6. 5 詳細なフローを確認するためにサンプルコードを⽤意 • リポジトリ ◦ https://github.com/kenji4569/learn-copilotkit-agui バックエンド・フロントエンド それぞれREADMEに従って セットアップしてください
7. 6 メッセージの送信 バックエンド フロントエンド Server Side Events (SSE) の伝送方式で AG-UI形式のメッセージイベントを送信 … ユーザーの入力は、これまでの メッセージや付属情報と共に送られる /backend/src/features/agent/router.py
8. 7 ツールコールの結果の描画 ：useRenderToolCall バックエンド フロントエンド … … ツールコールの結果を送信 ツールコールの結果を受け取り、 リッチなUIで表現
9. 8 エージェントからフロントエンドを ツールとして利⽤：useFrontendTool バックエンド フロントエンド （フロントエンドに対して） ツールコールを行う 結果をバックエンドに返す ツールコールを受け取り アクションを実行 … … {'id': '...', 'content': '{"greetedAt":"2026-02-13 T01:36:12.419Z"}', 'role': 'tool', 'toolCallId': '...'}]}
10. 9 フロントエンド＋⼈間の介在を ツールとして利⽤ ：useHumanInTheLoop … … バックエンド フロントエンド （フロントエンドに対して） ツールコールを行う ツールコールを受け取り アクションを実行 非同期で(人間の介在を待って ) 選択結果をバックエンドに返す {'id': '...', 'content': '{"selectedDate":"2026-02-17"}', 'role': 'tool', 'toolCallId': '...'}]}
11. 10 エージェントの状態を描画 ：useCoAgentStateRender バックエンド フロントエンド 状態のスナップショットを送信 状態の差分を送信 状態の変化をリアルタイムで描画 … …
12. 11 エージェントとフロントエンドで 状態を共有：useCoAgent フロントエンド バックエンド 状態を表示・操作できる （他のコンポーネントで利用できる） 共有された状態 共有された状態 を利用して計算 … … 状態の送信 （前ページと同じ） … payloadのstate に情報が入る 共有された状態の操作
13. 12 フロントエンドの情報をエージェント に送信：useCopilotReadable バックエンド フロントエンド … … … … payloadのcontext に情報が入る　 ユーザー情報を送信 ユーザー情報を取り出す
14. 13 所感 • CopilotKit(+AG-UI)は、エージェントとやり取り するチャットを実装する上で、欲しかった多く を網羅している • 通常は⼈間がエージェントを操作するが、 Human-in-the-Loopでは、エージェントが⼈間 の介在も含めてフロントエンドをツールとして 操作する、という逆転の発想が⾯⽩い • デフォルトでは全メッセージ履歴が毎回送信さ れる仕様のため、トークンの節約という観点で は、チューニングが必要になるかもしれない
15. 14 Thank you