Preview web apps live as your coding agent builds them with Amazon Bedrock AgentCore runtime

Previewing Live Web Apps with Amazon Bedrock AgentCore Runtime

Developers building AI‑driven coding agents often face a frustrating feedback loop: every code change requires a full deployment before the UI can be inspected. Amazon Bedrock AgentCore introduces Session endpoints, a lightweight way to expose an agent’s running environment directly to a browser. This lets you watch a Vite‑based web app update in real time as the agent edits files, dramatically speeding up iteration.

---

How Session Endpoints Work

1. Isolated microVM per session – Each agent runs in its own microVM, guaranteeing security and resource isolation.
2. Port selection – When creating the runtime you specify `allowedPorts` (e.g., 8080 for the agent API, 8090 for the Vite dev server). The ports must be bound to `0.0.0.0` inside the session.
3. Authenticated URL – The `CreateAgentRuntime` response includes a `sessionEndpointUrl` header. Every request to this URL is signed with either SigV4 or a JWT, ensuring only authorized callers can reach the session.
4. Port‑prefixed hostnames – The URL always uses port 443 externally, but the target port is encoded in the hostname, e.g.:

``` https://8090--<session-id>.runtime.bedrock-agentcore.<region>.on.aws/index.html ```

1. Protocol support – HTTP/1.1, HTTP/2, server‑sent events, gRPC, and WebSocket traffic all flow through the endpoint.
2. Ephemeral nature – The endpoint lives only for the session’s lifetime, making it ideal for development and testing, not for production traffic.

A runtime endpoint (e.g., `DEFAULT`) still serves the usual purpose of invoking the agent, while the Session endpoint is a preview‑only surface that reflects the exact state of the running session.

---

Sample Architecture: Coding Agent + Vite Preview

The reference implementation consists of four moving parts:

| Component | Port | Role | |-----------|------|------| | Coding Agent | 8080 | Receives prompts, calls Claude Haiku via Bedrock, reads/writes project files | | Vite Dev Server | 8090 | Serves the web app and pushes hot‑reload updates over WebSocket | | PreviewApp (local) | 8088 | Provides a UI with a chat pane and an iframe showing the live site; forwards requests to the Session endpoint | | Status API | 8081 | Exposes simple health/status data for the session |

Workflow

1. `PreviewApp` calls `InvokeAgentRuntime` to start a session; the response contains the Session endpoint URL.
2. `PreviewApp` opens a local proxy on `localhost:8088` that injects the required AWS signatures before forwarding traffic to the Session endpoint.
3. The iframe in the UI loads `http://localhost:8088` which, behind the scenes, reaches the Vite server on port 8090 via the Session endpoint.
4. When you type a prompt, `PreviewApp` sends it to the agent (port 8080) via the regular runtime endpoint.
5. The agent edits files, Vite detects the change, and the hot‑reload WebSocket pushes the update back through the same path, instantly refreshing the iframe without a full page reload.

---

Practical Tips for Using Session Endpoints

• Limit allowed ports: Only expose the ports you truly need (e.g., 8090 for the dev server). This reduces the attack surface.
• Use local proxy for browsers: Browsers cannot add SigV4 signatures, so a lightweight local proxy (as shown in the sample) is required for seamless access.
• Separate dev and prod: Keep Session endpoints confined to development environments. For production, deploy the built app to a service like AWS Amplify Hosting or Amazon S3 + CloudFront.
• Monitor session lifetimes: Sessions terminate when idle or when you explicitly close them. Automate cleanup to avoid orphaned microVMs.
• Leverage Bedrock models: The coding agent can call any Bedrock foundation model (e.g., Claude Haiku) to decide on code changes, making the loop fully AI‑driven.

---

Closing Thoughts

Amazon Bedrock AgentCore’s Session endpoints turn the traditionally slow “code‑deploy‑review” cycle into a rapid, interactive experience. By exposing a live preview of a web app directly from the agent’s runtime, developers can iterate on UI changes, test hypotheses, and refine prompts in seconds rather than minutes. Combine this with Bedrock’s powerful foundation models and you have a compelling workflow for building, testing, and showcasing AI‑augmented applications—all without leaving your development environment.