CopilotKit 入門 : フルスタック・エージェント型アプリケーション構築用 SDK

Posted on by Masashi Okumura

CopilotKit は、フルスタックのエージェント型アプリケーション、生成 UI、チャットアプリケーションを構築するためのクラス最高の SDK です。

CopilotKit : 概要

作成 : Masashi Okumura (@classcat.com)
作成日時 : 04/19/2026
バージョン : v1.56.2

* 本記事は github.com/CopilotKit/CopilotKit の以下のページを参考にしています :

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。

 

 

CopilotKit : 概要

CopilotKit は、生成 UI、共有状態、human-in-the-loop ワークフローを備えたエージェント型アプリケーション (agent-native applications) を構築するための SDK です。

 

What is CopilotKit

CopilotKit は、フルスタックのエージェント型アプリケーション、生成 UI、チャットアプリケーションを構築するためのクラス最高の SDK です。

私たちは、Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等々に採用されている AG-UI プロトコルを開発・運営している企業です。

 
機能 ：

  • チャット UI – メッセージストリーミング、ツール呼び出し、エージェントレスポンスをサポートする、React ベースのチャットインターフェース。

  • バックエンドツールレンダリング – エージェントがバックエンドツールを呼び出すことを可能にします、これはクライアントで直接レンダリングされた UI コンポーネントを返します。

  • 生成型 UI – エージェントが、ユーザーの意図とエージェントの状態に基づいて、実行時に UI コンポーネントを動的に生成および更新することを可能にします。

  • 共有状態 – エージェントと UI コンポーネントの両方がリアルタイムに読み書きできる同期状態レイヤー。

  • Human-in-the-Loop – エージェントが実行を一時停止し、続行する前にユーザーの入力、確認、または編集を求めることができます。

 

クイックスタート

新しいプロジェクト :

npx copilotkit@latest create -f <framework>

 
既存のプロジェクト :

npx copilotkit@latest init

 
What this gives you:

  • CopilotKit がインストール済み – アプリケーション内にコアパッケージが完全にセットアップされます

  • プロバイダーが構成済み – コンテキスト、状態、フックがすぐに使用できます

  • エージェント <> UI が接続済み – エージェントはアクションをストリーミングし、UIを即座にレンダリングできます

  • デプロイ準備完了 – アプリケーションを配備する準備ができています

Complete getting started guide →

 

How it works:

CopilotKitは、UI、エージェント、ツールを単一のインタラクションループに接続します。

これは以下を可能にします :

  • ユーザーに入力を求めるエージェント

  • UI をレンダリングするツール

  • ステップとセッションをわたるステートフルなワークフロー

 

⭐️ useAgent フック

useAgent フックは useCoAgent の完全な上位互換で、AG-UI に直接組み込まれているので、エージェント接続をより制御することができます。

// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });

// Render and update your agent's state
return <div>
  <h1>{agent.state.city}</h1>
  <button onClick={() => agent.setState({ city: "NYC" })}>
    Set City
  </button>
</div>

 

生成型 UI

生成型 UI (Generative UI) は、エージェントがワークフローの一部として UI を動的にレンダリングすることを可能にする、コア CopilotKit パターンです。

 

以上