🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 요약

이 글은 AG-UI 프로토콜을 사용해 Amazon Bedrock AgentCore와 FAST, CopilotKit 위에서 프런트엔드와 에이전트 백엔드를 분리한 채 생성형 UI, 공유 상태, 사람 개입형 상호작용을 구현하는 방식을 설명한다.

📌 핵심 요약

• AG-UI는 에이전트가 단순 채팅을 넘어 인라인 차트, 실시간 공유 캔버스, 실행 중 승인 요청 같은 동적 상호작용을 프런트엔드에 전달하기 위한 공개 프로토콜이다.
• Amazon Bedrock AgentCore Runtime은 AG-UI 요청을 투명하게 프록시하면서 인증, 세션 격리, 확장, 관측성을 처리하고, 컨테이너는 정해진 호출 및 헬스체크 엔드포인트를 제공한다.
• FAST v0.4.1은 Strands Agents와 LangGraph를 위한 AG-UI 패턴을 추가했으며, 두 백엔드가 같은 AG-UI 이벤트를 내보내므로 프런트엔드는 단일 파서로 처리할 수 있다.
• Strands 패턴과 LangGraph 패턴은 각각 프레임워크별 실행 이벤트를 AG-UI Server-Sent Events로 변환하며, 호출자별 도구 범위와 선택적 AgentCore Memory 연동을 지원한다.
• CopilotKit + FAST 샘플은 기본 채팅 UI를 확장해 React 컴포넌트 렌더링, 양방향 공유 상태, 실행 중 사용자 입력 대기를 구현하며, AG-UI가 이벤트와 상태 스트림을 표준화하는 계층임을 보여준다.

🧩 주요 포인트

1. AG-UI는 에이전트가 단순 채팅을 넘어 인라인 차트, 실시간 공유 캔버스, 실행 중 승인 요청 같은 동적 상호작용을 프런트엔드에 전달하기 위한 공개 프로토콜이다.
2. Amazon Bedrock AgentCore Runtime은 AG-UI 요청을 투명하게 프록시하면서 인증, 세션 격리, 확장, 관측성을 처리하고, 컨테이너는 정해진 호출 및 헬스체크 엔드포인트를 제공한다.
3. FAST v0.4.1은 Strands Agents와 LangGraph를 위한 AG-UI 패턴을 추가했으며, 두 백엔드가 같은 AG-UI 이벤트를 내보내므로 프런트엔드는 단일 파서로 처리할 수 있다.
4. Strands 패턴과 LangGraph 패턴은 각각 프레임워크별 실행 이벤트를 AG-UI Server-Sent Events로 변환하며, 호출자별 도구 범위와 선택적 AgentCore Memory 연동을 지원한다.
5. CopilotKit + FAST 샘플은 기본 채팅 UI를 확장해 React 컴포넌트 렌더링, 양방향 공유 상태, 실행 중 사용자 입력 대기를 구현하며, AG-UI가 이벤트와 상태 스트림을 표준화하는 계층임을 보여준다.

🧠 상세 정리

1. 채팅을 넘어선 에이전트 UI의 필요성

글은 AI 에이전트가 단순히 텍스트로 대화하는 수준을 넘어설 수 있다는 문제의식에서 출발한다. 올바른 프로토콜이 있으면 에이전트는 대화 안에 인터랙티브 차트를 직접 렌더링하거나, 여러 사용자가 보는 캔버스를 실시간으로 업데이트하거나, 실행 중간에 사용자의 승인을 요청하고 기다릴 수 있다. 이런 생성형 UI, 공유 상태, 사람 개입형 흐름은 모두 백엔드 에이전트가 프런트엔드로 동적 이벤트를 전달해야 한다는 공통점을 가진다. 따라서 글의 핵심 주제는 이런 상호작용을 임시 구현으로 처리하지 않고 표준화된 통신 방식으로 연결하는 것이다.

2. AG-UI의 역할과 프레임워크 분리

AG-UI, 즉 Agent-User Interaction Protocol은 에이전트 백엔드와 사용자 인터페이스 사이의 동적 이벤트 전달 방식을 정의하는 공개 프로토콜로 소개된다. 이 프로토콜은 Strands Agents, LangGraph, CrewAI 같은 여러 에이전트 프레임워크와 React, Angular, Vue 같은 프런트엔드 라이브러리 사이에서 동작할 수 있다. 글은 AG-UI의 가장 중요한 장점으로 백엔드 코드와 프런트엔드 코드의 결합도를 낮추는 점을 강조한다. 개발자는 백엔드에는 적합한 에이전트 프레임워크를, 프런트엔드에는 원하는 UI 라이브러리를 선택하고, 두 계층의 연결은 AG-UI 이벤트 스트림에 맡길 수 있다.

