CopilotKit
에이전트 UI 를 앱에 붙이는 프런트엔드 스택
npx copilotkit@latest create리액트·앵귤러·뷰·리액트 네이티브 앱에 생성형 UI, 공유 상태, 사람 개입 워크플로를 붙이는 SDK 입니다. 같은 에이전트를 웹과 모바일, 슬랙과 팀즈에서 함께 쓰도록 만드는 계층을 지향합니다. 구글·랭체인·AWS·마이크로소프트가 채택한 AG-UI 프로토콜을 만든 팀이 개발합니다.
판단
이럴 때 씁니다
- 이미 있는 리액트 앱에 에이전트 채팅과 생성형 UI 를 붙일 때
- 에이전트와 화면이 같은 상태를 공유해야 할 때
- 사람이 중간에 승인하거나 개입하는 흐름이 필요할 때
- 같은 에이전트를 웹과 슬랙, 팀즈에서 함께 쓰고 싶을 때
이럴 땐 쓰지 마세요
- 백엔드 에이전트 로직 자체가 목적일 때
- 프런트엔드 프레임워크를 쓰지 않는 CLI 도구일 때
- 단순 채팅 위젯만 필요해 SDK 가 과할 때
차별점
- 구글·랭체인·AWS·마이크로소프트가 채택한 AG-UI 프로토콜을 만든 팀이 개발합니다.
- 리액트뿐 아니라 앵귤러·뷰·리액트 네이티브를 지원합니다.
- 같은 에이전트를 웹·모바일·슬랙·팀즈에서 함께 씁니다.
- 에이전트와 화면이 상태를 공유하는 구조를 제공합니다.
워크플로
- 01npx copilotkit@latest create 로 프로젝트를 만듭니다.
- 02백엔드 에이전트를 AG-UI 프로토콜로 연결합니다.
- 03프런트엔드에 공유 상태를 선언해 에이전트와 화면이 같은 데이터를 보게 합니다.
- 04생성형 UI 컴포넌트로 에이전트 응답을 화면 요소로 렌더합니다.
- 05필요하면 사람 승인 단계를 흐름에 넣습니다.
주요 명령
| 명령 | 설명 |
|---|---|
npx copilotkit@latest create | 새 프로젝트를 만듭니다. |
npx copilotkit@latest skills install | 스킬을 설치합니다. |
npx create-ag-ui-app my-agent-app | AG-UI 기반 앱을 생성합니다. |
함정
설치 전에 확인하세요
- 리액트 라이브러리로 시작했지만 지금은 범위가 넓습니다. 필요한 부분만 골라야 번들이 커지지 않습니다.
- AG-UI 프로토콜을 전제로 하므로 백엔드도 여기에 맞춰야 합니다.
- 릴리스가 잦습니다. v1.70.1 처럼 패치가 자주 올라옵니다.
- 엔터프라이즈 유료 제품이 별도로 있습니다. 오픈소스 범위를 확인해야 합니다.
비교
Agno 나 smolagents 가 에이전트를 만드는 쪽이라면, CopilotKit 은 그 에이전트를 사용자에게 보여주는 쪽입니다. 층이 다르므로 함께 쓰는 경우가 많습니다. 에이전트는 이미 있는데 사용자 인터페이스가 없다면 이쪽입니다.
최근 변경
2026-09-03 v1.70.1 이 최신 패치입니다. 리액트 라이브러리에서 출발해 지금은 웹·모바일·슬랙·팀즈를 함께 다루는 계층으로 범위를 넓혔고, AG-UI 프로토콜을 축으로 삼고 있습니다.