ONEDEV

CopilotKit

LLM FrameworksCLITypeScript

★ 37,330주당 +154조회 5

무엇인가

CopilotKit은 에이전트 백엔드와 사용자 접점 사이에 놓이는 TypeScript 프론트엔드 계층이다. 에이전트를 만들거나 실행하지 않고, 에이전트가 내보낸 이벤트를 UI로 렌더링하고 사용자 입력을 다시 에이전트로 돌려보내는 구간을 담당한다. 같은 에이전트를 웹 앱, 모바일 앱, Slack·Microsoft Teams 워크스페이스에 각각 따로 구현하던 자리를 대체한다.

어떻게 동작하나

에이전트 백엔드와 프론트엔드는 AG-UI 프로토콜로 통신하고, CopilotKit이 그 위에 프레임워크별 UI 계층을 얹는다. useAgent 훅은 AG-UI에 직접 붙어 에이전트 연결을 프로그래밍 방식으로 제어한다. 공유 상태 계층은 에이전트와 UI 컴포넌트가 같은 상태를 실시간으로 읽고 쓰게 한다. 백엔드 도구가 돌려준 값은 클라이언트에서 UI 컴포넌트로 렌더링된다. 휴먼 인 더 루프에서는 에이전트 실행이 멈추고 사용자 입력·확인·수정을 기다린다. Channels SDK는 같은 에이전트를 Slack과 Microsoft Teams 앱으로 올린다.

무엇과 다른가

생성형 UI는 세 갈래로 처리한다. 정적 방식은 AG-UI 프로토콜, 선언적 방식은 A2UI, 개방형 방식은 MCP Apps와 Open JSON을 쓴다. CopilotKit Intelligence의 CLHF는 모델 파인튜닝 없이 문맥 내 강화학습으로 사용자 상호작용에서 에이전트 동작을 조정한다. 스레드와 영속화가 생성형 UI, 휴먼 인 더 루프, 공유 상태 이력을 세션 너머로 보존한다. 실행 위치는 CopilotKit Cloud 또는 자체 호스팅이다.

어떻게 쓰나

설치 후 코어 패키지, 프로바이더, 에이전트-UI 연결 순서로 배선한다. 프로바이더가 컨텍스트와 상태, 훅을 준비하고, 에이전트가 액션을 스트리밍하면 UI가 즉시 렌더링된다. CLI의 copilotkit verify가 프로젝트 배선을 검증한다. 코딩 에이전트용 스킬 두 개(copilotkit, copilotkit-cli)를 프로젝트 디렉터리에 설치할 수 있고, copilotkit 스킬은 학습 데이터 대신 현재 문서와 소스를 검색한다.

전제와 한계

자기학습 기능은 얼리 액세스 단계다. LLM 키(OpenAI, Anthropic, Gemini 등)가 있어야 한다. 프론트엔드는 React, Angular, Vue, React Native를, 채팅 채널은 Slack과 Microsoft Teams를 대상으로 한다. AG-UI 프로토콜은 Google, LangChain, AWS, Microsoft, Mastra, PydanticAI 등이 채택했다.

유사 도구