3. AgentCore Runtime에서 AG-UI가 배치되는 방식

Amazon Bedrock AgentCore는 생성형 AI 에이전트를 안전하게 대규모로 구축, 배포, 운영하기 위한 플랫폼으로 설명된다. 그중 AgentCore Runtime은 에이전트나 도구를 실행하기 위한 보안형 서버리스 호스팅 환경을 제공하며, MCP, A2A, AG-UI 등 여러 프로토콜을 지원한다. MCP는 에이전트와 도구를 연결하고, A2A는 에이전트와 다른 에이전트를 연결하며, AG-UI는 에이전트와 사용자를 연결하는 역할로 구분된다. AG-UI 프로토콜 플래그로 에이전트 컨테이너를 배포하면 AgentCore는 인증, 세션 격리, 확장, 관측성을 맡고 요청은 변경하지 않은 채 컨테이너로 전달한다.

4. FAST 템플릿과 두 개의 AG-UI 패턴

FAST는 바로 배포 가능한 스타터 프로젝트로, AgentCore Runtime, Gateway, Identity, Memory, Code Interpreter를 React 프런트엔드 및 Amazon Cognito 인증과 연결한다. 이 구성은 AWS CDK로 정의되며, 기존에는 Strands Agents, LangGraph, Claude Agent SDK를 위한 에이전트 패턴을 포함한다. 글에서 다루는 FAST v0.4.1은 여기에 agui-strands-agent와 agui-langgraph-agent라는 두 개의 AG-UI 패턴을 추가했다. 중요한 점은 두 패턴이 서로 다른 백엔드 프레임워크를 사용하더라도 동일한 프런트엔드 파서를 공유하므로, UI 쪽은 어떤 에이전트 프레임워크가 실행 중인지 알 필요가 없다는 것이다.

5. Strands 기반 AG-UI 패턴의 흐름

agui-strands-agent 패턴은 ag-ui-strands 라이브러리의 StrandsAgent 래퍼로 Strands Agent를 감싸고, Strands의 스트리밍 이벤트를 AG-UI Server-Sent Events로 자동 변환한다. 각 요청은 Gateway MCP 도구를 가진 새 에이전트를 만들며, 호출자의 신원과 도구 범위가 요청 단위로 반영된다. AgentCore Memory는 스레드별 session-manager provider를 통해 붙고, MEMORY_ID가 설정되지 않은 경우에는 provider가 None을 반환하므로 메모리는 선택 사항으로 동작한다. 또한 BedrockAgentCoreApp은 AgentCore Runtime 헤더에서 WorkloadAccessToken, Authorization, Session-Id를 읽어 컨텍스트 변수를 채우기 때문에 Gateway 인증과 Memory가 HTTP 패턴과 같은 방식으로 동작한다.

6. LangGraph 기반 AG-UI 패턴과 공통 이벤트 스트림

agui-langgraph-agent 패턴은 copilotkit 라이브러리의 LangGraphAGUIAgent를 사용하며, 매 요청마다 컴파일된 LangGraph 그래프를 새로 만든다. 이 방식은 각 호출이 호출자에게 스코프된 MCP 도구를 갖도록 하기 위한 것이며, Strands 패턴과 마찬가지로 AgentCore Memory는 MEMORY_ID가 없으면 사용하지 않는 선택형 구성이다. 두 패턴은 내부 프레임워크가 다르지만 RUN_STARTED, TEXT_MESSAGE_CONTENT, TOOL_CALL_START, TOOL_CALL_RESULT, RUN_FINISHED 같은 동일한 AG-UI 이벤트를 생성한다. 결과적으로 프런트엔드는 텍스트 조각, 도구 호출 시작, 도구 결과, 실행 종료 같은 액션으로 이벤트를 매핑하기만 하면 된다.

7. 단일 프런트엔드 파서가 주는 이점

