MCP

Interactive Widgets in AI Hosts: What AgentCore's MCP Apps Pattern Changes

How Amazon Bedrock AgentCore lets you ship interactive HTML widgets inside ChatGPT or Claude without coupling to a single host.

Interactive Widgets in AI Hosts: What AgentCore's MCP Apps Pattern Changes — article cover

MCP Apps extends the Model Context Protocol with interactive HTML widgets that render directly inside AI hosts like ChatGPT and Claude. For product builders, that solves a real problem: users increasingly interact with services through AI hosts, but plain text responses limit what you can offer. Amazon Bedrock AgentCore provides the runtime and gateway to host these apps without managing infrastructure or coupling to one host.

The two-phase request flow

When a user asks an AI host to “show all unicorns,” the host translates that into an MCP tools/call message. AgentCore Gateway routes it to the AgentCore runtime, which hosts your MCP server. The server delegates business logic to a Lambda function and returns the result. If the tool has an associated widget resource URI, the host then makes a separate resources/read request to fetch the self-contained HTML. The host renders that HTML in a sandboxed iframe and injects the structured data from the tool response.

Not every tool needs a widget. In the sample Unicorn Rentals app, view_bookings and return_unicorn return plain text because a rich interface adds no value there. The list_unicorns tool, however, points to a unicorn-list resource that renders interactive cards with images, names, hourly rates, and availability.

How the MCP server is structured

The sample app is a TypeScript application built on the official MCP SDK with the @modelcontextprotocol/ext-apps extension. It runs as an Express.js HTTP server that AgentCore runtime manages internally. Tools are registered with registerAppTool, and each tool config can include a _meta.ui.resourceUri field that tells the host which widget to render. The structuredContent in the tool response carries the data payload that gets injected into the widget.

Widgets are registered as MCP resources using registerAppResource. Each resource has a name, URI, and a handler that returns the HTML. The host discovers these through resources/list and fetches them through resources/read.

What AgentCore removes from your plate

AgentCore runtime provides a secure, serverless, session-isolated host with native MCP support. AgentCore Gateway exposes it through a single endpoint that MCP Apps-compatible hosts can reach. AWS WAF screens requests before they hit the gateway. The gateway invokes the runtime using its IAM execution role. This is the same pattern we saw with OpenRouter’s hosted sandboxed shell: the platform handles the undifferentiated infrastructure so you can focus on business logic and widget design.

The sample app uses DynamoDB for persistence and CloudFront with S3 for widget images. The MCP server itself stays thin — it delegates business operations to a Lambda function and wraps responses in MCP format.

What this means for your roadmap

MCP Apps is a host-agnostic standard. The same server works in ChatGPT, Claude, or any other host that supports the Apps extension. That means you build the widget once and get the same rich experience everywhere. The tradeoff is that you now have two response paths to design: text-only tools for simple queries and widget-backed tools for interactive flows. The supplied source material does not specify how caching behaves across different hosts, so you’ll need to test that yourself if performance matters.

If you’re already building MCP servers, adding widgets is a natural extension. If you’re not, AgentCore removes enough infrastructure overhead that the main work is designing the widget HTML and deciding which tools deserve a rich interface.

Sources

AI-assisted summary compiled from the sources above, reviewed by a human before publishing.

SHAREXEMAIL