Introducing Angular support for CopilotKit: bring any Agent into your app

개요

CopilotKit이 Angular 지원을 새롭게 출시하여, Angular 애플리케이션에서 AG-UI 프로토콜을 따르는 모든 에이전트를 스트리밍, 도구 호출, 공유 상태 관리 기능을 포함하여 실행할 수 있게 되었습니다.

주요 내용

* Angular 지원 출시: CopilotKit의 오픈 소스 클라이언트가 Angular와 통합되어, AG-UI 에이전트를 Angular 앱에 쉽게 통합할 수 있습니다. Angular의 자체 패턴, 독립형 컴포넌트, 의존성 주입, 시그널을 활용하여 구축되었습니다.
* 에이전트 네이티브 앱 빌딩 블록: 사전 구축된 채팅 컴포넌트, 완전한 헤드리스 설정, 생성적 UI, 공유 상태, Human-in-the-loop, 멀티모달 첨부 파일, 스레드 등의 기능을 제공합니다.
* AG-UI 프로토콜: 모든 실행은 Agent-User Interaction Protocol (AG-UI) 위에서 이루어지며, 에이전트의 전체 생명주기를 이벤트로 스트리밍하여 Angular 앱과 에이전트 간의 동기화를 유지합니다. BuiltInAgent, LangGraph, Google ADK, Mastra, Pydantic AI, Claude Agents SDK 등 AG-UI를 지원하는 프레임워크와 연결 가능합니다.
* 아키텍처: Angular 앱은 브라우저 측을 담당하고, Copilot Runtime (Node.js 서버)은 모델 키를 안전하게 관리하며 에이전트와 연결되어 이벤트를 스트리밍합니다. AG-UI 아래의 모든 구성 요소는 교체 가능합니다.
* CopilotKit 설정: CLI를 사용하여 Google ADK 에이전트가 포함된 전체 스타터 Angular 앱을 스캐폴딩할 수 있습니다 (npx copilotkit@latest init --framework adk-angular). 수동 설정 시에는 클라이언트 설치, provideCopilotKit 설정, 스타일시트 임포트, 컴포넌트 통합의 4단계가 필요합니다.
* UI 옵션: 사전 구축된 copilot-chat 컴포넌트, CopilotThreadsDrawer, CopilotChatMessageView, CopilotChatInput 등을 조합하여 UI를 구성하거나, injectAgentStore()를 사용하여 완전히 헤드리스 UI를 직접 구축할 수 있습니다.
* 생성적 UI (Generative UI): 에이전트가 실시간으로 인터페이스를 구축할 수 있게 하는 기능으로, 미리 작성된 컴포넌트 선택, 카탈로그로부터의 컴포넌트 조립, 또는 자체적으로 전체 UI 생성까지 가능합니다. ToolRenderer 인터페이스를 통해 사용자 정의 컴포넌트를 에이전트 도구 호출에 연결할 수 있습니다.
* 멀티모달 첨부 파일: 이미지, 오디오, 비디오, 문서와 같은 첨부 파일을 메시지와 함께 에이전트에게 보낼 수 있습니다. AttachmentsConfig를 통해 업로드 기능, MIME 필터, 파일 크기 제한 등을 설정할 수 있으며, onUpload 콜백을 사용하여 파일을 사용자 정의 스토리지에 업로드하고 URL을 에이전트에게 제공할 수 있습니다.
* Human-in-the-loop: 삭제 또는 이메일 발송과 같은 중요한 작업의 경우, 에이전트 실행을 일시 중지하고 사용자의 승인을 기다리도록 설정할 수 있습니다. HumanInTheLoopToolCall 컴포넌트를 통해 승인 또는 취소 기능을 제공합니다.
* 공유 상태 (Shared State):
* 에이전트 상태: 에이전트가 상태를 소유하고, UI가 이를 읽고 쓸 수 있습니다. injectAgentStore()를 통해 시그널로 상태를 가져오고, setState()로 상태를 업데이트합니다.
* 앱 컨텍스트: 앱이 상태를 소유하고, 에이전트가 이를 읽습니다. connectAgentContext()를 사용하여 에이전트에게 앱의 현재 상태를 전달합니다.
* 프론트엔드 도구: 에이전트가 앱 컨텍스트를 기반으로 행동할 수 있도록 프론트엔드 도구를 등록할 수 있습니다. Zod 스키마를 사용하여 인자를 타입화하고, 브라우저에서 실행되는 핸들러를 정의합니다.

시사점

CopilotKit의 Angular 지원은 개발자가 복잡한 AI 에이전트 기능을 Angular 애플리케이션에 쉽게 통합할 수 있도록 하여, 생성적 UI, 멀티모달 상호작용, Human-in-the-loop와 같은 고급 AI 기능을 활용한 사용자 경험을 향상시킬 수 있는 새로운 가능성을 열어줍니다.