用 Bedrock AgentCore 构建支持交互组件的 MCP 应用

随着客户逐渐习惯通过 ChatGPT、Claude 等 AI 助手来交互数字服务，企业需要一种方式让自己的服务在这些应用中以丰富的 UI（而非纯文本）呈现，同时不能与某一个特定宿主强耦合。MCP Apps 与 Amazon Bedrock AgentCore 正是为解决这一问题而生。MCP Apps 基于 Model Context Protocol（MCP）扩展，支持直接在 AI 宿主内渲染交互式 HTML 组件。Amazon Bedrock AgentCore 是一个平台，用于以任意框架或模型大规模构建、连接和优化 Agent。就 MCP Apps 而言，AgentCore runtime（Amazon Bedrock AgentCore 的一项能力）提供了一个安全的、无服务器的、会话隔离的宿主环境，并原生支持 MCP。AgentCore Gateway（Amazon Bedrock AgentCore 的另一项能力）通过单一安全端点对外暴露服务，使支持 MCP Apps 扩展的宿主可以访问。AgentCore 承担了这些重复性的重活，让你可以专注于业务逻辑和组件设计。

本文演示如何在 Amazon Bedrock AgentCore 上构建和部署一个带有交互式 HTML 组件的 MCP App。由于 MCP Apps 是与宿主无关的标准，无论在哪个支持 Apps 扩展的 AI 宿主的应用商店中，该应用都提供相同的丰富体验。通过示例应用 Unicorn Rentals，客户可以浏览可租用的独角兽、预订租赁、查看当前订单以及归还独角兽。无论客户是在 ChatGPT、Claude 还是其他支持的宿主中打开 Unicorn Rentals，体验和界面都是一致的。

在深入架构之前，我们先来看看实际效果。Unicorn Rentals 部署为 MCP App 并连接到 AI 宿主。以下示例使用 ChatGPT，但同一服务端在 Claude 或其他支持 MCP Apps 扩展的宿主中同样可用。我们将分四步走一遍，从浏览独角兽列表到归还独角兽。开始吧。

步骤 1：列出可租用的独角兽

我们从一个自然语言问题开始："Can you show all unicorns?"（能给我看看所有独角兽吗？）宿主解析这个问题后，为每只独角兽渲染一张交互式卡片，展示其图片、名称、描述、小时租金和可用状态，而不是返回纯文本列表。

图 1：AI 宿主将可租用的独角兽渲染为交互式卡片。

步骤 2：预订一只独角兽

如果你最喜欢的是 Stardust，可以说"I would like to book Stardust unicorn"（我想预订 Stardust 这只独角兽）。应用记录预订并立即确认，显示预订 ID、日期、小时租金以及所预订的独角兽。

图 2：预订确认后，详情显示在对话中。

步骤 3：查看订单

要查看当前有哪些订单，可以说"Show me my unicorn bookings"（给我看看我的独角兽订单）。应用返回你当前的租赁信息，以及已产生的时长和费用。这次返回的是文本而非卡片，因为并非每个请求都需要富界面。

图 3：当前租赁以文本形式返回，而非卡片。

步骤 4：归还独角兽

最后，"I would like to return my unicorn"（我想归还我的独角兽）结束租赁。应用根据时长和小时租金计算总费用，并在对话中反馈。

图 4：租赁结束，报告总费用。

上述所有交互均通过运行在 Amazon Bedrock AgentCore runtime 上的单一 MCP 服务端提供，由 AgentCore Gateway 作为入口。本文其余部分将展示其构建方式以及如何自行部署。

解决方案架构

本解决方案将 MCP App 部署在 Amazon Bedrock AgentCore 上，通过 Model Context Protocol 暴露业务逻辑和交互式 HTML 组件。用户与 AI 宿主交互，宿主使用 MCP Apps 模式渲染交互式 HTML 组件。一个专用的 AWS Lambda 函数实现业务逻辑，以 Amazon DynamoDB 做持久化。

下图展示了这些组件如何协同工作，将交互式组件送达 AI 宿主。

图 5：Amazon Bedrock AgentCore 上 MCP App 的架构图

注册 MCP App 时发生了什么

1. 你提供 App 详情，包括 MCP Server URL。
2. AI 宿主向 AgentCore Gateway 暴露的 MCP Server URL 发起 tools/list 和 resources/list MCP 调用。MCP 服务端提供工具（如 list_unicorns、book_unicorn、view_bookings、return_unicorn）以及资源（如 unicorn-list、booking-confirmation），这些资源为每个响应提供组件 HTML。
3. AWS WAF 通过其 IP 白名单和托管规则验证请求，然后 AgentCore Gateway 将其路由到 AgentCore runtime。
4. AgentCore Gateway 使用其 AWS Identity and Access Management（IAM）执行角色调用 AgentCore runtime。托管在其上的 MCP App 定义了 MCP 工具和 MCP 资源。
5. MCP App 接收请求并返回其包含的工具或资源列表。
6. AI 宿主可能会缓存这些信息以供后续使用。

