AWS AgentCore, 세 줄의 코드로 React 앱에 라이브 AI 브라우저 제공

Amazon Bedrock AgentCore가 React 앱을 위한 새로운 컴포넌트 BrowserLiveView를 얻었습니다. 이는 자율 AI 브라우저 에이전트의 가장 흔한 문제 중 하나인 투명성을 해결합니다. 이 컴포넌트는 React 앱 내에서 에이전트 브라우저 세션의 실시간 비디오 피드를 단 세 줄의 JSX로 표시합니다.

왜 중요한가

AI 에이전트가 브라우저 내에서 자율적으로 작동할 때 — 폼을 작성하고, 링크를 클릭하고, 페이지 사이를 탐색할 때 — 사용자는 의심할 이유가 있습니다. 내가 요청한 것을 하고 있는가? 실수로 잘못된 것을 하지 않을까? BrowserLiveView는 사용자가 에이전트의 모든 동작을 실시간으로 볼 수 있게 하여 이 문제를 해결합니다. 이는 위임된 작업에 대한 신뢰를 구축하고, 사용자가 앱을 떠나지 않고 실시간으로 개입할 수 있는 감독 워크플로우를 가능하게 합니다. 보너스로, 시각적 문서화가 포함된 감사 추적을 생성합니다 — 컴플라이언스에 유용합니다.

기술적으로 어떻게 작동하는가

아키텍처에는 세 가지 컴포넌트가 있습니다. React 앱은 BrowserLiveView를 포함하고 SigV4 프리사인 URL을 수신합니다. 애플리케이션 서버는 세션을 관리하고 프리사인 URL을 생성합니다. AWS 클라우드는 Bedrock AgentCore를 통해 격리된 브라우저 세션을 호스팅합니다. 스트리밍은 Amazon DCV 프로토콜을 통해 이루어지며, 성능에 중요한 점은 DCV 스트림이 AWS에서 브라우저 클라이언트로 직접 전달되어 애플리케이션 서버를 우회한다는 것입니다. 이렇게 하면 레이턴시가 최소화되고 자체 백엔드 인프라의 부하가 줄어듭니다.

3단계 구현

1. 세션을 시작하고 AgentCore API를 통해 Live View URL을 생성합니다
2. 브라우저 세션에 맞는 뷰포트 치수로 React 컴포넌트에 스트림을 렌더링합니다
3. Playwright Chrome DevTools Protocol을 통해 브라우저 동작을 관리하는 AI 에이전트를 연결합니다

문서의 샘플 애플리케이션은 사용자가 지켜보는 동안 Wikipedia를 탐색하는 에이전트를 시연하며, 어떤 결정과 도구가 진행 중인지를 보여주는 활동 로그도 함께 제공됩니다. 이미 Bedrock AgentCore를 사용하는 팀에게 이것은 아마도 프로덕션 준비된 “AI 브라우저 컨시어지” 경험에 가장 빠르게 도달하는 경로일 것입니다 — 원격 브라우저 인프라를 자체 호스팅할 필요 없이 말입니다.