CopilotKit 入門 - AI エージェントと Generative UI を React に組み込むフロントエンド基盤

AI チャットボットを「画面の隅に貼り付ける」時代から、エージェントがアプリの中に住み、状態を読み、アクションを実行し、UI そのものを描く時代へ——その「フロントエンド側」を一手に引き受けるのが CopilotKit です。

CopilotKit は React/Next.js を中心とした、AI エージェントと Generative UI（生成 UI）のためのフロントエンド SDK（MIT ライセンスの OSS、GitHub スター約3.5万）。この記事では、何ができるか・最小実装・同社が策定する AG-UI プロトコル・料金と注意点までを、公式ドキュメント（docs.copilotkit.ai）を一次ソースに整理します。

CopilotKit とは

掲げているのは「The Frontend Stack for Agents & Generative UI」。元は React ライブラリでしたが、現在は Web・モバイル・Slack などにまたがるエージェント向けフロントエンド基盤に発展しています。提供する主な要素は次の3つです。

• 本番品質のチャット UI: CopilotChat / CopilotSidebar / CopilotPopup
• アプリとの連携フック: useCopilotAction（エージェントが呼べる関数）/ useCopilotReadable（アプリ状態を読ませる）
• Generative UI と Human-in-the-Loop: エージェントが状況に応じて UI を描き、必要なら人間の確認を待つ

対応スタックは React/Next.js が中心（GA）で、Angular・Vue・React Native にも対応、Slack/Teams/Discord などは beta という位置づけです。

何ができるのか

フロントエンドアクション

useCopilotAction で「エージェントが呼び出せる関数」を宣言します。AI がユーザーの意図を解釈して、このアクションを実行できます。

useCopilotAction({
  name: "sayHello",
  description: "Say hello to someone.",
  parameters: [
    { name: "name", type: "string", description: "name of the person to greet" },
  ],
  handler: async ({ name }) => {
    alert(`Hello, ${name}!`);
  },
});

Generative UI

アクションの render でコンポーネントを返すと、エージェントの応答として UI が描画されます。テキストだけでなく、カードやフォームをその場で出せるのが Generative UI です。

useCopilotAction({
  name: "showFlight",
  render: ({ args }) => (
    <FlightCard flight={args.flight} status={args.status} />
  ),
});

アプリ状態の共有と Human-in-the-Loop

useCopilotReadable でアプリの状態（カートの中身、表示中のレコードなど）をエージェントに読ませられます。さらに renderAndWaitForResponse を使えば、エージェントが処理を止めてユーザーの確認・編集を待つ（Human-in-the-Loop）こともできます。

最小実装（Next.js App Router）

公式クイックスタートは v2 API（/v2 サブパス）を採用しています。インストールはこの3パッケージです。

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

フロントエンドは CopilotKit でツリーをラップし、UI コンポーネントを置くだけです。

import { CopilotKit } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";
 
export default function RootLayout({ children }) {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      {children}
    </CopilotKit>
  );
}

import { CopilotSidebar } from "@copilotkit/react-core/v2";
 
export default function Page() {
  return <CopilotSidebar />;
}

バックエンド側は @copilotkit/runtime の CopilotRuntime と Next.js 用エンドポイントを使い、BuiltInAgent（例: model: "openai:gpt-5.4-mini"）を登録して POST ハンドラを公開します。

AG-UI プロトコル

CopilotKit を語るうえで外せないのが、同社が策定する AG-UI（Agent User Interaction Protocol）です。これはフロントエンドと AI エージェントの間の対話レイヤを定義する、イベントベースのオープンプロトコル。リアルタイム通信・状態同期・ツール利用・ストリーミングを標準化します。

• 位置づけ: コンテキスト供給の MCP、エージェント間協調の A2A が扱わない「エージェント ↔ UI」の隙間を埋める
• 連携: LangGraph・CrewAI・Mastra・Agno・Pydantic AI などに first-party SDK
• 採用の広がり: 主要クラウド各社が対応を表明（AWS は Bedrock AgentCore に AG-UI 用エンドポイントを統合）。各社の「対応」の正確な意味は一次情報での確認が安全です

つまり CopilotKit は、特定のエージェント基盤に縛られず、AG-UI を介して多様なバックエンドのエージェントと繋がれる設計になっています。プロバイダ非依存でモデルを扱う発想は Vercel AI SDK と通じ、ブラウザ側からツールを公開する WebMCP とも問題意識が近い領域です。

料金と注意点

コアは MIT の OSS でセルフホスト可能ですが、プラットフォーム機能（長期保持・分析など）は有料プランに紐づきます。

注意点:

• v1/v2 の併存が学習・移行コスト要因。扱う世代を固定する
• フロントエンドは CopilotKit 固有のコンポーネント/フックに依存する（一方、AG-UI 側はオープンなのでエージェント基盤のロックインは相対的に低い）
• 有料機能との境界を把握する。OSS で動く範囲と、プラン依存の機能を切り分ける
• コード例は世代でインポート元が変わる。公式の最新クイックスタートを正とする

まとめ

• CopilotKit は React/Next.js 中心の、AI エージェント＋Generative UI 向けフロントエンド SDK（MIT・OSS）
• CopilotChat/Sidebar などの UI、useCopilotAction（フロントエンドアクション）/useCopilotReadable（状態共有）、render による Generative UI、Human-in-the-Loop を提供
• 同社策定の AG-UI プロトコルが「エージェント ↔ UI」を標準化し、LangGraph/CrewAI/Mastra などと連携
• 最小実装は CopilotKit でラップ＋UI 配置＋ランタイムのエンドポイント。v1/v2 が併存するので世代を明示する
• コアは OSS でセルフホスト可、プラットフォーム機能は有料

「AI を機能として後付けする」のではなく、「エージェントが住むことを前提に UI を設計する」——その発想を React で実装するための土台が CopilotKit です。

参考リンク

• CopilotKit 公式サイト
• CopilotKit Docs
• CopilotKit/CopilotKit（GitHub）
• AG-UI Protocol
• Vercel AI SDK 実践入門（当ブログ）
• WebMCP - ブラウザがエージェントにツールを渡す（当ブログ）