用户从 AI 宿主访问独角兽租赁服务时发生了什么

阶段 1 — 工具调用

1. 用户从 ChatGPT 或 Claude 等 AI 宿主发出自然语言请求（例如，"Show me all unicorns"）。
2. AI 宿主将请求翻译为 MCP tools/call 消息（例如 list_unicorns），并发送到 AgentCore Gateway 端点。
3. AWS WAF 在请求到达 AgentCore Gateway 端点之前对其进行筛选。
4. AgentCore Gateway 调用托管 MCP App 的 AgentCore runtime。
5. MCP App 接收请求并将业务操作委托给 Unicorn Rental Service AWS Lambda。
6. AWS Lambda 针对 DynamoDB 执行业务逻辑并返回结果。
7. MCP App 将响应包装为 MCP 格式并返回给 AI 宿主。

阶段 2 — 组件渲染

如果工具有关联的资源 URI（例如 ui://widget/unicorn-list），AI 宿主启动此阶段。对于没有关联组件的工具（如 view_bookings 和 return_unicorn），仅返回纯文本内容，跳过此阶段。

1. 宿主发送针对该 URI 的 MCP resources/read 请求。
2. 请求通过 AgentCore Gateway 到达 MCP App。
3. MCP App 解析资源 URI 并返回组件的自包含 HTML。AI 宿主可能会缓存此数据以提升性能。
4. 宿主在沙箱 iframe 中渲染 HTML，并通过 MCP Apps 生命周期将工具响应中的结构化数据注入其中。
5. 组件从 Amazon CloudFront 获取所需图片，CloudFront 以 Amazon Simple Storage Service（Amazon S3）作为源站。

使用 AgentCore runtime 构建 MCP 服务端

本节介绍 MCP 服务端的结构以及 AgentCore runtime 如何托管它。

本解决方案中的 MCP App 是一个基于官方 @modelcontextprotocol/sdk 并使用 @modelcontextprotocol/ext-apps 扩展构建的 TypeScript 应用，该扩展提供了从 MCP 服务端交付交互式组件的标准方式。它作为 Express.js HTTP 服务器运行，由 AgentCore runtime 内部管理。MCP App 提供以下能力：

工具注册

应用注册 MCP 工具（如 list_unicorns、book_unicorn、view_bookings、return_unicorn），供 AI 宿主调用。工具通过 registerAppTool 注册，需要提供工具名称、工具配置以及包含工具业务逻辑的处理函数。应用注册了 list_unicorns 工具。它处理来自 AI 宿主的 tools/list MCP 请求（用于工具发现）和 tools/call MCP 请求（用于工具调用）。

工具配置中的 _meta.ui.resourceUri 字段告知 AI 宿主为显示该工具响应而渲染哪个组件。tool/call 响应中的 structuredContent 包含数据负载。AI 宿主在渲染时将这些数据注入组件中。

资源注册

应用将组件注册为 MCP 资源，供 AI 宿主使用。资源通过 registerAppResource 注册，需要提供资源名称、URI 和返回组件 HTML 数据处理函数。应用注册了 unicorn-list-widget 资源。它处理来自 AI 宿主的 resource/list MCP 请求（用于资源发现）和 resource/read MCP 请求（用于获取组件 HTML）。

AgentCore runtime 上的 MCP App

解决方案将 MCP App 部署在 AgentCore runtime 上。构建过程将 MCP App 代码打包为 zip 文件。部署步骤将其上传到 Amazon S3 桶，并创建引用它的 AgentCore runtime 资源。runtime 配置指定了 NODE_22 环境、入口点以及 MCP 协议模式。

AgentCore runtime 为部署和运行 MCP App 提供了安全的、无服务器的、专用托管环境。它根据传入请求量自动扩展。MCP 协议配置告知 AgentCore 这是一个 MCP 服务端，从而激活协议特定的优化。基于资源的策略限制哪些主体可以调用该 runtime。在本解决方案中，策略仅允许 AgentCore Gateway 执行角色调用，并拒绝其他主体。

通过 AgentCore Gateway 暴露 MCP 服务端

AgentCore runtime 支持 IAM（SigV4）和 OAuth 认证来调用。本解决方案在 runtime 前放置了 Amazon Bedrock AgentCore Gateway，使外部 AI 宿主可以通过单一托管端点访问 MCP 服务端。Gateway 接受带 No Auth 的入站请求，并使用自己的 IAM 执行角色通过 SigV4 调用 runtime，因此调用方无需处理 AWS 凭证。AWS WAF 通过 IP 白名单、托管威胁检测规则和速率限制保护 AgentCore Gateway 端点。

业务逻辑层

AWS Lambda 函数实现了独角兽租赁的业务逻辑。它处理针对 Amazon DynamoDB 的库存查询和预订操作。它对 MCP 一无所知。在真实世界的实现中，这可以是您现有的运行在 Amazon Elastic Container Service（Amazon ECS）、Amazon Elastic Kubernetes Service（Amazon EKS）或其他计算服务上的服务。关键在于 MCP 服务端充当了轻量级的协议适配器。您的核心业务逻辑保留在它原本所在的位置，通过标准调用模式（如 HTTP 调用或 SDK 客户端）连接到 MCP 层。

