CopilotKit: SaaS 앱 내 AI 챗봇이 가진 문제점

한국어العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語PortuguêsРусский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00대부분의 AI 기능과 앱은 똑같은 문제를 가지고 있습니다. 보기엔 좋지만 실제로는 그냥 채팅창에 불과하죠.
00:00:06화면 한쪽에 붙어 있어서, 뭔가를 물어보면 마크다운이나 표를 보여주고,
00:00:11심지어 여러분이 해야 할 일을 몇 문단으로 설명해주기도 하죠. 하지만 에이전트가 그냥 말만 하는 게 아니라면 어떨까요?
00:00:17이것은 Copilot Kit입니다. 실제 컴포넌트를 렌더링하고, 앱과 실시간 상태를 공유하며,
00:00:23무언가를 변경하기 전에 승인을 요청할 수 있죠. 과연 AI 기능을 더 제품의 일부처럼
00:00:29느껴지게 만들 수 있을까요? 한번 알아보죠.
00:00:37먼저 많은 사람들이 앱에 AI를 추가한다고 생각하지만, 실제로는 앱 내부에
00:00:43두 번째 앱을 하나 더 넣는 것과 같습니다. 여러분의 제품은 저쪽에 있고 AI는 여기 있어서, 사용자는
00:00:49뭔가 제대로 작동하게 하려면 머릿속으로 맥락을 계속 옮겨가며 복사해야 합니다. 그냥 기본적인
00:00:54Q&A 구조만 필요하다면 괜찮지만, 에이전트가 상태를 업데이트하게 하거나
00:01:00도구를 호출하거나 실제 워크플로우 속에서 사용자와 함께 작업하게 하려는 순간 벽에 부딪히게 됩니다. 이제 여러분은
00:01:07스트리밍 이벤트, 상태 동기화, 승인 절차 등을 만들게 되고, 다들 조금씩 다른 방식으로
00:01:14같은 기능을 다시 만들고 있죠. Copilot Kit은 이 문제를 정면으로 다룹니다. 어떻게 하면 더 나은 챗봇을 만들까가 아니라,
00:01:20어떻게 하면 에이전트가 앱 내부에서 네이티브처럼 느껴지게 할까를 고민합니다. 데모부터 시작해서,
00:01:26무엇이 진짜이고, 무엇이 유용하며, 무엇이 좀 과한 것인지 분석해보겠습니다. 만약 여러분이
00:01:32워크플로우를 빠르게 해줄 코딩 도구를 좋아하신다면 구독해주세요. 계속해서 영상이 올라옵니다. 자, 그럼
00:01:37이제 보시죠. 깨끗한 터미널에서 시작해 Copilot Kit에서 가져온 설치 명령어를 실행합니다.
00:01:42이것이 앱을 스캐폴딩하고 제대로 시작할 수 있는 지점을 제공해주죠. 우리가 보통 진짜 시작하는
00:01:49다른 프로젝트들과 똑같습니다. 그냥 빈 채팅 말풍선이 아니라, 프론트엔드 조각들이 이미
00:01:56서로 연결되어 있어서 우리가 원하는 실제 경험을 바로 테스트해볼 수 있습니다. 이제 개발 모드를 실행하면,
00:02:02자, 로컬에서 실행 중인 앱입니다. 물론 이 부분은 익숙하죠. 채팅창이 있네요.
00:02:09하지만 이게 정말 흥미로운 부분의 전부는 아닙니다. 진짜 멋진 부분은
00:02:13에이전트가 UI와 연결되었을 때 일어나는 일이죠. 인터페이스에 질문을 하나 해보겠습니다. 자, 여기 보면요.
00:02:21여기서 중요한 점을 주목하세요. 에이전트는 그냥 텍스트 덩어리로만 답하는 게 아닙니다. 응답을 스트리밍하고,
00:02:26도구를 호출하고, 앱 내에서 실제 컴포넌트를 렌더링할 수 있습니다. 이게 Copilot Kit에서
00:02:32가장 큰 변화입니다. 이제 AI는 인터페이스를 설명만 하는 게 아니라, 그 일부가 된 거죠.
00:02:38이제 한 단계 더 나아가 보죠. 여기 팔로업 질문을 하나 해볼게요.
00:02:46자, 여기서 다른 많은 에이전트들은 그냥 넘어갈 부분을 보세요. 우리 에이전트는 잠시 멈추고 승인을 요청합니다.
00:02:52승인을 요청한다는 바로 그 점이 중요한 겁니다. 제가 정말 좋아하는 부분이죠. 왜냐하면
00:02:57실제 소프트웨어에서 제어권은 선택 사항이 아니니까요. 우리 사용자들에겐 여전히 최종 결정권이 필요합니다.
00:03:03자, 데모 멋졌죠? Copilot Kit을 설명하는 가장 쉬운 방법은 이것입니다. Copilot Kit은
00:03:09에이전트 앱을 위한 프론트엔드 스택입니다. 그냥 채팅 컴포넌트도 아니고, 다른 LLM API의 래퍼도 아닙니다.
00:03:15제품 내부에 존재하는 AI 경험을 만드는 데 필요한 모든 조각을 제공합니다. 여기서 알아야 할
00:03:23네 가지 요소가 있습니다. 첫 번째는 AGUI입니다. AGUI는 에이전트와 프론트엔드가 대화하는 방식을 위한
00:03:31개방형 이벤트 기반 프로토콜입니다. 지금 에이전트 툴링은 연결 문제가 있습니다. LangGraph,
00:03:37CrewAI, 사용자 지정 에이전트, 그리고 오늘 아침에 새로 나온 프레임워크까지, 다들
00:03:43우리 앱에 넣어보려고 하죠. 그러면서 React 앱, 모바일 앱, 대시보드 등 온갖 것들을
00:03:48저글링하고 있습니다. 모두 공유 프로토콜 없이 처리되고 있죠.
00:03:55모든 백엔드가 프론트엔드마다 커스텀 코드를 짜야 합니다. AGUI는 에이전트와 인터페이스 사이의 공유
00:04:01언어가 되려 합니다. 메시지, 상태 업데이트, 도구 호출, UI 이벤트 등이 모두 공통 이벤트 스트림을 통해 흐르죠.
00:04:07그다음은 생성형 UI입니다. 모델이 텍스트만 반환하는 대신 에이전트가
00:04:14실제 컴포넌트를 트리거할 수 있죠. 무작위 HTML이 아니라, 필요한 순간에 여러분의 UI가 렌더링되는 것입니다. 그 다음은 공유
00:04:22상태, 혹은 Copilot Kit이 부르는 Co-Agents입니다. 프론트엔드와 에이전트 백엔드가 양방향으로
00:04:29상태를 공유할 수 있죠. 사용자가 뭔가를 바꾸면 에이전트가 반응하고, 에이전트가 업데이트하면 UI가
00:04:35반영합니다. 사용자와 에이전트가 같은 객체를 가지고 작업하는 도구, 대시보드 등을 만들 때 정말 엄청난 기능입니다.
00:04:41마지막으로 휴먼 인 더 루프입니다. 이건 정말 중요한 부분입니다.
00:04:47많은 에이전트 데모들이 마치 완전한 자율성이 최고의 경험인 것처럼 굴지만, 실제로는
00:04:52꼭 그렇지는 않습니다. 실제 제품에서 사용자들은 권한과 통제권을 원합니다.
00:04:59전송 전 확인, 생성 전 승인, 옵션 선택 등등 이 모든 것을 Copilot이 지원합니다.
00:05:05물론 모든 사람에게 Copilot이 정답은 아닙니다. Vercel AI SDK 같은 것과 비교하면,
00:05:10Copilot Kit은 더 '배터리 포함' 방식입니다. 스트리밍 채팅,
00:05:17생성형 UI, 상태 공유, 인간 승인 패턴을 바로 사용할 수 있죠. Copilot Kit은
00:05:23완전한 제품 레이어에 가까워지고 있습니다. Vercel AI SDK는 더 가볍고, 더 낮은 레벨의 제어권을 제공하죠.
00:05:31아키텍처의 모든 부분을 직접 관리하고 싶다면, 그쪽이 훨씬 더 적합할 겁니다. 하지만
00:05:38Copilot Kit과 직접 모든 것을 구축하는 것을 비교한다면, 후자가 이기기 정말 어렵습니다.
00:05:43왜냐하면 어려운 부분은 채팅 말풍선을 렌더링하는 게 아니거든요. 그건 이제 쉬운 일이 됐죠.
00:05:49어려운 건 그 주변의 모든 것들입니다. 물론 트레이드 오프는 있습니다. 가벼운 AI SDK보다는
00:05:54무겁게 느껴질 수 있고, Copilot Kit의 패턴을 따라야 하죠. 또, 일정 부분은 무료지만,
00:06:02솔로 프로젝트로 놀 때는 정말 멋지지만, 규모를 키우려고 할 때는 다 무료가 아니라는 점이
00:06:08조금 짜증날 수도 있습니다. 혹시 이 기능에 대한 완전한 오픈 소스 대안을 아신다면
00:06:14댓글로 알려주세요. 저도 지금 찾고 있거든요.
00:06:19Copilot Kit을 쓸 때는 무엇이 오픈 소스인지, 무엇이 키가 필요한지,
00:06:25무엇이 호스팅되고 유료인지 이해해야 합니다. 이건 Copilot을 비난하려는 게 아니라,
00:06:32무료인지 아닌지를 이해해야 한다는 거죠. 단순한 지원용 챗봇만 필요하다면 Copilot Kit은
00:06:38아마 과할 겁니다. 하지만 에이전트가 여러분의 UI와 앱 상태를 가지고 작업하는 에이전트 UX를 원한다면
00:06:44정말 멋진 도구입니다. 그러니 Copilot Kit을 써야 할까요? 만약 여러분이 진지한 인앱 AI를 만들고 있다면
00:06:50한번 시도해보세요. 특히 React나 Next.js를 사용 중이고, AI가 단순히 사이드 패널이 아니라
00:06:56제품의 일부처럼 느껴지길 원한다면 아주 좋습니다. 정말 빠르게 시작할 수 있고,
00:07:02다양한 컴포넌트 덕분에 워크플로우에 적용하기가 매우 실용적입니다. 만약 이미
00:07:07본인만의 스트리밍, 상태 관리, 도구 호출 UI를 이미 구현했다면 바꿀 가치가 없을 수도 있습니다. 그리고 만약 여러분의
00:07:13기능이 말 그대로 질문하고 답변받는 게 전부라면 Copilot Kit은 너무 과한 도구가 될 것입니다.
00:07:19그럴 땐 전체 에이전트 프론트엔드 스택까지는 필요 없으니, 그냥 더 가벼운 걸 쓰세요. 자, 개발해서 출시하세요.
00:07:25계속 앞으로 나아가세요. 이런 코딩 도구들이 재미있었다면 Better Stack 채널을 구독해주세요.
00:07:30다음 영상에서 뵙겠습니다.

