Back to Blog
[TUTORIAL]

챗봇을 넘어 앱 안으로 — CopilotKit과 AG-UI 프로토콜 완전 정리

4 min read0 views
#Ai 코파일럿#Copilotkit#Ai 에이전트 프레임워크#Ag Ui 프로토콜#Generative Ui

챗봇을 넘어 앱 안으로 — CopilotKit과 AG-UI 프로토콜 완전 정리

AI 챗봇 화면 하나를 띄우는 건 이제 누구나 합니다. 문제는 그다음이죠. 그 챗봇은 내가 지금 앱에서 무엇을 하고 있는지 모릅니다. 대신 버튼을 눌러주지도, 화면을 바꿔주지도 못하죠. 그저 긴 텍스트를 돌려주는 똑똑한 메모장에 가깝습니다. CopilotKit은 바로 이 빈틈을 정확히 노린 오픈소스 프레임워크입니다. 한 줄로 요약하면 이렇습니다.

"AI를 앱에 얹는 게 아니라, 앱 안에 심는다."

CopilotKit이란?: React·Angular·모바일·Slack 앱 안에 AI 코파일럿과 에이전트를 내장하는 오픈소스 프레임워크입니다. 에이전트 표준 'AG-UI 프로토콜'을 만든 곳이기도 합니다.

2023년 6월 19일 처음 공개된 이 프로젝트는 2026-06-07 기준 GitHub 스타 33,216개(약 3.3만)를 모았고, 2026년 5월 5일에는 2,700만 달러(약 370억 원) 규모의 Series A 투자를 유치했습니다. 무엇이 빅테크를 움직였는지, 1인 기업과 개발자에게 어떤 의미인지 정리해 봤습니다.

CopilotKit이란 무엇인가

CopilotKit은 "에이전트를 앱 네이티브 협업자로 만드는" 프론트엔드 스택입니다. GitHub 공식 설명은 "The Frontend Stack for Agents & Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol" 입니다.

핵심 발상은 단순합니다. 지금까지 대부분의 AI 에이전트는 백그라운드에서 돌면서 긴 텍스트 덩어리만 반환했습니다. 사용자가 무엇을 보고 있는지, 무엇을 하고 싶은지는 알지 못했죠. CopilotKit은 에이전트가 다음 세 가지를 하도록 만듭니다.

  • 본다(See): 앱의 현재 상태와 사용자 컨텍스트를 읽습니다.
  • 행동한다(Do): 앱 안에서 직접 행동을 취합니다.
  • 보여준다(Show): 글자가 아닌 인터랙티브 UI로 응답합니다.

라이선스는 상업적 활용이 자유로운 MIT, 주 언어는 TypeScript, 최신 릴리스는 v1.59.5(2026-06-05)입니다. React는 1급 지원이며 @copilotkit/react-core(로직·훅)와 @copilotkit/react-ui(즉시 사용 UI) 두 패키지로 시작합니다.

핵심 기능 네 가지

CopilotKit을 처음 본다면 다음 네 가지만 기억해도 충분합니다.

CopilotChat · Sidebar · Popup

즉시 쓸 수 있는 에이전트 채팅 UI 컴포넌트입니다. 사용자가 일하는 자리에 채팅 surface를 바로 배치합니다. 직접 채팅 UI를 만드느라 며칠을 쓸 필요가 없죠.

CopilotTextarea

AI 자동완성이 내장된 입력창입니다. 기존 HTML <textarea>를 그대로 갈아끼우는 drop-in 대체재라, 글쓰기·작성 폼에 AI를 붙이는 가장 빠른 방법입니다.

Frontend Actions

에이전트가 앱 UI를 직접 조작하게 하는 React 훅입니다(useCopilotAction, v2의 useFrontendTool). 에이전트의 의사결정과 실제 프론트엔드 인터랙션을 연결하는 다리 역할이죠. "버튼을 눌러줘"가 실제로 버튼을 누르는 동작이 됩니다.

Generative UI

CopilotKit의 킬러 기능입니다. 에이전트가 자체 React 컴포넌트(차트·폼·지도 등)를 실시간으로 렌더링합니다. 특히 agentic Generative UI는 단순 tool-calling이 아니라 에이전트의 state를 기반으로 작동해서, 에이전트가 지금 무엇을 하고 있는지를 화면에 가시화할 수 있습니다.

