AWS shows how to embed a live view of an AI agent in React with Bedrock AgentCore

On April 9, 2026, AWS published a technical walkthrough on embedding a live view of a browser-based AI agent into a React app using Amazon Bedrock AgentCore. Instead of a black box, users see every navigation, click, and data entry in the interface while the agent works through its task.

Why Live View matters

The post's main point isn't yet another take on browser automation — it's transparency. If an agent browses websites, looks up data, fills out forms, and makes intermediate decisions on its own, users need to understand exactly what's happening on screen. AWS proposes building this visual layer directly into the product: a React panel can show the remote browser session in real time, without forcing people to switch to a console, a separate streaming service, or an external admin panel.

Users need visibility into agent actions to maintain confidence and control.

This approach is especially useful where manual review or auditing is required: customer portals, internal operations systems, services that handle sensitive data, and regulated workflows. AWS specifically notes that watching an agent work reduces distrust: when a person sees the model open the right page, enter a query, and get a result, it feels more reliable than a bare "task completed" text message. Sessions can also be recorded to Amazon S3 for later review.

How it works

The architecture has three parts. On the client, a React app runs the `BrowserLiveView` component, which receives a signed URL and opens a persistent WebSocket connection for the video stream. On the server, the app creates a browser session through the Bedrock AgentCore API, manages its lifecycle, and generates a temporary SigV4 URL. The AWS cloud side hosts the isolated browser session and streams it via Amazon DCV, so developers don't have to build their own streaming infrastructure.

One key detail: the video doesn't pass through the application server. The backend only starts the session, signs the temporary URL, and connects the client to the right session; the stream itself flows directly from AgentCore to the user's browser over WebSocket. That cuts latency, lowers infrastructure requirements, and spares teams from running a separate media service or proxying video traffic themselves.

In the basic setup, AWS lays out this flow:

• the server starts a browser session and generates a Live View URL
• the React `BrowserLiveView` component renders the stream in the interface
• the AI agent controls the browser through `PlaywrightBrowser`
• the model calls tools such as `navigate`, `click`, `type`, and `getText`
• the user sees every action in real time

Getting started takes three main steps: create a session, pass the signed URL to the frontend, and render the component with the same viewport dimensions set on the server. AWS explicitly warns that if `remoteWidth` and `remoteHeight` don't match the session parameters, the interface will show a cropped image or black bars. The post's example uses a 1920 by 1080 resolution and a default URL TTL of 300 seconds.

What's in the sample

Alongside the guide, AWS posted a ready-to-run demo app on GitHub. It includes a React dashboard with an embedded Live View, a timestamped log of agent actions, a prompt input field, and a Fastify server that runs the model and the browser tools. The demo scenario is simple but illustrative: the agent opens Wikipedia, searches for a topic, reads the page, and then writes a short summary, while the user watches every step in a single panel and sees which commands run along the way.

The model binding isn't fixed. The sample uses the Amazon Bedrock Converse API, and you can pick Anthropic Claude, Amazon Nova, or another Bedrock model that supports tool use as the engine. The frontend is built with Vite, which brings another practical wrinkle: `BrowserLiveView` relies on the Amazon DCV Web Client SDK, so the bundler config needs aliases, dependency deduplication, and copying runtime files into the build. For local runs, AWS recommends using only temporary credentials, and for production, adding authentication, HTTPS, CORS restrictions, and rate limiting from the start.

What it means

AWS is moving browser-based AI agents away from background automation and toward an observable interface, where people find it easier to trust the system and step in when needed. For teams building agentic products in React, this lowers the barrier to launch: they can take a ready-made component, connect a cloud browser, and quickly build an experience in which the model's actions are visible not only to developers but also to end users.