CopilotKitでアプリ内AIアシスタントを開発

CopilotKitとは？用途をやさしく解説

CopilotKitは、Tawkit, Inc.が提供するオープンソースの開発フレームワークです。自社アプリにAIアシスタントを組み込み、ユーザーが作業している画面とエージェントをつなぎます。返答を文章で表示するだけでなく、グラフやカードを示したり、開発者が登録した機能を呼び出したりできます。

たとえばタスク管理アプリなら、「この項目を追加して」という依頼を受けて一覧を更新する仕組みを作れます。ただし、データと許可する操作は開発チームが用意します。Webサイトを開くだけで任意のソフトを操作するサービスではありません。

既存のエージェントに操作画面をつなぐ

SaaSや社内ツール、モバイルアプリにエージェントの操作画面を付けたい場合に向いています。公式SDKはReact、Angular、Vue、React Nativeに対応し、バックエンドにはLangGraph、Google ADK、Mastra、PydanticAIなどの接続方法があります。Pythonバックエンドだけに限定されません。

AG-UIはエージェントと画面の通信を担い、CopilotKitはコンポーネントや対話の仕組みを提供します。Frontend Toolsでは、登録したブラウザー側の関数を実行し、フィルター変更や画面遷移などを扱えます。業務データへのアクセス権はアプリ側で管理します。SlackとMicrosoft Teams向けにはChannelsの経路もあります。

Reactアプリで最初の会話を動かす

公式クイックスタートのReact経路では、まず小さな機能を動かして確認します。

1. Reactプロジェクト、Node.js 20以上、モデル提供元のAPIキーを準備します。
2. @copilotkit/react-coreと@copilotkit/runtimeを導入し、サーバー側の認証情報とruntimeエンドポイントを設定します。
3. Providerに接続先を指定し、スタイルとチャットまたはサイドバーを追加します。
4. 通常の会話を試した後、結果が分かるフロントエンド関数を一つ登録します。
5. 画面の実際の変化を確認し、ローカルのInspectorでAG-UIイベントを調べます。

既存エージェントがある場合は、そのフレームワークの接続手順を使います。BuiltInAgentは直接モデルを呼ぶため、既存ロジックに自動接続するものではありません。SPAには独立したruntimeサーバーも必要です。

生成UI・共有状態・人による確認

生成UIでは、用意したカード、表、グラフにエージェントの結果を表示できます。ReactのuseComponentは表示用コンポーネントと型付きパラメーターを登録し、エージェントがデータを渡す仕組みです。この表示処理だけでバックエンドの取引が実行されるわけではありません。

共有状態は画面とエージェントの情報を同期します。Human-in-the-loopは実行を一時停止し、ユーザーの選択や確認を受け取ります。必須の承認は処理フローで強制する必要があり、モデルが自発的に質問することとは区別します。

セルフホストとデータの扱い

公式コードはMITライセンスで、必要な表示を保持するなどの条件に従って商用利用できます。ホスト型サービスには別の条件があります。DeveloperとProのruntimeのみのセルフホストと、プラットフォーム全体の展開は区別が必要です。

自社サーバーでも外部モデルへ送信するデータは残り得ます。プライバシーポリシーはWebサイトの処理と顧客契約に基づく処理を分けています。オープンソースのテレメトリーはメタデータが対象で、プロンプト、メッセージ、状態、ツール内容は収集せず、無効化も可能と説明されています。これは接続先全体への保証ではありません。

無料枠と有料プランの確認ポイント

2026年10月18日に確認した公開米ドル価格では、Developerは開発者1人向けに無料で、最大200スレッド、保存期間3日、マルチモーダル保存領域1GBです。Proは月39米ドル、Teamは1席あたり月100米ドルで最大5席。未承諾の招待も席を使用します。Enterpriseは個別条件です。日本円価格や税込総額を示すものではありません。

Intelligenceは会話の永続化やユーザーメモリーなどを追加します。現在の価格表ではAnalyticsとSelf-LearningはEnterpriseの早期アクセス扱いです。モデル利用料やアプリの運用費も別に確認し、最新プランで判断してください。

よくある質問

Pythonのバックエンドは必須ですか？

必須ではありません。内蔵エージェントからモデルを呼ぶ経路もあり、既存のPythonエージェントは対応する統合手順で接続します。

生成UIでは何を表示できますか？

登録したグラフ、表、カードなどを表示できます。入力や承認が必要な場合は、表示用コンポーネントに加えて対応する対話機構を使います。

CopilotKitはセルフホストできますか？

可能です。ただしruntimeとIntelligence全体では条件が異なり、外部モデルへの通信も別途確認する必要があります。

公式ドキュメントとコミュニティ

• 公式ドキュメント：技術構成に合う導入経路。
• GitHubリポジトリ：ソース、ライセンス、不具合情報。
• 公式Discord：実装に関する相談。