리액트 애플리케이션에 Amazon Bedrock AgentCore를 활용한 실시간 AI 브라우저 에이전트 내장하기

소개

AI 기반 애플리케이션을 개발할 때, 사용자는 AI 에이전트가 웹 사이트를 탐색하고 콘텐츠와 상호작용하는 과정을 신뢰할 수 있어야 합니다. 이러한 AI 에이전트의 작업을 실시간으로 파악할 수 없으면 사용자는 자신이 맡긴 작업에 대한 신뢰가 줄어들 수 있습니다. 이러한 문제를 해결하기 위해, Amazon Bedrock AgentCore Browser의 BrowserLiveView 컴포넌트를 통해 리액트 애플리케이션 내에서 실시간 브라우저 세션을 스트리밍할 수 있습니다.

본문

주요 내용 및 사례

BrowserLiveView 컴포넌트는 Amazon DCV 프로토콜을 사용하여 브라우저 세션을 렌더링하며, 단 3줄의 JSX 코드로 통합이 가능하도록 설계되었습니다. 이는 인프라 설정 없이 서버로부터 서명된 URL만 사용하면 되기 때문에, 사용자는 쉽게 이 기능을 기존 애플리케이션에 추가할 수 있습니다.

특히, 실시간 스트리밍을 애플리케이션에 내장함으로써 사용자는 AI 에이전트가 수행하는 모든 탐색, 폼 제출, 검색 쿼리를 실시간으로 확인할 수 있습니다. 이는 에이전트의 동작에 대한 사용자 피드백 및 신뢰도를 높이는 데 큰 도움이 됩니다.

구현 및 활용 예시

애플리케이션 서버에서는 Browser 클래스를 사용하여 세션을 시작하고 서명된 URL을 생성합니다. 클라이언트 측에서는 이 URL을 통해 BrowserLiveView 컴포넌트를 렌더링하여 실시간 스트리밍을 표시할 수 있습니다. 또한, AI 에이전트와의 상호작용을 위해 Amazon Bedrock Converse API를 활용할 수 있습니다.

아래는 이를 활용한 샘플 애플리케이션의 동작 과정입니다:

이 애플리케이션은 리액트 대시보드 내에 BrowserLiveView 컴포넌트를 내장하여 사용자가 에이전트의 작업 과정을 실시간으로 볼 수 있도록 하며, 동시에 작업 로그와 UI 요소를 통해 상호작용을 제공합니다.

동작 원리

세 가지 주요 구성 요소로 나뉩니다:

1. 클라이언트의 웹 브라우저는 BrowserLiveView 컴포넌트를 통해 DCV 비디오 스트림을 수신받습니다.
2. 애플리케이션 서버는 Amazon Bedrock AgentCore API를 사용해 세션을 시작하고 서명된 URL을 생성합니다.
3. AWS 클라우드는 브라우저 자동화 및 스트리밍 기능을 제공하는 Amazon Bedrock 서비스를 호스트합니다.

결론

이 글에서는 Amazon Bedrock AgentCore의 BrowserLiveView 컴포넌트를 사용하여 리액트 애플리케이션에 실시간 브라우저 세션 스트리밍을 통합하는 방법에 대해 다루었습니다. 세 가지 단계만으로 AWS에서 클라이언트 브라우저로 직접 스트리밍하는 아키텍처를 구현할 수 있어, 별도 스트리밍 기술 없이도 쉽게 실시간 에이전트 시각화를 적용할 수 있습니다.

[1] https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/