Key Takeaway

Copilot Kit은 AI 에이전트가 앱의 네이티브 인터페이스와 직접 상호작용하고 실시간으로 상태를 동기화할 수 있도록 지원함으로써, 단순 채팅창을 넘어선 통합형 인앱 AI 경험을 구현한다.

Highlights

  • 대부분의 SaaS 내 AI 챗봇은 앱과 분리된 독립적인 채팅창으로 작동하여 사용자가 맥락을 직접 복사해야 하는 불편함이 있다.

  • Copilot Kit은 AI 에이전트가 인터페이스와 실시간으로 상태를 공유하고 실제 컴포넌트를 렌더링하는 에이전트 앱 전용 프론트엔드 스택을 제공한다.

  • AGUI(Agent-to-UI) 프로토콜은 에이전트와 프론트엔드 간의 메시지, 상태 업데이트, 도구 호출 등을 공통 이벤트 스트림으로 처리하여 커스텀 코드 작성을 줄여준다.

  • 실제 제품 워크플로우를 위해 에이전트 작업 전 사용자 승인을 요청하는 'Human-in-the-Loop' 기능을 내장하고 있다.

  • 단순한 Q&A 기반의 AI 기능이 아니라 사용자가 앱 상태를 AI와 함께 조작해야 하는 복잡한 에이전트 UX 구축에 적합하다.

