CopilotKit
에이전트를 품은 앱을 위한 오픈소스 프런트엔드 SDK. 채팅 UI, 생성형 UI, 공유 상태, 사람의 승인
CopilotKit은 자기 제품 안에 에이전트를 넣기 위한 오픈소스 SDK입니다. 자유롭게 꾸밀 수 있는 채팅 인터페이스, 에이전트가 실행 중에 그려 낼 수 있는 UI 컴포넌트, 에이전트와 앱이 함께 읽고 쓰는 상태 계층, 그리고 사람의 판단을 기다리며 실행을 멈추는 단계를 제공합니다. MIT 라이선스이고 React, Angular, Vue, React Native를 지원하며, AG-UI 프로토콜을 만든 프로젝트이기도 합니다. AI 기능을 내놓을 때의 인터페이스 절반은 풀어 주지만, 어려운 절반인 누군가가 실제로 쓰게 만드는 일은 풀어 주지 않습니다.
CopilotKit이란
CopilotKit은 스스로를 풀스택 에이전트 애플리케이션, 생성형 UI, 채팅 애플리케이션을 만들기 위한 SDK라고 소개합니다. React 라이브러리로 시작해 지금은 여러 플랫폼을 아우릅니다. README는 React와 Next.js를 정식 제공, Angular와 Vue와 React Native를 지원, Slack과 Microsoft Teams를 베타로 표기하고 Discord와 Google Chat은 준비 중이라고 적어 두었으며, 모든 접점 뒤에는 같은 에이전트 백엔드가 있습니다. 시작은 명령 하나, npx copilotkit@latest create 와 OpenAI, Anthropic, Gemini 같은 제공자의 모델 키뿐입니다. 저장소 소스는 MIT 라이선스입니다.
같은 팀이 그 아래에 있는 에이전트와 사용자 사이의 상호작용 프로토콜 AG-UI도 만듭니다. README에 따르면 LangChain, CrewAI, Mastra, PydanticAI를 비롯한 에이전트 생태계 곳곳에서 채택됐습니다. 창업자에게 이것이 갖는 실질적인 의미는 분명합니다. 에이전트와 인터페이스 사이의 통신 형식은 내버려 두면 직접 정하고 나중에 후회하게 되는 종류의 결정인데, 다른 프레임워크가 이미 쓰는 프로토콜에 올라타면 에이전트 쪽을 나중에 갈아 끼울 수 있는 상태로 남길 수 있습니다. 프로젝트는 코딩 도구에 라이브러리 설정과 디버깅 방법을 가르치는 설치형 스킬도 함께 배포하는데, 누가 연동 코드를 쓸 거라고 보는지가 잘 드러납니다.
제공하는 패턴과 각각의 쓰임
기능 목록은 사실 에이전트 제품을 위한 인터페이스 패턴 목록이고, 서로 바꿔 쓸 수 있는 것들이 아닙니다. 어떤 패턴이 어떤 문제를 푸는지 알아 두는 것이, 버튼 하나면 끝날 작업 위에 채팅창을 붙이는 사태를 막아 줍니다.
| 패턴 | 무엇을 푸는가 | 과하게 쓰이는 지점 |
|---|---|---|
| 채팅 UI | 화면에 버튼이 없는 열린 요청을 받는 자리. 응답 스트리밍과 눈에 보이는 도구 호출이 함께 온다. | 제품 전체로 삼는 것. 한 번 클릭이면 될 일을 문장으로 부탁하는 건 일이 줄어드는 게 아니라 늘어나는 것이다. |
| 생성형 UI | 에이전트가 말로 설명하는 대신 표, 폼, 차트 같은 실제 컴포넌트를 그리게 하는 것. | 응답마다 매번 새로 만들어 내는 것. 쓸 때마다 다른 제품처럼 보이고 끝내 익힐 수 없는 화면이 된다. |
| 공유 상태 | 에이전트와 앱이 같은 데이터를 보게 유지하는 것. 에이전트의 동작이 화면에 반영되고 사용자의 수정이 에이전트에 닿는다. | 에이전트에 필요 없는 상태까지 동기화하는 것. 작은 UI 변경이 그대로 에이전트 동작 변경이 되어 버린다. |
| 사람의 승인 | 결과가 큰 동작 앞에서 멈춰 확인이나 수정, 빠진 입력을 요청하는 것. | 모든 것을 확인시키는 것. 결국 사람들이 읽지 않고 누르게 된다. 어떤 승인 단계든 겪는 실패 방식이다. |
마지막 줄이 반드시 제대로 잡아야 하는 부분이고, 이건 기술이 아니라 제품의 결정입니다. 어떤 동작에 멈춤이 필요한가는 프레임워크의 문제가 아니라 결과의 무게와 되돌릴 수 있는지의 문제입니다. 개념은 사람이 개입하는 루프와 승인 게이트에서 다룹니다.
에이전트 인터페이스를 실제로 내보내며 배운 것
AgentCeres — agentceres.com의 AI 성장 팀 — 에서는 제품 표면 전체가 에이전트와의 대화라, 이 인터페이스를 만들고 또 다시 만들어 왔습니다. 가장 쓸모 있었던 배움은 어떤 SDK의 기능 목록에도 없습니다. 에이전트가 오래 일하는 동안의 침묵은 고장으로 읽힙니다. 삼십 초 동안 아무것도 움직이지 않는 화면을 본 사람은 신중한 작업이 진행 중이라고 결론 내리지 않습니다. 멈췄다고 판단하고 새로고침해서, 기다리던 바로 그 작업을 스스로 취소합니다. 결국 우리는 지금 무슨 일이 벌어지는지를 한 줄로 보여 주고, 이번 차례에 무엇을 했는지를 접었다 펼 수 있는 형태로 남겼습니다. 그러자 느리다는 불만이 상당 부분 무엇을 하고 있느냐는 질문으로 바뀌었습니다.
두 번째 배움은 절제에 관한 것이고, 어떤 라이브러리도 대신 정해 주지 않는 부분입니다. 우리 에이전트들은 서로에게 일을 넘기는데, 그 사이에 오가는 메시지는 우리에게는 흥미롭고 고객에게는 쓸모없습니다. 그래서 담당 전문가에게 물어봤다는 사실만 표시 이름으로 보여 주고, 무슨 말이 오갔는지는 절대 보여 주지 않습니다. 사람에게 무엇을 보여도 되는지 정하는 일은 알고 보니 렌더링 문제가 아니었습니다. 그 기록을 만들 때 데이터는 처음부터 전부 대화 기록 안에 있었고, 진짜 작업은 사람 앞에 놓일 자격이 있는 것을 고르는 일이었습니다.
이런 라이브러리에서 만들기와 키우기의 경계가 바로 거기 있습니다. CopilotKit은 동작하는 에이전트와 고객이 쓸 수 있는 에이전트 사이의 거리를 확실히 줄여 줍니다. 하지만 AI 기능이 의미를 갖는지를 결정하는 두 가지, 즉 누군가 그것을 발견하는지와 처음 시도한 일이 성공하는지에 대해서는 아무것도 하지 않습니다. 둘 다 온보딩의 몫입니다. usertour는 그 안내판이고, langfuse는 실제 사용자가 들어온 뒤 에이전트가 무엇을 했는지 들여다보는 도구입니다.
FAQ
- CopilotKit은 무료인가요?
- 저장소 소스는 MIT 라이선스로 제공되므로 직접 호스팅하고 그 위에 상용 제품을 올려도 소프트웨어 비용은 없습니다. 프로젝트는 관리형 클라우드와 인텔리전스 플랫폼도 판매하며, README가 얼리 액세스로 표시한 자가 학습 기능이나 Slack과 Teams 접점 같은 일부 기능은 그쪽에 있습니다. 모델 사용료는 어느 제공자를 가리키느냐에 따라 별도로 청구됩니다.
- 쓰려면 에이전트 프레임워크가 필요한가요?
- 필요 없습니다. 뒤에 무엇이 있든 AG-UI로 대화하므로, 에이전트는 LangChain이나 CrewAI 같은 프레임워크일 수도 있고 모델을 직접 호출하는 여러분의 코드일 수도 있습니다. 이 분리가 채택할 실무적 이유입니다. 인터페이스 계층과 에이전트 계층은 변화 속도가 크게 다르고, 에이전트의 사고방식을 바꿀 때마다 UI를 다시 쓰고 싶지는 않을 테니까요.
- 채팅 인터페이스를 직접 만들면 안 되나요?
- 스트리밍이 되는 기본 채팅창은 주말이면 만듭니다. 훨씬 오래 걸리는 것은 나중에 마주치는 부분입니다. 컴포넌트를 그려 내는 도구 호출, 앱 상태와 에이전트 상태를 어긋나지 않게 유지하는 일, 세션을 넘겨 대화를 이어 가는 일, 실행 도중 사람의 판단을 기다리며 멈추는 일. 제품 자체가 에이전트라면 이것들은 금세 선택 사항이 아니게 되고, 그게 라이브러리를 쓰는 이유입니다. 필요한 것이 지원 위젯이라면 이건 과합니다.
- AI 기능을 넣으면 제품이 성장하나요?
- 그것만으로는 아니고, 이 점은 분명히 말할 가치가 있습니다. 제품 안의 에이전트는 정착과 유지를 위한 기능입니다. 이미 쓰고 있는 사람에게 어려운 흐름을 쉽게 만들어 줄 수 있습니다. 수요를 만들지는 못하고, 출시한다고 발견되지도 않습니다. 실제로 대부분의 사용자는 첫 세션에서 눈앞에 놓아 주지 않으면 한 번도 열지 않습니다. 구현만큼의 정성을 소개 방식에도 쓰세요.
- 어떤 프레임워크를 지원하나요?
- README는 React와 Next.js를 정식 제공, Angular와 Vue와 React Native를 지원, Slack과 Microsoft Teams와 Discord와 Google Chat을 베타 또는 준비 중으로 표기하며, 모두 하나의 에이전트 백엔드를 향해 동작합니다. 지원 목록에 없는 스택을 쓰고 있다면 AG-UI가 구현 대상 프로토콜이 되고, 어차피 의존하기에는 그쪽이 더 오래갑니다.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.