Build Interactive MCP Apps on Amazon Bedrock AgentCore

Amazon Bedrock AgentCore now enables developers to build and deploy Model Context Protocol (MCP) Apps that serve interactive HTML widgets to AI hosts like ChatGPT and Claude. By utilizing the Model Context Protocol (MCP) Explained standard, organizations can deliver rich, consistent user interfaces across multiple AI platforms without coupling their business logic to a single host's proprietary UI framework.

Deploying Host-Agnostic UI with Amazon Bedrock AgentCore

Amazon Bedrock AgentCore provides the infrastructure necessary to host and expose MCP servers that support interactive widgets. According to the AWS Machine Learning Blog, this service removes the undifferentiated heavy lifting of scaling, session isolation, and infrastructure management. The platform consists of two primary components: the AgentCore runtime and the AgentCore Gateway.

The AgentCore runtime acts as a serverless, session-isolated environment specifically designed for running MCP Apps. It handles the execution of the MCP server code, which is typically packaged as a TypeScript application. To make these servers accessible to external AI hosts, the AgentCore Gateway provides a single, secure endpoint. This gateway handles inbound requests and uses AWS Identity and Access Management (IAM) execution roles to invoke the runtime, ensuring that external callers do not need to manage AWS credentials directly.

Component	Function	Security Features
AgentCore Runtime	Hosts the MCP App logic and HTML widgets	Session isolation, IAM-based invocation
AgentCore Gateway	Exposes the MCP server to external hosts	AWS WAF protection, IP allowlisting
MCP App	Defines tools and UI resources	Sandboxed iframe rendering in AI hosts
Business Logic	Executes core operations (e.g., Lambda)	Decoupled from the MCP protocol layer

How the MCP Apps Architecture Works

The MCP Apps architecture on Amazon Bedrock AgentCore separates business logic from the user interface by utilizing a two-phase interaction model. This approach is compatible with advanced deployments like GPT-6 Astra on Amazon Bedrock, where the AI host needs to interact with external tools and render visual data.

1. Tool Call Phase: When a user makes a natural language request, the AI host translates it into an MCP tools/call message. The AgentCore Gateway routes this to the runtime, where the MCP App invokes a backend service (such as an AWS Lambda function) to perform the business logic. The result is returned to the host as structured data.
2. Widget Rendering Phase: If the tool response includes a specific resource URI (e.g., ui://widget/list), the host sends an MCP resources/read request. The MCP App responds with self-contained HTML. The AI host then renders this HTML in a sandboxed iframe, injecting the structured data from the previous phase to populate the UI.

This separation ensures that the core business logic remains portable. In a production environment, your services can run on Amazon Elastic Container Service (Amazon ECS) or Amazon Elastic Kubernetes Service (Amazon EKS) while the MCP server acts as a thin protocol adapter.

Building the MCP Server with TypeScript

Building an MCP server for Amazon Bedrock AgentCore involves using the official Model Context Protocol (MCP) SDK and the @modelcontextprotocol/ext-apps extension. This extension provides the standard methods for delivering interactive widgets. Developers can follow the AI Coding Agents: Practical Guide to understand how these agents interact with structured tools.

The MCP App is structured as an Express.js HTTP server managed internally by the AgentCore runtime. Developers register tools using registerAppTool, defining the tool's configuration and a handler for the business logic. To enable rich UI, the tool configuration includes a _meta.ui.resourceUri field, which points to the corresponding widget. The widgets themselves are registered as MCP resources using registerAppResource, which returns the raw HTML required for the interface.

The deployment process involves packaging the TypeScript application into a ZIP file, uploading it to an Amazon Simple Storage Service (Amazon S3) bucket, and creating an AgentCore runtime resource. The runtime must be configured with the Node.js 22 environment and the appropriate MCP protocol mode to activate protocol-specific optimizations.

Connecting ChatGPT and Claude to AgentCore Gateway

AI hosts such as ChatGPT and Claude connect to MCP servers through the Amazon Bedrock AgentCore Gateway, which provides a public URL for the MCP's Final Spec implementation. This allows developers to reach users across different platforms with a single deployment.

Setup for ChatGPT

To connect to ChatGPT, developers must enable Developer Mode in their user profile settings. Within the Plugins menu, a new plugin can be created by providing the GatewayResourceUrl generated during the CDK deployment. ChatGPT uses "No Auth" for the initial connection, as the AgentCore Gateway is protected by AWS WAF and IP allowlisting rather than traditional user-facing credentials.

Setup for Claude.ai

For Claude.ai, the connection is established through the "Connectors" section in the customization menu. Developers add a new connector and enter the GatewayResourceUrl as the Remote MCP server URL. Once connected, Claude can discover the tools and resources exposed by the AgentCore runtime and render the interactive widgets directly in the chat interface.

Production Considerations for MCP Apps

Moving an MCP App from development to production on Amazon Bedrock AgentCore requires focusing on observability, cost management, and safety controls. Because the AgentCore runtime uses consumption-based pricing based on container runtime and invocations, developers should monitor usage patterns to optimize costs.

For monitoring, Amazon CloudWatch should be used to track AgentCore Gateway request metrics and runtime container health. It is critical to set up alarms for latency thresholds and error rates. Regarding security, developers must validate all tool arguments within the MCP server and re-validate them in the backend business logic. For applications handling sensitive data, Amazon Bedrock Guardrails can be integrated to filter harmful content or redact personally identifiable information (PII) before it is sent to the AI host.

Actionable Next Steps

To start building interactive MCP Apps on AWS, developers should choose an approach based on their current infrastructure:

• For New Projects: Clone the sample-agentcore-mcp-apps repository and run the deploy.sh script. This will provision the necessary CDK stacks, including the AgentCore runtime, Gateway, and a sample DynamoDB table for persistence.
• For Existing Services: Create a thin TypeScript MCP server that acts as a protocol adapter. Use the @modelcontextprotocol/sdk to wrap your existing API calls as MCP tools and register your frontend components as MCP resources.
• For UI Development: Design widgets as self-contained HTML files. Ensure they can accept structured data injected by the AI host's sandboxed iframe to maintain a dynamic and interactive user experience.