Timeline

기존 인앱 AI 챗봇의 한계와 문제점

  • 기존 앱 내 AI 기능은 실제 제품과는 분리된 별도의 채팅창으로 작동한다.
  • 사용자는 AI와 상호작용하기 위해 데이터 맥락을 머릿속으로 유지하거나 복사해야 한다.
  • 복잡한 에이전트 워크플로우를 구현하려면 스트리밍 이벤트와 상태 동기화를 매번 직접 새로 작성해야 한다.

대부분의 AI 기능은 UI 한쪽에 붙어 마크다운이나 표 형태로 텍스트 정보만 보여주는 수준에 머물러 있다. 이는 앱과 AI가 상호 연결되지 않아 파편화된 경험을 제공한다. 에이전트가 도구를 호출하거나 실제 앱 상태를 변경해야 하는 상황에서는 기존의 챗봇 구조가 병목 현상을 유발한다.

Copilot Kit의 핵심 기술과 구성 요소

  • Copilot Kit은 에이전트 앱을 위한 프론트엔드 스택으로 앱 내부 AI 구축 과정을 단순화한다.
  • AGUI 프로토콜을 통해 AI 에이전트가 인터페이스와 상태를 공유하며 직접 컴포넌트를 렌더링한다.
  • Co-Agents 기능을 통해 프론트엔드와 백엔드 간 양방향 상태 동기화가 가능하다.
  • 사용자가 최종 결정권을 행사할 수 있도록 에이전트 작업 실행 전 승인 절차를 지원한다.

개발자가 채팅 말풍선 렌더링에 시간을 쏟는 대신 실제 에이전트 UX 구현에 집중할 수 있도록 돕는다. 특히 AI 모델이 텍스트 대신 실제 UI 컴포넌트를 직접 트리거하게 하여 사용자가 앱을 조작하는 듯한 네이티브한 경험을 제공한다.

도구 선택을 위한 트레이드 오프와 사용 사례

  • Vercel AI SDK는 저수준 제어권을 제공하는 가벼운 도구이며 Copilot Kit은 모든 기능이 포함된 제품 레이어에 가깝다.
  • Copilot Kit은 에이전트가 사용자 UI와 앱 상태를 조작해야 하는 경우에 가장 큰 효용을 제공한다.
  • 단순한 Q&A 챗봇 수준의 기능만 필요하다면 Copilot Kit은 과한 도구일 수 있다.

자신만의 스트리밍이나 도구 호출 로직을 이미 구현했다면 굳이 전환할 필요가 없다. 하지만 복잡한 상태 관리와 승인 절차가 포함된 전문적인 인앱 AI 에이전트 서비스를 구축하려는 경우에는 효율적인 대안이 된다. 솔로 프로젝트 이후 규모 확장을 고려할 때 유료 정책을 확인하는 것이 권장된다.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video