왜 빅테크가 AG-UI를 채택했나

CopilotKit이 단순한 React 라이브러리를 넘어선 이유는 AG-UI 프로토콜 때문입니다.

AG-UI(Agent–User Interaction)는 사용자 대면 앱과 임의의 agentic 백엔드 사이를 잇는 범용 양방향 표준입니다. 표준 HTTP 위로 메시지·tool call·state patch·lifecycle 신호를 담은 JSON 이벤트를 스트리밍하죠. UI 디자인 스펙이 아니라, UI 업데이트와 에이전트 state, 사용자 인터랙션이 흐르는 방식을 정의하는 이벤트 프로토콜입니다.

에이전트 표준은 보통 세 축으로 나뉩니다.

  • MCP(Model Context Protocol): 에이전트와 도구를 잇는다.
  • A2A(Agent-to-Agent): 에이전트끼리 잇는다.
  • AG-UI: 에이전트와 사람을 잇는다.

이 "에이전트↔사람" 축을 CopilotKit이 만들었고, 2026년 5월 기준 Google·Microsoft·Amazon·Oracle 네 곳이 AG-UI를 채택했습니다. 이 신뢰가 2,700만 달러(약 370억 원, $20M Series A + $7M seed) 투자로 이어졌고, CopilotKit 측은 포춘 500 기업 상당수가 이미 실전에서 사용 중이라고 밝혔습니다.

다른 도구와 무엇이 다른가

여기서 흔한 오해 하나를 짚고 넘어가야 합니다. CopilotKit은 LangGraph나 Vercel AI SDK의 직접 대체재가 아닙니다.

  • vs LangGraph: LangGraph가 에이전트의 *로직과 워크플로우(어떻게 동작하나)*를 정의한다면, CopilotKit은 그 워크플로우가 특정 앱 안에서 사람과 상호작용하는 인터페이스를 제공합니다. 실제로 CopilotKit의 CoAgents 기능은 LangGraph 기반 수직 에이전트를 앱에 깊이 임베드하며 shared state 스트리밍과 Human-in-the-Loop를 지원합니다.
  • vs Vercel AI SDK: Vercel AI SDK는 모델 호출·스트리밍 UI·tool calling에 강하지만 완결된 에이전트 워크플로우 프레임워크를 지향하진 않습니다. CopilotKit은 LangGraph 네이티브 agentic UI에 가장 완성도 높은 선택지로 평가받습니다.

즉 CopilotKit은 "에이전트 두뇌"가 아니라 "에이전트가 사람과 만나는 인터페이스 레이어"입니다.

1인 기업과 개발자에게 주는 의미

여기서 1인 기업과 소규모 팀이 주목할 지점이 나옵니다.

React로 만든 SaaS, 대시보드, 내부 툴이 있다고 해봅시다. 여기에 "AI 비서"를 붙이는 일은 예전엔 며칠짜리 프로젝트였습니다. 채팅 UI를 만들고, 스트리밍을 처리하고, 에이전트가 앱을 조작하게 배선하는 일 전부를 직접 해야 했으니까요.

CopilotKit은 이걸 컴포넌트 몇 개를 붙이는 몇 시간 작업으로 줄입니다. MIT 라이선스라 비용도 없고, 어떤 LLM(GPT·Claude 등)이든 연결할 수 있습니다. AI 자동화로 제품을 빠르게 검증해야 하는 1인 기업에게는 "AI 기능 추가"의 진입 장벽을 크게 낮춰주는 도구인 셈입니다.

정리하며

CopilotKit이 보여주는 흐름은 분명합니다. AI를 앱에 얹는 시대에서, 앱 안에 심는 시대로 넘어가고 있습니다. 채팅창 하나를 띄우는 걸 넘어, 에이전트가 내 앱을 이해하고 함께 일하는 방향이죠. Google·Microsoft·Amazon·Oracle이 같은 표준에 손을 얹었다는 사실이 이 방향에 무게를 더합니다.

지금 굴리고 있는 React 프로젝트가 있다면, CopilotKit과 AG-UI 프로토콜은 한 번 들여다볼 가치가 충분합니다. AI 기능을 다음 분기가 아니라 이번 주에 붙일 수 있을지 모르니까요.

참고 자료