AI 에이전트를 앱에 붙이면 왜 항상 채팅창 팝업이 될까요.
CopilotKit이 이 문제에 $2,700만을 베팅했습니다. 정답은 프로토콜 — 그리고 그 퍼즐의 마지막 조각이 방금 완성됐어요.
세 번째 프로토콜이 완성됐다
AI 에이전트 인프라에는 세 가지 통신 문제가 있어요.
첫 번째는 에이전트가 도구를 어떻게 쓰냐는 문제 — Anthropic이 만든 MCP(Model Context Protocol)가 해결했어요. Slack에서 이메일 보내고, GitHub에서 PR 올리는 그 연결고리죠.
두 번째는 에이전트끼리 어떻게 협력하냐는 문제 — Google의 A2A(Agent-to-Agent)가 맡았어요.
그런데 세 번째 문제가 남아 있었어요. 에이전트가 사용자와 어떻게 실시간으로 통신하냐는 것. 이 빈자리를 CopilotKit의 AG-UI가 채웠습니다.
AG-UI는 오픈소스 MIT 라이선스 프로토콜이에요. 에이전트가 사용자 인터페이스와 어떻게 대화할지 — 스트리밍으로 텍스트 보내기, 앱 상태 공유하기, 동적 UI 컴포넌트 만들기 — 이 모든 걸 표준화해요. LangGraph, CrewAI, Microsoft Agent Framework, Google ADK, AWS Strands, Mastra, PydanticAI까지 9개 이상의 주요 에이전트 프레임워크가 AG-UI를 지원하고 있어요.
"에이전트와 사용자 사이의 표준 인터페이스 — 인간과 AI 에이전트 사이에 지금까지 없었던 인프라 레이어."
— AG-UI 시리즈A 투자자
기존 챗봇 팝업이랑 뭐가 다른데?
솔직히 기존 방식은 이랬어요. 앱을 만들고, 그 위에 AI 채팅창을 덧붙이는 거. 에이전트는 앱이 지금 뭘 하고 있는지 몰라요. 사용자가 어떤 데이터를 보고 있는지, 어떤 작업을 하려는 건지 — 아무것도 공유되지 않아요.
| 기존 챗봇 팝업 | AG-UI 방식 | |
|---|---|---|
| 앱 상태 인식 | 불가 | 실시간 공유 |
| UI 생성 | 텍스트만 | 다이나믹 UI 컴포넌트 |
| 인간-루프 협업 | 제한적 | 사용자 승인 게이트 내장 |
| 프레임워크 지원 | 특정 벤더 락인 | 9+ 프레임워크 무관 |
| 엔터프라이즈 보안 | 직접 구현 | CORS·인증·감사 내장 |
AG-UI의 핵심 차별점은 에이전트가 앱 안에서 산다는 거예요. useCopilotReadable 훅으로 앱의 현재 상태를 에이전트와 공유하면, 에이전트가 "지금 이 사용자는 3분기 영업 데이터를 보고 있구나"를 알고 동작해요. 그리고 텍스트 응답 대신 개발자가 미리 정의한 파이차트 컴포넌트를 직접 렌더링할 수 있어요.
Deutsche Telekom, Docusign, Cisco, S&P Global이 이걸 쓰는 이유가 여기 있어요. 이미 쓰는 디자인 시스템 안에서 에이전트가 UI를 만들어내니까, 브랜드 일관성을 유지하면서 AI를 배포할 수 있거든요.
지금 당장 시작하는 법
사전 준비
React 기반 앱이 있으면 충분해요. Node.js 환경과 npm/yarn/pnpm 중 하나만 있으면 됩니다.
- 프로젝트 초기화
터미널에서npx copilotkit@latest create실행. 기존 Next.js/React 앱에 붙이려면npm install @copilotkit/react-core @copilotkit/react-ui. - CopilotKit Provider 감싸기
앱 최상단을<CopilotKit runtimeUrl="/api/copilotkit">로 감싸세요. 이게 에이전트와 UI 사이의 연결고리가 됩니다. - 앱 상태 공유하기
useCopilotReadable({ description: "현재 보고 있는 데이터", value: yourData })로 에이전트에게 컨텍스트를 줘요. 이 순간부터 에이전트가 앱 맥락을 알게 돼요. - 에이전트 백엔드 연결
LangGraph, Mastra, LangChain 중 이미 쓰는 프레임워크를 AG-UI 어댑터로 연결하세요. docs.copilotkit.ai에 각 프레임워크별 퀵스타트 가이드가 있어요. - 채팅 UI 또는 커스텀 UI 추가
<CopilotPopup />으로 빠르게 시작하거나, Generative UI로 에이전트가 직접 커스텀 컴포넌트를 렌더링하도록 설정해보세요.
주의
AG-UI는 에이전트-UI 통신 표준이에요. LLM API 키는 별도로 설정해야 해요 (OpenAI, Anthropic 등). CopilotKit 자체가 LLM을 제공하지는 않아요.
.png)
