CopilotKit
フレームワークCopilotKit/CopilotKit
エージェントアプリケーションを構築するためのフルスタック SDK。ジェネレーティブ UI をサポート。
概要
CopilotKit は、生成 UI、共有状態、人間とAIの協働ワークフローを備えたエージェントネイティブアプリケーションを構築するためのオープンソース SDK です。React、Angular、Vue、React Native をサポートし、エージェントが UI コンポーネントを動的にレンダリングできるようにします。
README プレビュー
\n\n\n\n# CopilotKit\n\n\n\n[Docs](https://docs.copilotkit.ai/?ref=github_readme) ·\n[Examples](https://www.copilotkit.ai/examples) ·\n[Enterprise Intelligence Platform](https://go.copilotkit.ai/enterprise-intelligence-platform) ·\n[Discord](https://discord.gg/6dffbvGU3D?ref=github_readme)\n\n\n\nBuild **agent-native applications** — on any framework, on any surface.\n\nGenerative UI, shared state, and human-in-the-loop workflows for React, Angular, Vue, React Native — and beyond the browser.\n\n\n\n[](https://go.copilotkit.ai/copilotkit-docs)\n\n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n\n \n \n \n \n \n \n\n \n\n---\n\n## What is CopilotKit\n\nCopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.\n\nWhat started as a React library is now a **multi-platform agentic framework**: the same agent can power your web app, your mobile app, and your team's Slack workspace.\n\nWe are the company behind the **[AG-UI Protocol](https://github.com/ag-ui-protocol/ag-ui)** - adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!\n\nhttps://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3\n\n Add AI to your app in 1 minute\n\n**Features:**\n\n- **Chat UI** – A fully customizable chat interface that supports message streaming, tool calls, and agent responses.\n- **Backend Tool Rendering** – Enables agents to call backend tools that return UI components rendered directly in the client.\n- **Generative UI** – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.\n- **Shared State** – A synchronized state layer that both agents and UI components can read from and write to in real time.\n- **Human-in-the-Loop** – Lets agents pause execution to request user input, confirmation, or edits before continuing.\n- **Self-Learning** *(early access)* – Agents that continuously impr
FAQ (5)
トラブル対応なぜ React StrictMode 下の Next.js dev で useCopilotAction の renderAndWaitForResponse が何もレンダリングしないのですか?
これは、@copilotkit/react-core 1.53.x 以前における StrictMode の再マウントのバグが原因です。プロバイダーのガード付きエフェクトが、フックで登録された renderToolCalls を props のみのリストで上書きしてしまうため、next dev では useHumanInTheLoop / renderAndWaitForResponse の UI が表示されなくなります。@copilotkit/react-core 1.54.0 以降にアップグレードしてください。1.54.1 で動作が確認されています: npm install @copilotkit/react-core@^1.54.1。また、@copilotkitnext/react などの関連する CopilotKit パッケージも、互換性のあるバージョンにアップグレードしてください。一時的な回避策として、next.config.js で reactStrictMode: false を設定して StrictMode を無効にする方法があります。本番ビルドではエフェクトの二重呼び出しが行われないため、この問題の影響はありません。
トラブル対応CopilotKit の実行を停止した後に /connect リプレイで発生する ZodError「threadId Required, runId Required」を修正するにはどうすればよいですか?
CopilotKit を v1.76.0 以降にアップグレードしてください。停止時に生成される RUN_FINISHED イベントに、その実行の threadId と runId が含まれるようになったため、/connect リプレイ時に @ag-ui/core のスキーマ検証を通過します。
npm install @copilotkit/runtime@^1.76.0
# 他の @copilotkit/* パッケージも同じリリースに更新してください
すぐにアップグレードできない場合は、インメモリランタイムを再起動して、保存されている無効なイベントを破棄してください。SQLite などの永続ストレージの場合は、実行履歴から該当する {"type":"RUN_FINISHED"} イベントを削除してください。ソースレベルの回避策としては、finalizeRunEvents にパッチを適用し、合成される RUN_FINISHED が { type: EventType.RUN_FINISHED } のみを追加するのではなく、対応する RUN_STARTED イベントから threadId と runId をコピーするようにします。
トラブル対応CopilotKitのA2UIProvider(@copilotkit/a2ui-renderer)で、なぜdispatchActionはonActionが完了する前にresolveしてしまうのですか?
これは @copilotkit/a2ui-renderer (v1.71.1) の既知のバグです。OnActionCallback は (message) => void | Promise<void> という型定義になっていますが、A2UIProvider は MessageProcessor のアクションハンドラー内と surface の dispatch メソッド内の両方で、onActionRef.current(message) の戻り値を返さずに呼び出しています。そのため、Promise が破棄され、dispatchAction が即座に解決してしまいます。**修正方法:** packages/a2ui-renderer/src/react-renderer/core/A2UIProvider.tsx を修正し、両方の箇所でコールバックの結果を返すようにします:
// MessageProcessor action handler
processorRef.current = new MessageProcessor([...], (action) => {
if (onActionRef.current) {
// ...build `message`
return onActionRef.current(message);
}
});
// dispatch
dispatch: (message: any) => onActionRef.current?.(message),
この変更は同期ハンドラーに対しても安全です。@a2ui/web_core ではすでに Promise が伝播されており(SurfaceModel.dispatchAction が onAction.emit(...) を await し、EventEmitter.emit が各リスナーを await します)、値を返すだけで十分です。**パッチが適用されるまでの回避策:** A2UIProvider を使わずに、単体の MessageProcessor を直接使用し、そのアクションハンドラーから非同期の onAction Promise を返すようにします。そうすれば、dispatchAction はハンドラーが完了した後に正しく解決されるようになります。
トラブル対応LangGraphにおけるag_uiとag-uiのステートキー不一致が原因で発生するCopilotKit A2UIのレンダリングエラーは、どうすれば修正できますか?
LangGraph はハイフンを含む ag-ui ステートキーを ag_ui に正規化する場合がありますが、CopilotKit ミドルウェアは state["ag-ui"] のみを読み取ります。その結果、a2ui_schema と inject_a2ui_tool が見つからず、A2UI ツールが注入されず、コンポーネントが unknown としてレンダリングされる可能性があります。
回避策: 影響を受ける各ノードで CopilotKit/A2UI ロジックが実行される前に、ステートキーを正規化します。
async def chat_node(state):
if "ag_ui" in state and "ag-ui" not in state:
state["ag-ui"] = state["ag_ui"]
# 既存のエージェントロジック
response = await model.ainvoke(state["messages"])
return {"messages": [response]}
サブエージェントや A2UI ステートを読み取るすべてのノードにも同じ正規化を適用してください。実際のキーは次のように確認できます。
print("ag-ui" in state, "ag_ui" in state)
print(list(state.keys()))
影響を受ける構成には、CopilotKit 0.1.94+、ag-ui-langgraph 0.0.40+、LangGraph 1.1.0+ が含まれます。
トラブル対応起動時のチェックで1件のレコードは一覧取得できるのに、全レコードのカウントでタイムアウトしてしまう場合、PocketBaseの「context deadline exceeded」エラーはどのように修正すればよいですか?
PocketBaseのlist()メソッドは、perPageが1に設定されている場合でも、デフォルトでレコード総数をカウントします。cvdiag_eventsのような約2360万行の大規模テーブルでは、生成されるSELECT COUNT(DISTINCT id)クエリがPocketBaseの30秒のデッドラインを超過し、HTTP 400を返す可能性があります。
総数カウントを無効にして、存在チェックを修正します:
pb.list(collection, {
perPage: 1,
skipTotal: true,
});
これを両方の診断コレクションチェックに適用します:
- cvdiag_events
- cvdiag_raw_byte_samples
報告されたステージング環境では、perPage=1&skipTotal=trueによる読み取り専用チェックは112ミリ秒で完了しました。既存のヘルス、認証、コレクション未存在、および権限チェックは変更しないでください。スキーマ変更、リトライポリシー、タイムアウト延長は不要です。起動時プローブが失敗した場合、buildCvdiagPersistenceWriter()は永続診断を無効化し、イベントはstdoutにフォールバックするため、誤解を招く汎用的なcvdiag.pb-writer.write-failedログは起動時の読み取り/プローブ失敗として解釈する必要があります。