生成的UI、共有状態、人間参画ワークフローを使用して、エージェントネイティブアプリケーションを構築します。
CopilotKit は、フルスタック agentic アプリケーション、Generative UI、チャットアプリケーションを構築するための最高クラスの SDK です。
Google、LangChain、AWS、Microsoft、Mastra、PydanticAI など、多くの企業に採用されている AG-UI Protocol の開発企業です。
Whole.Generative.UI.v5.mp4
1 分で AI をアプリに追加できます
機能：
- Chat UI – メッセージストリーミング、ツール呼び出し、エージェント応答をサポートする React ベースのチャットインターフェースです。
- Backend Tool Rendering – エージェントがバックエンドツールを呼び出し、UI コンポーネントをクライアントで直接レンダリングできます。
- Generative UI – エージェントがユーザー意図とエージェント状態に基づいて、UI コンポーネントを動的に生成・更新できます。
- Shared State – エージェントと UI コンポーネントがリアルタイムで読み書きできる同期状態レイヤーです。
- Human-in-the-Loop – エージェントが実行を一時停止して、ユーザー入力、確認、または編集をリクエストしてから処理を続行できます。
full-headless-chat.mp4
npx copilotkit@latest create -f <framework>npx copilotkit@latest initcpk-cli.mp4
得られるもの:
- CopilotKit がインストールされています – コアパッケージはアプリに完全にセットアップされています
- プロバイダが設定されています – Context、state、hooks を使用できる状態です
- Agent <> UI が接続されています – Agent はアクションをストリーミングして UI を即座にレンダリングできます
- デプロイ準備完了 – アプリはデプロイ可能な状態です
CopilotKit は UI、エージェント、ツールを 1 つのインタラクションループに接続します。
これにより以下が実現されます:
- ユーザーに入力を求める Agent
- UI をレンダリングするツール
- ステップとセッション全体にわたるステートフルなワークフロー
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>詳しくは useAgent ドキュメントをご確認ください。
CopilotKit.UseAgent.Graphic.Motion_2.mp4
Generative UI は、エージェントがワークフローの一部として UI を動的にレンダリングすることを可能にする CopilotKit のコアパターンです。
demo-generative-ui.mp4
エージェント ワークフローをユーザー向けアプリに接続し、LangGraph、CrewAI など、エージェンティック スタック全体にわたる深いパートナーシップとファーストパーティ統合を実現します。
