Most AI agents are stuck in a "text-in, text-out" loop, which is frustrating when you actually need a UI to browse a catalog or confirm a booking. By combining the Model Context Protocol (MCP) Apps extension with Amazon Bedrock AgentCore, you can actually render interactive HTML widgets directly inside hosts like Claude or ChatGPT. The heavy lifting is handled by the AgentCore runtime (which manages session isolation) and the AgentCore Gateway (which provides the secure endpoint).
How does the MCP App flow actually work? #
The core idea is that the AI host doesn't just receive a string of text; it receives a structured response that it knows how to render as a widget. In the "Unicorn Rentals" sample app, this isn't just a list of names. When a user asks to see available unicorns, the server returns data that the host renders as interactive cards featuring images, hourly rates, and availability status.
If you're trying to implement this, the flow follows these technical steps:
-
The user sends a natural language query to the AI host.
-
The host routes this to the AgentCore Gateway.
-
AgentCore runtime executes the business logic and returns an MCP-compliant response containing the HTML widget definition.
-
The host renders the HTML, allowing the user to interact with a UI element rather than typing another prompt.
What is the actual implementation cost and setup? #
Setting this up isn't a "one-click" process. You have to deal with the Gateway configuration and ensure your session isolation is handled correctly by the runtime. While AWS markets this as serverless, you're still managing the integration between your business logic and the MCP standard.
If you want to test how a prompt should be structured to trigger these kinds of interactive tool calls, you can't just be vague. You need to explicitly define the tool's output format so the LLM knows it's triggering a UI component and not just chatting.
Here is a prompt template I've used to force an LLM to act as an MCP-aware coordinator for a rental-style app:
Act as an MCP-enabled coordinator for the Unicorn Rentals service. Your goal is to bridge user intent to specific tool calls that render HTML widgets.
Rules for interaction:
1. When a user asks to "see", "browse", or "list" unicorns, call the `list_unicorns` tool. Do not summarize the list in text; let the MCP widget handle the display.
2. When a user expresses intent to book a specific unicorn by name, call the `book_unicorn` tool with the `unicorn_id`.
3. If a tool returns an error (e.g., "Unicorn already booked"), translate that error into a helpful suggestion for the user.
Current Context:
- User is authenticated.
- Available tools: [list_unicorns, book_unicorn, view_bookings, return_unicorn].
User Query: {{user_query}}
Where does this usually break? #
From what I've seen, the biggest point of failure is host compatibility. Just because you've deployed to AgentCore doesn't mean every AI host will render your HTML widgets identically. Some hosts might strip certain CSS properties or block specific HTML tags for security reasons.
Another issue is latency. Routing through a Gateway to a serverless runtime and then back to the host can introduce a noticeable lag compared to a native plugin. If your widget requires real-time updates, the overhead of the MCP handshake might make the UI feel sluggish.
- Setup Time: Expect a few hours to configure the AgentCore Gateway and deploy your first tool.
- Runtime: Serverless, session-isolated.
- Compatibility: Host-agnostic, provided the host supports the MCP Apps extension.
Next GPT-6 Astra is finally showing some real spatial reasoning gains →
a practical ChatGPT prompt guide, with plenty of directly applicable cases.
All Replies （3） #
I want to try this tonight. I'm sick of copying JSON into my browser to test these things. Does this work with Claude 3.5?
Finally! I'm tired of manually parsing raw strings just to verify a booking. Does this actually play nice with Cursor?
Curious if this handles state management across widgets. I'm wondering if the MCP layer triggers a 404 when passing complex objects?