Building Interactive Frontends for AI Agents with Amazon Bedrock AgentCore and AG-UI Protocol

도입

현대의 AI 에이전트는 단순한 대화 기능을 넘어 다양한 기능을 제공할 수 있습니다. 적절한 프로토콜을 사용한다면, 에이전트는 대화 중에 상호작용 가능한 차트를 렌더링하고, 실시간으로 공유 캔버스를 업데이트하며, 작업을 진행하기 전에 사용자의 승인을 요청할 수 있습니다. 이러한 기능은 에이전트 백엔드와 프론트엔드가 동적으로 이벤트를 통신하는 표준 방법이 필요합니다. AG-UI 프로토콜은 이러한 상호작용을 위한 개방형 프로토콜로 설계되었습니다. Amazon Bedrock AgentCore는 이러한 기능을 대규모로 안전하게 구현할 수 있는 플랫폼을 제공합니다.

본론

Amazon Bedrock AgentCore와 AG-UI 프로토콜 활용

Amazon Bedrock AgentCore는 AI 에이전트를 구축, 배포 및 운영할 수 있는 강력한 플랫폼입니다. AG-UI 프로토콜을 통해 에이전트의 코드와 프론트엔드 코드를 분리할 수 있어, 백엔드를 위한 최상의 프레임워크와 프론트엔드를 위한 최상의 라이브러리를 선택할 수 있습니다. AG-UI는 다양한 에이전트 프레임워크 및 프론트엔드 라이브러리와 함께 작동하여 확장성이 뛰어난 애플리케이션 개발을 지원합니다.

활용 사례: FAST와 CopilotKit

• FAST(Fullstack AgentCore Solution Template): 이 프로젝트는 AgentCore Runtime, Gateway, Identity, Memory, Code Interpreter와 AWS Cloud Development Kit(CDK)를 사용하여 React 프론트엔드와 함께 배포 가능한 스타터 프로젝트입니다. 두 개의 AG-UI 패턴(aqui-strands-agent 및 agui-langgraph-agent)을 포함하여 단일 프론트엔드 파서가 두 에이전트 패턴을 지원합니다.

• CopilotKit: CopilotKit은 AG-UI를 통해 생성적인 UI와, 공유 상태, 인간과의 상호작용을 포함한 상호작용 방식의 프론트엔드를 구축할 수 있는 React 라이브러리입니다. 이는 크바그래프 및 스트랜드 에이전트 패턴에 모두 적용 가능하며, 확장 가능한 구조를 제공합니다.

CopilotKit 샘플 아키텍처

위의 아키텍처는 브라우저와 AgentCore Runtime 간의 서버 측 브리지를 제공합니다. 이는 AG-UI 이벤트 파싱, 생성적 UI 라우팅, 인증 전달을 처리합니다.

결론

Amazon Bedrock AgentCore와 AG-UI 프로토콜을 통한 인터랙티브 에이전트 프론트엔드를 구축하는 방법을 살펴보았습니다. AG-UI 통합을 통해 프론트엔드 코드를 변경하지 않고 Strands 및 LangGraph 에이전트 백엔드를 상호 교환할 수 있습니다. CopilotKit 샘플은 생성적 UI, 공유 상태, 인간-교차 상호작용을 포함한 기능을 확장하여 AgentCore와 함께 사용 가능하게 합니다.

[1] https://aws.amazon.com/blogs/machine-learning/build-generative-ui-for-ai-agents-on-amazon-bedrock-agentcore-with-the-ag-ui-protocol/