본문으로 건너뛰기

AG-UI로 Amazon Bedrock AgentCore에 대화형 에이전트 프런트엔드 구축하기

AG-UI 프로토콜을 통해 AgentCore 위에서 에이전트와 프런트엔드를 분리하여 대화형 UI, 공유 상태, 인간 승인 흐름을 지원한다.

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

대화형 에이전트는 대화 중 차트 렌더링, 공유 캔버스 실시간 갱신, 사용자 승인 흐름 등 동적 UI와 상태 동기화를 필요로 하며 AG-UI는 이를 규정하는 오픈 프로토콜이다. Amazon Bedrock AgentCore Runtime은 AG-UI를 포함한 여러 에이전트 프로토콜을 지원하면서 인증(SigV4 또는 OAuth2/Cognito), 세션 격리, 스케일링, 관측성을 프록시 수준에서 제공하고 에이전트 컨테이너는 POST /invocations와 GET /ping을 포트 8080에서 노출해야 한다. FAST 템플릿은 AgentCore와 프런트엔드 및 인증을 AWS CDK로 결합한 배포용 스타터로서 FAST v0.4.1에서 agui-strands-agent와 agui-langgraph-agent 패턴을 추가하여 단일 프런트엔드 파서로 다중 프레임워크를 처리할 수 있게 만들었다. CopilotKit은 FAST의 기본 채팅 UI를 대체하여 인라인 생성형 컴포넌트, 양방향 공유 상태, 인간 승인 흐름을 AgentCore 환경에 배포하는 샘플을 제공해 대화형 애플리케이션의 상호작용 범위를 확장한다.

섹션별 상세

01
대화형 에이전트는 단순 채팅을 넘어서 대화 중에 차트를 렌더링하거나 공유 캔버스를 실시간으로 갱신하고 실행 중 일시정지 후 사용자의 승인을 받는 동작을 요구한다는 문제의식이 존재한다. AG-UI는 이러한 동적 이벤트를 프런트엔드로 전달하기 위한 표준 프로토콜로 설계되어 에이전트 백엔드와 프런트엔드의 결합도를 낮춘다. 이 프로토콜은 Strands Agents, LangGraph, CrewAI 같은 여러 에이전트 프레임워크와 React, Angular, Vue 같은 다양한 프런트엔드 라이브러리와 작동하도록 규정되어 있다. 에이전트와 UI를 분리하면 백엔드와 프런트엔드에서 최적의 도구를 독립적으로 선택하면서도 상호운용성을 확보할 수 있다.
02
Amazon Bedrock AgentCore Runtime은 에이전트를 위한 보안적이고 서버리스 방식의 호스팅 환경으로서 인증, 세션 격리, 스케일링, 관측성을 처리하는 투명한 프록시 역할을 수행한다는 점이 핵심이다. AgentCore는 여러 에이전트 프로토콜을 지원하며, 그 중 Model Context Protocol(MCP)은 도구 연동을, Agent2Agent(A2A)는 에이전트 간 통신을, AG-UI는 사용자와의 상호작용을 담당한다. 에이전트 컨테이너는 AG-UI 플래그로 배포될 때 POST /invocations와 GET /ping(포트 8080)을 노출하도록 요구되며 AgentCore는 요청을 변경하지 않고 전달한다. 이 구조는 인증 방식으로 SigV4 또는 OAuth 2.0(Cognito)을 사용하여 안전한 요청 전파와 운영 시 편의성을 동시에 확보하게 한다.
text
POST /invocations
GET /ping
port: 8080

AgentCore에 배포된 에이전트 컨테이너가 수신해야 하는 엔드포인트와 포트를 짧게 표기한 예시