部署实战

本节引导您完成解决方案的部署。

在开始之前，请确认您具备以下条件：

• 一个 AWS 账户，具有部署 AgentCore runtime 的适当权限。有关所需 IAM 权限，请参阅 IAM Permissions for AgentCore runtime。
• AWS Command Line Interface（AWS CLI）V2.0 或更高版本，已安装并配置（aws configure）。
• AWS Cloud Development Kit（AWS CDK）CLI 已全局安装。具体步骤请参阅 Getting started with the AWS CDK。

部署使用单一的 deploy.sh 脚本编排构建和 CDK 栈部署。

步骤 1：下载解决方案代码：

git clone https://github.com/aws-samples/sample-agentcore-mcp-apps.git
cd sample-agentcore-mcp-apps

步骤 2：在您的 AWS 账户上部署所需资源。运行部署脚本以部署 CDK 栈：

bash deploy.sh

部署后请注意打印的输出。您将需要 GatewayResourceUrl 来连接 AI 宿主。

从 AI 宿主连接

由于此 MCP 服务端实现了 MCP Apps 开放标准，其他支持 MCP Apps 扩展的 AI 宿主也可以连接并获得完整的交互式组件体验。

仓库中包含了连接特定 AI 宿主的详细设置指南。

ChatGPT 设置：

1. 前往 https://chatgpt.com/，选择 User Profile、Plugins、Developer Mode，开启 Developer mode。
2. 前往 Plugins，选择 New Plugin。
3. 对于 Name，输入 UnicornRentals。
4. 对于 Description，输入："Browse unicorns, book rentals, view active bookings, and return unicorns. Shows rich UI cards with pricing and booking confirmations"。
5. 对于 Connection，输入 CDK 输出中的 GatewayResourceUrl 值。
6. 对于 Authentication，选择 No Auth。

Claude 设置：

1. 前往 https://claude.ai/，选择 Customize，然后选择 Connectors。
2. 选择 Add Connector。
3. 对于 Name，输入 UnicornRentals。
4. 对于 Remote MCP server URL，输入 CDK 输出中的 GatewayResourceUrl 值。

生产部署注意事项

将本解决方案迁移到生产环境时，请考虑以下事项。

监控与可观测性

使用 Amazon CloudWatch 监控 AgentCore Gateway 请求指标、Unicorn Service Lambda 调用以及 AgentCore runtime 容器健康状况。为错误率和延迟阈值设置告警，并开启日志记录以跟踪 MCP 方法调用和响应时间。

成本优化

请注意 AgentCore runtime 使用基于容器 runtime 和调用量的消耗式定价。为控制成本，请根据预期流量模式合理调整容器内存和 CPU 配置，并审查 Lambda 并发设置。

负责任的 AI

在信任边界添加安全控制。在 MCP 服务端使用严格模式验证工具参数，并在 Unicorn Service Lambda 中重新验证，这样业务逻辑就不会信任未验证的输入。对于跨越边界的非结构化文本，使用 Amazon Bedrock Guardrails 过滤有害内容、阻止被拒主题，并在响应到达客户端之前删除敏感数据（如个人身份信息 PII）。

清理资源

要删除 CDK 栈创建的所有资源，请运行以下命令：

cd infrastructure/cdk
npx cdk destroy

总结

要查看此示例解决方案的源代码和部署说明，请访问 aws-samples GitHub 仓库。您可以通过将 Unicorn Rental Service Lambda 替换为您自己的业务逻辑，并添加新的工具和组件来适配此模式。

本文展示了如何在 Amazon Bedrock AgentCore runtime 上构建和部署带有交互式组件 UI 的 MCP 服务端。该架构模式是在 AgentCore runtime 上构建一个轻量级 MCP 协议层，将业务逻辑委托给专用 Lambda 函数，并将自包含的组件 HTML 作为 MCP App 资源提供服务。它通过 AgentCore Gateway 端点暴露整个技术栈，为您提供了一个只需最少运维工作即可扩展的 MCP Apps 部署方案。

这种方法的强大之处在于您不需要构建的东西。AgentCore runtime 处理了扩展、会话隔离、健康监控和基础设施管理等重复性重活，让您的团队专注于对客户重要的业务逻辑和组件体验。您只需编写一个轻量级协议适配器，指向您现有的服务，AgentCore 负责其余工作。

由于该解决方案基于开放的 MCP Apps 标准构建，您的投入不会锁定在单一 AI 宿主上。相同的服务端、相同的工具和相同的交互式组件在其他支持 MCP Apps 扩展的宿主中同样有效。您一次构建，即可在客户选择的任意 AI 交互渠道中触达他们。而且由于架构将协议处理与业务逻辑清晰分离，您可以独立演进。换掉数据存储、添加新工具、重新设计组件或连接其他后端服务，都无需重新架构部署。MCP 层保持轻量，您的服务保持可移植，AgentCore runtime 保持一切稳定运行。