While you construct AI-powered functions, your customers should perceive and belief AI brokers that navigate web sites and work together with net content material on their behalf. When an agent interacts with net content material autonomously, your customers require visibility into these actions to take care of confidence and management, which they don’t at present have.
The Amazon Bedrock AgentCore Browser BrowserLiveView element addresses this problem by offering a real-time video feed of the agent’s looking session instantly inside your React utility. This element, a part of the Bedrock AgentCore TypeScript SDK, streamlines the mixing by embedding a reside browser stream with three traces of JavaScript XML (JSX).
The BrowserLiveView element makes use of the Amazon DCV protocol to render the browser session, creating transparency into agent actions. Implementation requires solely a presigned URL out of your server, with out requiring you to construct streaming infrastructure.
This submit walks you thru three steps: beginning a session and producing the Stay View URL, rendering the stream in your React utility, and wiring up an AI agent that drives the browser whereas your customers watch. On the finish, you’ll have a working pattern utility you may clone and run.
Why embed Stay View in your utility
Embedding Stay View inside your individual utility unlocks further worth to your customers at scale.
With an embedded Stay View, your customers observe each navigation, kind submission, and search question because the agent performs it. They get speedy visible affirmation that the agent is on the suitable web page, interacting with the proper components, and progressing by means of the workflow. This real-time suggestions loop offers finish customers direct perception into agent habits with out ready for the ultimate outcome.
Customers who delegate looking duties to an AI agent are extra assured after they can observe the work. Watching the agent fill in a kind subject by subject is extra reassuring than receiving a textual content affirmation. For regulated workflows, visible proof of agent actions can assist audit necessities.
In workflows that require human supervision, like dealing with buyer accounts and processing delicate information, a supervisor can use the embedded Stay View to observe the agent in actual time and intervene if wanted, with out leaving your utility.
Organizations additionally achieve audit path assist by means of visible proof of agent actions, which proves useful for compliance necessities and troubleshooting eventualities. Mixed with session recordings to Amazon Easy Storage Service (Amazon S3) and console-based session replay, you get each real-time remark and post-hoc overview.
The way it works
The mixing has three parts.
The consumer’s net browser runs a React utility containing the BrowserLiveView element, which receives a SigV4-presigned URL and establishes a persistent WebSocket connection to obtain the DCV video stream from a distant browser session. The React utility handles video rendering and consumer interface presentation whereas sustaining the WebSocket connection for steady streaming.
The applying server capabilities as an AI agent inside the Amazon Bedrock session lifecycle, orchestrating the connection between shopper browsers and cloud-hosted browser classes. It begins classes utilizing the Amazon Bedrock AgentCore API and generates SigV4-presigned URLs that grant safe, time-limited entry to the Stay View stream. This layer handles session administration, authentication, and stream distribution.
AWS Cloud hosts Amazon Bedrock AgentCore Browser and Amazon Bedrock companies that present the underlying browser automation and streaming capabilities. Amazon Bedrock AgentCore hosts the remoted cloud browser classes inside AWS Cloud and offers each the automation endpoint (Playwright CDP) and the Stay View streaming endpoint (DCV).
The important thing effectivity benefit with this structure is that the DCV Stay View stream flows instantly from Amazon Bedrock AgentCore to the consumer’s browser. It doesn’t move by means of your utility server. Your server generates the URL and runs the agent, however the video stream is a direct WebSocket connection from AWS to the shopper. This helps reduce latency and scale back infrastructure necessities.
Determine 1: Answer structure exhibiting the information circulate between three parts. The numbered arrows within the diagram characterize the next information flows:
Arrow 1 (grey, strong): The shopper sends prompts and polls standing from the Utility Server utilizing REST.
Arrow 2 (orange, strong): The Utility Server calls the Amazon Bedrock Converse API for AI mannequin reasoning.
Arrow 3 (blue, strong): The Utility Server runs browser instruments in opposition to Amazon Bedrock AgentCore Browser utilizing Playwright Chrome DevTools Protocol (CDP).
Arrow 4 (purple, dashed): The DCV Stay View stream flows instantly from Amazon Bedrock AgentCore to the Person Browser, bypassing the Utility Server.
Conditions
Earlier than you start, confirm that you’ve the next:
Necessary: Stay View (Steps 1 and a pair of) requires solely Amazon Bedrock AgentCore permissions. It doesn’t rely on Amazon Bedrock or any particular AI mannequin. The AI agent in Step 3 makes use of the Amazon Bedrock Converse API, which requires further Amazon Bedrock permissions, however that is particular to our pattern. You possibly can substitute a mannequin supplier or agent framework of your alternative. Use momentary credentials from AWS IAM Id Middle or AWS Safety Token Service (AWS STS). Don’t use long-lived entry keys. Comply with the precept of least privilege when configuring AWS Id and Entry Administration (IAM) permissions.
Set up the Amazon Bedrock AgentCore TypeScript SDK:
npm set up bedrock-agentcore
For the AI agent in Step 3, you additionally want the AWS SDK for JavaScript:
npm set up @aws-sdk/client-bedrock-runtime
The code on this submit runs in two environments: the server-side code (Steps 1 and three) runs in Node.js, and the client-side code (Step 2) runs in a React utility bundled with Vite. The pattern utility on the finish of this submit packages every little thing collectively.
Step-by-step implementation
1: Begin a browser session and generate the Stay View URL
In your utility server, use the Browser class to start out a session and generate the presigned URL. The API returns a session identifier and streaming URL, which the server converts right into a presigned URL with an outlined expiration time of 300 seconds by default. It incorporates SigV4 credentials within the question parameters, so no secrets and techniques attain the browser. Move this URL to your frontend by means of an API endpoint.
import { Browser } from ‘bedrock-agentcore/browser’
const browser = new Browser({
area: ‘us-west-2’
})
await browser.startSession({
viewport: { width: 1920, peak: 1080 }
})
const signedUrl =
await browser.generateLiveViewUrl()
// Ship signedUrl to your frontend through API
2: Render the BrowserLiveView element in your React app
In your browser, import the BrowserLiveView element from the Bedrock AgentCore TypeScript SDK and render it with the presigned URL. The element handles WebSocket connection, DCV protocol negotiation, video stream decoding, and body rendering. It auto scales to suit its mum or dad container whereas preserving its facet ratio. The remoteWidth and remoteHeight should match the viewport that you simply set in Step 1. Mismatched values trigger cropping or black bars.
import { BrowserLiveView }
from ‘bedrock-agentcore/browser/live-view’
After including this element, the Stay View begins streaming as quickly because the presigned URL is legitimate and the browser session is lively. It’s best to see the distant browser’s desktop seem inside the element’s container. If the container stays empty, confirm that the presigned URL hasn’t expired and that the browser session remains to be operating.
3: Join an AI agent to drive browser actions
With the Stay View streaming, you want one thing fascinating to observe. The next instance makes use of the Amazon Bedrock Converse API, however Stay View is mannequin agnostic. You need to use an AI mannequin or agent framework of your option to drive the browser.
The code creates a PlaywrightBrowser shopper, which begins a brand new AgentCore Browser session and connects to it utilizing the Playwright Chrome DevTools protocol. This is similar kind of cloud browser session as Step 1 however accessed by means of the Playwright automation interface moderately than the Stay View interface.
The mannequin decides which browser instruments to name, together with navigate, click on, kind, getText, getHtml, and pressKey. Your server runs these instruments and feeds the outcomes again to the mannequin for the following iteration.
import { BedrockRuntimeClient, ConverseCommand }
from ‘@aws-sdk/client-bedrock-runtime’
import { PlaywrightBrowser }
from ‘bedrock-agentcore/browser/playwright’
const browser = new PlaywrightBrowser({
area: ‘us-west-2’
})
await browser.startSession()
// Outline browser instruments as JSON Schema
// (navigate, click on, kind, getText, and extra)
whereas (step < maxSteps) {
const response = await bedrockClient.ship(
new ConverseCommand({
modelId: modelId,
system: [{ text: systemPrompt }],
messages,
toolConfig: browserTools,
})
)
if (response.stopReason === ‘tool_use’) {
// Run browser device, add outcome
// to dialog, proceed loop
} else {
break // Last reply from mannequin
}
}
The mannequin is configurable. You need to use Anthropic Claude, Amazon Nova, or an Amazon Bedrock mannequin that helps device use. Each device name that the mannequin makes is seen to your consumer by means of the Stay View. They see the browser navigate, the search field fill in, and the outcomes web page load.
Be aware: The TypeScript SDK additionally features a Vercel AI SDK integration (BrowserTools) that wraps these browser operations as framework-native instruments.
Attempt it utilizing the pattern utility
We constructed an entire pattern utility on GitHub that places Steps 1–3 collectively. The pattern features a React dashboard with the embedded Stay View, an exercise log exhibiting agent reasoning and actions, and a Fastify server operating the AI agent. The agent navigates to Wikipedia, searches for a subject, reads the web page content material, and summarizes what it finds when you watch each step. You possibly can obtain it from the GitHub repository.
Determine 2: The pattern utility mid-run. The left panel reveals the BrowserLiveView element streaming a Wikipedia web page that the agent has navigated to. The proper panel reveals the exercise log with timestamped device calls (navigate, getText, click on). On the backside, the immediate enter subject and Launch Agent button are seen.
To clone and run the pattern utility
Full the next steps to clone and run the pattern utility.
- Clone the repository and navigate to the pattern folder.
git clone https://github.com/awslabs/bedrock-agentcore-samples-typescript.git
cd bedrock-agentcore-samples-typescript
cd use-cases/browser-live-view-agent
- Set up the dependencies.
- Export your AWS credentials.
export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=
export AWS_SESSION_TOKEN=
export AWS_REGION=us-west-2
Necessary: Use momentary credentials. Don’t commit credentials to supply management.
- Begin the appliance.
- Open http://localhost:5173, enter a immediate, and select Launch Agent.
Bundler configuration
The BrowserLiveView element makes use of the Amazon DCV Internet Shopper SDK, which ships vendored information contained in the bedrock-agentcore npm bundle. You don’t must obtain or set up DCV individually. Your Vite configuration wants three additions:
- resolve.alias factors the dcv and dcv-ui naked specifiers to the vendored SDK information.
- resolve.dedupe verifies that React and shared dependencies resolve out of your node_modules, not from the vendored path.
- viteStaticCopy copies DCV runtime information (staff, WASM decoders) to your construct output.
The pattern utility’s vite.config.ts has the entire configuration prepared to make use of. For extra particulars on the BrowserLiveView element, see the live-view supply listing within the TypeScript SDK.
Clear up assets
To keep away from incurring costs, cease the browser session and shut down the appliance whenever you’re carried out:
- Within the utility UI, select Cease Session to finish the Amazon Bedrock AgentCore Browser session.
- In your terminal, press Ctrl+C to cease the event servers.
- Should you created any IAM roles or insurance policies particularly for this demo, delete them from the IAM console.
Amazon Bedrock AgentCore Browser classes incur costs whereas lively. For pricing particulars, consult with the Amazon Bedrock AgentCore pricing web page.
Subsequent steps
Now that you’ve a working Stay View integration, listed here are some issues to discover.
To get began, clone the pattern utility, fill in your AWS credentials, and run npm run dev to see the total demo in motion. For directions, consult with the To clone and run the pattern utility part on this submit.
The pattern utility defaults to Anthropic Claude, however you may swap to Amazon Nova or one other Amazon Bedrock mannequin that helps device use by setting the BEDROCK_MODEL_ID setting variable. For an inventory of obtainable fashions and their device use capabilities, consult with the Amazon Bedrock mannequin documentation.
The React dashboard within the pattern utility is a place to begin to your personal implementation. You possibly can adapt the structure to match your design system, combine the Stay View into an current utility, or add controls that allow customers intervene mid-workflow. For steerage on constructing React functions with the AgentCore SDK, consult with the Bedrock AgentCore TypeScript SDK documentation.
The BrowserLiveView element helps a number of situations on the identical web page, every streaming a special browser session. This functionality is helpful for monitoring dashboards. The element’s supply code, together with scaling logic and DCV authentication circulate, is out there within the live-view supply listing within the TypeScript SDK.
Conclusion
On this submit, you discovered the way to use the BrowserLiveView element to embed a Stay View of an Amazon Bedrock AgentCore Browser session into your React utility. The three-step implementation and structure that streams video instantly from AWS to shopper browsers makes reside agent visualization accessible with out specialised streaming experience.
For a deeper take a look at Amazon Bedrock AgentCore Browser capabilities, consult with the Amazon Bedrock AgentCore Browser documentation. You probably have suggestions or questions, open a problem within the GitHub repository.
Necessary: This pattern utility is meant for native growth and demonstration. For manufacturing use, add authentication to your API endpoints, allow HTTPS, limit CORS origins, implement fee limiting, and observe the AWS Nicely-Architected Framework safety pillar.
In regards to the authors
Sundar Raghavan
Sundar Raghavan is a Senior Options Architect at AWS on the Agentic AI Basis crew. He formed the developer expertise for Amazon Bedrock AgentCore, contributing to the SDK, CLI, and starter toolkit, and now focuses on integrations with AI agent frameworks. Beforehand, Sundar labored as a Generative AI Specialist, serving to clients design AI functions on Amazon Bedrock. In his free time, he loves exploring new locations, sampling native eateries, and embracing the nice outside.
Radhe Shyam
Radhe Shyam is a Senior Entrance Finish Engineer on the Agentic AI Basis crew at AWS, the place he builds the consumer experiences for Amazon Bedrock AgentCore, together with browser session replay and reside view tooling for agentic workflows. With practically seven years at Amazon spanning domains from Amazon SageMaker Canvas to Prime Video, he’s keen about constructing performant, accessible front-end programs that carry advanced AI and ML capabilities to a broader viewers of builders.
Saurav Das
Saurav Das is a part of the Amazon Bedrock AgentCore Product Administration crew. He has greater than 15 years of expertise in working with cloud, information and infrastructure applied sciences. He has a deep curiosity in fixing buyer challenges centered round information and AI infrastructure.