03
Fullstack AgentCore Solution Template(FAST)는 AgentCore Runtime, Gateway, Identity, Memory, Code Interpreter와 React 프런트엔드를 AWS CDK로 정의해 즉시 배포 가능한 스타터 프로젝트를 제공한다. FAST는 Strands Agents, LangGraph, Claude Agent SDK 같은 에이전트 패턴을 포함하며 FAST v0.4.1에서는 agui-strands-agent와 agui-langgraph-agent라는 두 개의 AG-UI 패턴을 추가하여 단일 프런트엔드 파서를 통해 다수 프레임워크를 처리할 수 있게 구성되었다. 이 설계는 프런트엔드 쪽에서 어떤 에이전트 프레임워크가 실행되는지 알 필요 없이 동일한 UI 파서를 재사용하게 하여 개발·유지보수 비용을 절감한다. 템플릿은 AWS CDK로 인프라를 코드화해 배포 반복성과 재현성을 제공한다.
04
CopilotKit은 FAST의 기본 채팅 UI를 대체하여 생성형 UI 요소와 양방향 공유 상태, 인간 승인 흐름을 추가로 제공하는 샘플 구현이다. CopilotKit은 인라인 차트와 컴포넌트 렌더링, 할 일(todo) 캔버스와 같은 공유 상태 동기화를 지원하며 사용자가 작업 흐름 중간에 승인을 요구하도록 에이전트 실행을 일시정지할 수 있는 흐름을 포함한다. 이 기능들은 모두 Amazon Bedrock AgentCore 위에 배포되어 AgentCore가 인증과 세션 관리를 처리하는 환경에서 동작한다. 결과적으로 사용자 상호작용이 복합적인 애플리케이션에서 프런트엔드와 에이전트 간의 실시간 협업을 가능하게 한다.

용어 해설

AG-UI (Agent-User Interaction Protocol)(AG-UI)
에이전트 백엔드와 프런트엔드 간의 동적 이벤트와 대화형 컴포넌트를 교환하기 위한 오픈 프로토콜로, 다양한 에이전트 프레임워크와 프런트엔드 라이브러리를 분리된 상태로 연결하여 UI 렌더링, 공유 상태 업데이트, 사용자 승인 흐름을 지원한다.
AgentCore
Amazon Bedrock의 에이전트 호스팅 런타임으로, 에이전트 컨테이너를 투명한 프록시로 배치하여 인증(SigV4 또는 OAuth2/Cognito), 세션 격리, 오토스케일링, 관측성을 처리하며 AG-UI 같은 프로토콜을 통해 에이전트와 외부 인터페이스를 연결한다.
Fullstack AgentCore Solution Template (FAST)
AgentCore Runtime, Gateway, Identity, Memory, Code Interpreter와 React 프런트엔드를 AWS CDK로 묶은 배포용 스타터 템플릿으로, Strands, LangGraph 등 에이전트 패턴과 AG-UI 통합 샘플을 포함하여 빠른 시작과 참조 아키텍처를 제공한다.
Model Context Protocol (MCP)(Model Context Protocol)
에이전트가 외부 도구와 상호작용할 때 컨텍스트와 도구 연결을 표준화하는 프로토콜로, AgentCore 환경에서 도구 연동을 관리하는 주요 통신 규약 중 하나이다.
Agent2Agent (A2A)
에이전트 간 직접 통신을 위해 정의된 프로토콜로, 여러 에이전트가 상호작용하여 복합 작업을 협업 방식으로 수행할 수 있도록 메시지 전달과 작업 위임을 규정한다.
CopilotKit
FAST 샘플을 대체하는 별도 샘플로서 생성형 UI 요소와 양방향 공유 상태, 인간 승인 흐름을 AgentCore에 배포하는 구성요소 집합으로, 대화형 컴포넌트와 상태 동기화를 중심으로 동작한다.

기술

  • AG-UI
  • Amazon Bedrock AgentCore
  • Fullstack AgentCore Solution Template (FAST)
  • CopilotKit
  • React
  • AWS CDK
  • Amazon Cognito
  • Strands Agents
  • LangGraph
  • CrewAI

활용 사례

  • 대화형 UI에서 인라인 차트 및 컴포넌트 렌더링
  • 프런트엔드와 백엔드 간 양방향 공유 상태 동기화
  • 에이전트 실행 중간에 사용자 승인을 요청하는 human-in-the-loop 워크플로
  • 다양한 에이전트 프레임워크를 단일 프런트엔드로 통합하는 애플리케이션
AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 07. 01.수집 2026. 07. 01.출처 타입 RSS

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.