ジェネラティブエージェンツの大嶋です。
「AIエージェントキャッチアップ #9 - CopilotKit」という勉強会を開催しました。
generative-agents.connpass.com
アーカイブ動画はこちらです。
CopilotKit
今回は、アプリケーションに簡単にAIを組み込むことができる「CopilotKit」について、公式ドキュメントを読んだりチュートリアルを動かしたりしてみました。
公式ドキュメントはこちらです。
今回のポイント
CopilotKitの概要
CopilotKitは、AI Copilotをアプリケーションに組み込むためのOSSフレームワークです。
以下の画像は、CopilotKitのデモアプリを起動した様子です。
この画像では、Googleスライドのようなスライド編集のWebアプリに対して、画面右側のチャット（Copilot）欄が追加されています。
このように、アプリケーションに対してCopilot機能を追加するためのフレームワークがCopilotKitです。
CopilotKitが提供する機能
CopilotKitでは、アプリケーションにCopilot機能をくみこむたのためのReactのComponentとHook、そしてAPIを簡単に実装するための機能が提供されています。
- Copilot機能のためのSidebarやPopup、TextareaのReact Component
<CopilotSidebar /><CopilotPopup /><CopilotTextarea />- etc...
- Copilot機能にデータを接続したりFunction callingを設定したりするためのReact Hook
useCopilotReadableuseCopilotAction- etc...
- Next.jsやNode.jsのhttpでCopilot機能のAPIを提供するためのエンドポイント
copilotRuntimeNodeHttpEndpointcopilotRuntimeNodeHttpEndpoint- etc...
具体的な使い方は、Quiskstartやチュートリアルを参照してください。
Copilot Textarea
勉強会の中では、WebアプリのTextareaにCopilot機能を追加するチュートリアルをやってみました。
https://docs.copilotkit.ai/tutorials/ai-powered-textarea/overview
チュートリアルを終えると、以下のようなメーラーのWebアプリで、返信の入力に対してAI Copilotが続きを生成してくれます。
GitHub CopilotのようにTabキーを入力するとAI Copilotの入力が採用されます。
このような処理は自前で実装することももちろんできますが、CopilotKitと同じようなComponent・Hook・APIを作りたくなることが想定されます。 CopilotKitの機能で十分なケースであれば、自前で実装せずにCopilotKitを使うと便利かもしれないと感じました。
LangGraphとの統合
ドキュメントを読んだのみで実際に動かしてはいませんが、Copilot部分の動作にLangGraphを使うこともできるようです。
TextareaのCopilotとしてLangGraphを使うのは生成速度の面で適さないかもしれませんが、チャットのCopilotであればLangGraphと統合できることは嬉しいことも多いのではないでしょうか。
Human-in-the-Loopなどもサポートしているようで、LangGraphとの統合にはある程度力を入れていそうな印象を持ちました。
次回のご案内
以上、今回は「CopilotKit」をキャッチアップしました。
次回は「AIエージェントキャッチアップ #10 - Cline (旧Claude Dev)」ということで、Visual Studio Codeの拡張機能として使える「Cline (旧Claude Dev)」がテーマです！
generative-agents.connpass.com
ご興味・お時間ある方はぜひご参加ください！
また、その次の回以降のテーマも募集しているので、気になるエージェントのOSSなどあれば教えてください！
