CopilotKit으로 앱 안에 AI 도우미 구현하기

CopilotKit은 무엇을 하는 도구인가요?

CopilotKit은 Tawkit, Inc.가 제공하는 오픈 소스 개발 프레임워크입니다. 개발자가 자신의 애플리케이션에 AI 도우미를 넣고, 에이전트와 사용자가 작업하는 화면을 연결하도록 돕습니다. 응답은 글뿐 아니라 차트, 카드 또는 등록된 기능의 실행 결과가 될 수 있습니다.

예를 들어 할 일 앱에서 사용자가 항목 추가를 요청하면 에이전트가 공유 목록을 바꾸고 화면이 갱신되도록 구현할 수 있습니다. 데이터와 허용할 기능은 개발팀이 준비해야 합니다. 웹사이트에 접속하는 것만으로 다른 프로그램을 자동 조작하는 서비스는 아닙니다.

생성형 UI, 공유 상태와 사용자 승인

생성형 UI는 제품의 카드, 표, 차트로 결과를 표현합니다. React의 useComponent는 표시용 컴포넌트와 타입이 지정된 매개변수를 등록하고, 에이전트는 데이터를 채웁니다. 이렇게 화면에 표시하는 것만으로 백엔드 거래가 실행되지는 않습니다.

공유 상태는 앱과 에이전트의 데이터를 동기화합니다. Human-in-the-loop는 실행을 잠시 멈춰 선택이나 확인을 받을 수 있게 합니다. 반드시 승인이 필요한 업무는 실행 흐름에서 강제해야 하며, 모델이 자발적으로 질문하는 것과 구분해야 합니다.

앱의 화면과 AI 에이전트 연결하기

SaaS 제품, 사내 시스템, 모바일 앱에 맞춘 에이전트 경험을 만드는 팀에 적합합니다. 공식 SDK는 React, Angular, Vue, React Native를 지원합니다. 백엔드는 내장 에이전트 또는 LangGraph, Google ADK, Mastra, PydanticAI 등의 통합 경로를 선택할 수 있습니다.

AG-UI는 에이전트와 화면 사이의 통신을 담당하고 CopilotKit은 구성 요소와 상호작용을 제공합니다. 프런트엔드 도구는 브라우저에 등록한 함수를 실행해 필터를 바꾸거나 레코드를 여는 데 사용할 수 있습니다. 업무 데이터 접근 권한은 앱이 검사해야 합니다. Slack과 Microsoft Teams에는 Channels 경로도 있습니다.

React에서 첫 대화 기능 구현하기

공식 빠른 시작은 React에서 다음 순서로 진행합니다.

1. 프로젝트, Node.js 20 이상, 모델 제공자의 API 키를 준비합니다.
2. @copilotkit/react-core와 @copilotkit/runtime을 설치하고 서버에 자격 증명과 runtime 엔드포인트를 구성합니다.
3. Provider에 runtime 주소를 연결하고 스타일과 채팅 또는 사이드바를 추가합니다.
4. 일반 대화를 먼저 확인한 뒤 결과가 명확한 프런트엔드 기능을 하나 등록합니다.
5. 실제 화면 상태가 바뀌는지 확인하고 로컬 Inspector에서 AG-UI 이벤트를 살펴봅니다.

기존 에이전트가 있다면 해당 프레임워크의 연결 지침을 사용해야 합니다. BuiltInAgent는 모델을 직접 호출하므로 기존 로직을 자동 연결하지 않습니다. 서버 없는 SPA는 별도 runtime 서버도 필요합니다.

무료 범위와 유료 요금제

2026년 10월 18일 확인한 공개 미국 달러 가격 기준으로 Developer는 개발자 1명에게 무료이며 최대 200개 대화 스레드, 3일 보관, 1GB 멀티모달 저장 공간을 제공합니다. Pro는 월 39달러, Team은 최대 5석으로 좌석당 월 100달러입니다. 대기 중인 초대도 좌석을 사용합니다. Enterprise는 개별 조건입니다. 원화 가격이나 세금 포함 최종 금액을 뜻하지 않습니다.

Intelligence는 지속적인 대화 기록과 사용자 메모리 등을 추가합니다. 현재 표에서 Analytics와 Self-Learning은 Enterprise 조기 액세스로 표시됩니다. 모델 호출과 앱 인프라 비용도 따로 검토하고 최신 요금제를 확인하세요.

자체 호스팅과 데이터 처리

공식 코드는 MIT 라이선스를 사용하므로 고지문 유지 등 조건에 따라 상업적 이용이 가능합니다. 관리형 서비스에는 별도 약관이 있습니다. Developer/Pro의 runtime 자체 호스팅과 전체 플랫폼 배포는 범위가 다릅니다.

자체 서버를 쓰더라도 외부 모델 API에 데이터가 전달될 수 있습니다. 개인정보 정책은 웹사이트 처리와 고객 계약에 따른 처리를 구분합니다. 오픈 소스 텔레메트리는 메타데이터를 수집하며 프롬프트, 메시지, 상태, 도구 내용은 수집하지 않고 비활성화할 수 있다고 설명합니다. 모든 연결 서비스에 대한 포괄적인 보장은 아닙니다.

자주 묻는 질문

React 외에 Vue도 지원하나요?

네. Vue뿐 아니라 Angular와 React Native용 공식 SDK도 있습니다. 각 프레임워크의 API와 설정을 따라야 합니다.

생성형 UI로 무엇을 보여 줄 수 있나요?

등록한 차트, 표, 카드 등을 보여 줄 수 있습니다. 사용자 입력이나 확인이 필요하면 표시 기능과 별도로 적절한 상호작용을 연결해야 합니다.

CopilotKit을 자체 서버에 설치할 수 있나요?

가능합니다. 다만 runtime과 전체 Intelligence 플랫폼의 배포 조건, 외부 모델로 보내는 데이터는 각각 확인해야 합니다.

공식 문서와 개발자 커뮤니티

• 공식 문서: 프런트엔드와 에이전트 연결 방법.
• GitHub 저장소: 소스, 라이선스, 이슈.
• 공식 Discord: 개발 관련 질문과 토론.