글은 AG-UI 패턴을 기존 HTTP 패턴과 비교하면서 단일 파서의 장점을 설명한다. HTTP 패턴에서는 Strands, LangGraph, Claude-agent-sdk가 서로 다른 스트리밍 형식을 사용하므로 프런트엔드가 각각 별도의 파서를 가져야 한다. 반면 AG-UI에서는 백엔드 프레임워크별 차이가 프로토콜 뒤로 추상화되고, 프런트엔드는 AG-UI 이벤트 타입만 해석하면 된다. 따라서 설정에서 agui-strands-agent를 agui-langgraph-agent로 바꾸더라도 프런트엔드 코드는 바뀌지 않으며, 이는 에이전트 프레임워크 선택과 사용자 경험 구현을 독립적으로 진화시킬 수 있게 한다.

8. CopilotKit + FAST가 보여주는 확장된 상호작용

FAST의 기본 프런트엔드는 기능적인 채팅 인터페이스를 제공하지만, 글은 AG-UI가 더 풍부한 상호작용을 지원한다고 설명한다. CopilotKit + FAST 샘플은 FAST의 내장 채팅 UI를 CopilotKit으로 대체해 생성형 UI, 양방향 공유 상태, 사람 개입형 흐름을 시연한다. 예시로는 대화 안에 인라인 차트와 컴포넌트를 렌더링하고, todo 캔버스 같은 상태를 프런트엔드와 에이전트가 함께 갱신하며, 회의 일정 조율처럼 에이전트가 실행을 멈추고 사용자 입력을 기다리는 방식이 제시된다. 이 샘플도 AgentCore Runtime, Cognito 인증, MCP 도구 연결을 위한 AgentCore Gateway, 지속 대화를 위한 AgentCore Memory 위에 배포된다.

9. 생성형 UI의 통제 범위와 보안 고려

글은 생성형 UI가 프런트엔드 통제가 강한 방식부터 에이전트 자유도가 높은 방식까지 스펙트럼을 이룬다고 설명한다. CopilotKit 샘플은 이 중 통제된 쪽에 위치하며, 프런트엔드가 미리 만들어 둔 React 컴포넌트를 소유하고 에이전트는 어떤 컴포넌트를 렌더링할지와 그 데이터만 AG-UI 이벤트로 전달한다. 더 자유로운 방식에서는 에이전트가 선언적 UI 설명을 반환하거나 프런트엔드가 임베드하는 전체 UI 표면을 제공할 수 있다. AG-UI는 특정 UI 자체를 표준화하는 것이 아니라 이벤트와 상태 스트림을 표준화하므로 이런 여러 방식을 실을 수 있지만, 에이전트에 더 많은 자유를 줄수록 샌드박싱과 입력 검증 부담도 커진다.

🧾 핵심 주장 / 시사점

• AG-UI의 핵심 가치는 새로운 UI 컴포넌트 자체보다 백엔드 프레임워크 교체와 프런트엔드 유지보수를 분리하는 표준 이벤트 계층에 있다.
• FAST의 두 AG-UI 패턴은 서로 다른 에이전트 런타임을 같은 이벤트 스트림으로 맞추기 때문에, 조직이 Strands와 LangGraph를 비교하거나 전환할 때 UI 재작업 비용을 줄일 수 있다.
• CopilotKit 샘플은 생성형 UI를 안전하게 시작하려면 에이전트가 완전한 UI를 생성하게 하기보다, 검증된 프런트엔드 컴포넌트와 스키마화된 데이터 전달부터 적용하는 접근이 현실적임을 보여준다.

✅ 액션 아이템

• AG-UI 이벤트 스트림으로 인라인 차트, 공유 캔버스, 승인 대기 흐름을 어떤 프런트엔드 컴포넌트와 매핑할지 정의한다.
• Bedrock 런타임의 인증, 세션 격리, 관측성, 헬스체크 엔드포인트를 기준으로 에이전트 백엔드와 UI 계층의 운영 계약을 점검한다.
• FAST v0.4.1의 Strands와 LangGraph 패턴을 비교해 동일 이벤트 파서를 유지하면서 도구 범위와 메모리 연동 규칙을 정리한다.

❓ 열린 질문

• AG-UI 단일 이벤트/상태 스트림으로 차트 렌더링, 실시간 공유 상태, 사용자 승인 대기를 모두 일관되게 처리할 수 있는가?
• Bedrock 런타임이 제공하는 프록시 인증과 세션 격리는 프런트엔드·백엔드 분리 구조에서 어떤 제약을 만들 수 있는가?
• CopilotKit과 FAST 샘플을 실제 제품 화면에 적용할 때, 사전 정의 React 컴포넌트와 에이전트 전달 데이터의 경계는 어디까지 열어둘 것인가?