📢 转载信息
原文作者：Amazon Web Services
在构建 AI 驱动的应用程序时，用户必须能够理解并信任那些代其浏览网站和交互的 AI 代理。当代理自主操作网页内容时，用户需要查看这些操作以保持信心和控制力，但目前这方面尚有欠缺。
Amazon Bedrock AgentCore Browser 中的 BrowserLiveView 组件通过直接在您的 React 应用程序中提供代理浏览会话的实时视频流，解决了这一挑战。该组件属于 Bedrock AgentCore TypeScript SDK 的一部分，通过三行 JavaScript XML (JSX) 代码即可实现实时浏览器流的嵌入。
BrowserLiveView 组件使用 Amazon DCV 协议渲染浏览器会话，为代理操作带来透明度。实现过程仅需服务器端提供一个预签名 URL，无需您自行构建流媒体基础设施。
为什么要在应用中嵌入实时视图 (Live View)
在应用中嵌入实时视图可以为用户释放更多价值：
- 实时反馈循环：用户可以跟随代理的每一次导航、表单提交和搜索查询。这种实时性让用户能够立即确认代理是否在正确的页面上，并按预期流程推进。
- 增强信任感：观看代理逐字填写表单比仅收到文本确认更令人安心。
- 合规与审计：对于受监管的工作流，代理操作的视觉证据可以满足审计要求。
- 人类干预：在处理敏感数据等需要人工监督的工作流程中，监督者可以实时观察代理操作并在必要时介入，无需离开您的应用。
工作原理
该集成方案包含三个部分：用户浏览器中的 React 应用程序、处理会话的应用程序服务器，以及 AWS 云托管的 Amazon Bedrock AgentCore 环境。值得注意的是，DCV 实时流直接从 AWS 传输到用户浏览器，不经过您的应用程序服务器，从而将延迟降至最低。
图 1：解决方案架构图，展示了数据在客户端、应用服务器与 AWS 基础设施之间的流动。
实现步骤概览
1. 启动浏览器会话并生成实时视图 URL
在应用服务器上，使用 Browser 类启动会话并生成预签名 URL。该 URL 包含 SigV4 凭证，有效期默认为 300 秒。
import { Browser } from 'bedrock-agentcore/browser'
const browser = new Browser({ region: 'us-west-2' })
await browser.startSession({ viewport: { width: 1920, height: 1080 } })
const signedUrl = await browser.generateLiveViewUrl()2. 在 React 应用中渲染 BrowserLiveView 组件
在前端，通过 SDK 引入该组件并传入预签名 URL。
import { BrowserLiveView } from 'bedrock-agentcore/browser/live-view'
<BrowserLiveView signedUrl={presignedUrl} remoteWidth={1920} remoteHeight={1080} />3. 连接 AI 代理以驱动浏览器操作
使用 PlaywrightBrowser 客户端，通过 Playwright Chrome DevTools 协议实现自动化操作。模型可以调用 navigate、click、type 等工具来完成任务，所有操作均通过 Live View 展示。
🚀 想要体验更好更全面的AI调用？
欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。
评论区