개요
CopilotKit은 생성형 UI, 공유 상태, 인간-에이전트 협업 워크플로를 갖춘 에이전트 네이티브 애플리케이션을 구축하기 위한 오픈 소스 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 개발 모드에서 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 run을 중지한 후 /connect replay에서 ZodError "threadId Required, runId Required"를 수정하려면 어떻게 해야 하나요?
CopilotKit를 v1.76.0 이상으로 업그레이드하세요. 중지 시 생성되는 RUN_FINISHED 이벤트가 이제 실행의 threadId와 runId를 포함하므로, /connect 재생(replay) 중에 @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)에서 onAction이 완료되기 전에 dispatchAction이 resolve되는 이유는 무엇인가요?
이는 @copilotkit/a2ui-renderer (v1.71.1)의 알려진 버그입니다: OnActionCallback이 (message) => void | Promise<void> 타입으로 선언되어 있음에도 불구하고, A2UIProvider는 MessageProcessor 액션 핸들러와 surface의 dispatch 메서드 양쪽 모두에서 onActionRef.current(message)를 호출하면서 그 결과를 반환하지 않습니다. 따라서 프로미스가 누락되고 dispatchAction이 즉시 resolve됩니다. **수정 방법:** 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는 이미 프로미스를 전파하므로(SurfaceModel.dispatchAction이 onAction.emit(...)을 await하고, EventEmitter.emit이 각 리스너를 await함), 값을 반환하기만 하면 됩니다. **패치될 때까지의 임시 해결 방법:** A2UIProvider 없이 순수한 MessageProcessor를 직접 사용하되, 액션 핸들러가 비동기 onAction 프로미스를 반환하도록 하세요. 그러면 dispatchAction이 핸들러가 완료된 후 올바르게 resolve됩니다.
문제 해결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+가 포함됩니다.
문제 해결시작 검사에서 레코드 하나는 나열되지만 모든 레코드를 카운트할 때 시간 초과가 발생하는 경우 PocketBase의 'context deadline exceeded' 오류를 어떻게 해결하나요?
PocketBase의 list() 메서드는 perPage가 1로 설정되어 있어도 기본적으로 전체 레코드 수를 계산합니다. cvdiag_events처럼 약 2,360만 개의 행을 가진 대규모 테이블에서는 생성되는 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를 사용한 읽기 전용 확인이 112ms 만에 완료되었습니다. 기존의 상태, 인증, 누락된 컬렉션 및 권한 확인은 변경하지 않고 유지하세요. 스키마 변경, 재시도 정책 또는 타임아웃 증가는 필요하지 않습니다. 시작 프로브가 실패하면 buildCvdiagPersistenceWriter()가 내구성 진단을 비활성화하고 이벤트가 stdout으로 폴백되므로, 오해를 불러일으키는 일반적인 cvdiag.pb-writer.write-failed 로그는 시작 읽기/프로브 실패로 해석해야 합니다.