可易

用 Amazon Bedrock AgentCore 构建交互式 MCP 应用

可易团队阅读约 11 分钟

本文按架构、工具调用和小组件渲染说明如何在 AgentCore 上部署交互式 MCP 应用，并给出部署命令、宿主连接步骤、监控成本要点与清理命令。

目录

随着客户转向通过 ChatGPT 和 Claude 这类人工智能（AI）宿主来使用数字服务，组织需要一种方式，让自己的服务能以丰富的用户界面（UI）出现在这些应用中，而不只是纯文本。他们还需要做到这一点，同时不绑定到单一宿主。MCP 应用（MCP Apps）与 Amazon Bedrock AgentCore 提供的正是这个能力。MCP Apps 扩展了模型上下文协议（Model Context Protocol，MCP），使交互式 HTML 小组件可以直接在 AI 宿主内部渲染。Amazon Bedrock AgentCore 是一个平台，用于大规模构建、连接和优化智能体（agent），并且可以使用任何框架或模型。具体到 MCP Apps，AgentCore 运行时（AgentCore runtime，Amazon Bedrock AgentCore 的一项能力）提供一个安全、无服务器、会话隔离、并原生支持 MCP 的宿主。AgentCore Gateway（Amazon Bedrock AgentCore 的一项能力）通过一个单一的安全端点把它暴露出来，供兼容 MCP Apps 的宿主访问。AgentCore 承担这些无差异的繁重工作，因此你可以把注意力放在业务逻辑和小组件设计上。

在本文中，我们演示如何在 Amazon Bedrock AgentCore 上构建并部署一个带有交互式 HTML 小组件的 MCP 应用。因为 MCP Apps 是一个与宿主无关的标准，该应用会在所有支持 Apps 扩展的 AI 宿主上提供同样的丰富体验。借助示例应用独角兽租赁（Unicorn Rentals），客户可以浏览可用的独角兽、预订租赁、查看进行中的预订，以及归还独角兽。无论客户在 ChatGPT、Claude 还是另一个受支持的宿主中打开 Unicorn Rentals，它的外观和感觉都相同。

它如何工作

在进入架构之前，先看这个应用实际如何运行。Unicorn Rentals 被部署为一个 MCP 应用，并连接到一个 AI 宿主。下面的示例使用 ChatGPT，但同一台服务器也可以在 Claude 或其他支持 MCP Apps 扩展的宿主中工作。我们将走完四步，从浏览车队到归还一只独角兽。现在开始。

第 1 步：列出可用的独角兽

我们从一个自然语言问题开始：“你能展示所有独角兽吗？”宿主理解这个问题，并为每一只独角兽渲染一张交互式卡片，展示它的图片、名字、描述、小时费率和是否可用，而不是一份纯文本列表。

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

第 2 步：预订一只独角兽

如果你喜欢的独角兽是 Stardust，你可以说“我想预订名叫 Stardust 的独角兽”来租赁它。应用记录这次预订并立即确认，展示预订 ID、日期、小时费率，以及你所预订的独角兽。

图 2：预订被确认，详细信息显示在对话中。

第 3 步：查看你的预订

要查看你当前借出了什么，你可以说“给我看看我的独角兽预订”。应用返回你正在进行的租赁，以及到目前为止的时长和已产生的费用。这一次响应以文本而不是卡片返回，因为并不是每一个请求都需要丰富界面。

图 3：进行中的租赁以文本而不是卡片返回。

第 4 步：归还独角兽

最后，“我想归还我的独角兽”结束这次租赁。应用根据时长和小时费率计算总费用，并在对话中报告它。

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

你刚刚看到的一切，都由运行在 Amazon Bedrock AgentCore runtime 上的一台 MCP 服务器提供，前面是一个 AgentCore Gateway。本文其余部分说明它是如何构建的，以及如何自行部署。

方案概览

这个方案在 Amazon Bedrock AgentCore 上部署一个 MCP 应用，通过模型上下文协议暴露业务逻辑和交互式 HTML 小组件。用户与 AI 宿主交互，宿主使用 MCP Apps 模式渲染交互式 HTML 小组件。一个专门的 AWS Lambda 函数实现业务逻辑，并用 Amazon DynamoDB 做持久化。

下面的图说明这些组件如何一起工作，以便向 AI 宿主提供交互式小组件。

图 5：Amazon Bedrock AgentCore 上 MCP 应用的架构

当你向一个 AI 宿主注册一个 MCP 应用时，会发生这些事：

  1. 你提供应用详情，其中包括 MCP 服务器 URL。
  2. AI 宿主向由 AgentCore Gateway 暴露的 MCP 服务器 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 身份与访问管理（IAM）执行角色调用 AgentCore runtime。托管在其上的 MCP 应用定义 MCP 工具和 MCP 资源。
  5. MCP 应用收到请求，并返回其中的工具列表或资源列表。
  6. AI 宿主可能会缓存这些信息，供以后使用。

当用户试图从 AI 宿主访问独角兽租赁服务时，会发生这些事。

阶段 1 — 工具调用

  1. 用户从一个 AI 宿主（例如 ChatGPT 或 Claude）发出自然语言请求（例如“给我看看所有独角兽”）。
  2. AI 宿主把该请求转换成一条 MCP tools/call 消息（例如 list_unicorns），并把它发送到 AgentCore Gateway 端点。
  3. AWS WAF 在请求到达 AgentCore Gateway 端点之前对其进行筛查。
  4. AgentCore Gateway 调用托管该 MCP 应用的 AgentCore runtime。
  5. MCP 应用收到请求，并把业务操作委托给独角兽租赁服务 AWS Lambda。
  6. 该 AWS Lambda 针对 DynamoDB 执行业务逻辑，并返回结果。
  7. MCP 应用把响应包装成 MCP 格式，并返回给 AI 宿主。

阶段 2 — 小组件渲染

  1. 如果该工具关联了一个资源 URI（例如 ui://widget/unicorn-list），AI 宿主就启动这个阶段。没有关联小组件的工具，例如 view_bookings 和 return_unicorn，只返回纯文本内容，并完全跳过这个阶段。
  2. 宿主为该 URI 发送一条 MCP resources/read 请求。
  3. 请求经过 AgentCore Gateway 到达 MCP 应用。
  4. MCP 应用解析该资源 URI，并返回小组件自包含的 HTML。AI 宿主可能会缓存这些数据以获得更好的性能。
  5. 宿主在一个沙箱化的 iframe 中渲染该 HTML，并通过 MCP Apps 生命周期，把工具响应中的结构化数据注入进去。
  6. 小组件从 Amazon CloudFront 获取所需图片，CloudFront 使用 Amazon 简单存储服务（Amazon Simple Storage Service，Amazon S3）作为源站。

使用 AgentCore runtime 构建 MCP 服务器

本节说明 MCP 服务器如何组织，以及 AgentCore runtime 如何托管它。

MCP 应用

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

#### MCP 工具

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

工具配置中的 _meta.ui.resourceUri 字段告诉 AI 宿主，应该渲染哪个小组件来展示该工具的响应。tool/call 响应中的 structuredContent 包含数据载荷。AI 宿主在渲染小组件时把这些数据注入进去。

#### MCP 应用资源

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

AgentCore runtime 上的 MCP 应用

本方案把 MCP 应用部署在 AgentCore runtime 上。构建过程把 MCP 应用代码打包成一个 zip 文件。部署步骤把它上传到一个 Amazon S3 存储桶，并创建一个引用它的 AgentCore runtime 资源。运行时配置指定 NODE_22 环境、入口点，以及 MCP 协议模式。

AgentCore runtime 为部署和运行 MCP 应用提供一个安全、无服务器、且专门构建的托管环境。它根据传入请求量自动扩展。MCP 协议配置告诉 AgentCore 这是一台 MCP 服务器，从而启用针对该协议的优化。基于资源的策略限制哪些主体可以调用该运行时。在本方案中，策略只允许 AgentCore Gateway 的执行角色，并拒绝其他主体。

通过 AgentCore Gateway 暴露 MCP 服务器

AgentCore runtime 支持使用 IAM（签名版本 4，SigV4）和 OAuth 进行调用时的身份验证。本方案在运行时前面放置一个 Amazon Bedrock AgentCore Gateway，因此外部 AI 宿主可以通过一个受管理的单一端点访问 MCP 服务器。Gateway 接受入站的无身份验证（No Auth）请求，并使用它自己的 IAM 执行角色、经由 SigV4 调用运行时，因此调用方不必自己处理 AWS 凭据。AWS WAF 用 IP 允许列表、托管的威胁检测规则和速率限制来保护 AgentCore Gateway 端点。

业务逻辑层

一个 AWS Lambda 函数实现独角兽租赁的业务逻辑。它针对 Amazon DynamoDB 处理库存查询和预订操作。它完全不了解 MCP。在真实实现中，这可以是你已经在 Amazon 弹性容器服务（Amazon Elastic Container Service，Amazon ECS）、Amazon 弹性 Kubernetes 服务（Amazon Elastic Kubernetes Service，Amazon EKS）或其他计算服务上运行的现有服务。关键点是：MCP 服务器充当一个很薄的协议适配器。你的核心业务逻辑留在它已经所在的地方，你通过 HTTP 调用或 SDK 客户端这类标准调用模式，把它连接到 MCP 层。

部署演练

下面一节带你完成如何部署该方案。

前提条件

开始之前，请确认你具备：

  • 一个 AWS 账户，并拥有部署 AgentCore runtime 的适当权限。所需 IAM 权限见 AgentCore runtime 的 IAM 权限。
  • Node.js 22 或更高版本。
  • 已安装并配置好的 AWS 命令行界面（AWS Command Line Interface，AWS CLI）V2.0 或更高版本（aws configure）。
  • 已全局安装的 AWS 云开发工具包（AWS Cloud Development Kit，AWS CDK）CLI。安装说明见 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

记下部署后打印的输出。连接 AI 宿主时，你需要其中的 GatewayResourceUrl。

从 AI 宿主连接

因为这台 MCP 服务器实现了 MCP Apps 开放标准，其他支持 MCP Apps 扩展的 AI 宿主也可以连接，并渲染完整的交互式小组件体验。

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

ChatGPT

  1. 前往 https://chatgpt.com/，选择用户资料、插件、开发者模式，并打开开发者模式。
  2. 前往插件，并选择新建插件。
  3. 在名称处输入 UnicornRentals。
  4. 在描述处输入：“Browse unicorns, book rentals, view active bookings, and return unicorns. Shows rich UI cards with pricing and booking confirmations”。
  5. 在连接处输入 CDK 输出中的 GatewayResourceUrl 值。
  6. 在身份验证处选择 No Auth。
  7. 选择创建。

Claude.ai

  1. 前往 https://claude.ai，选择自定义，然后选择连接器。
  2. 选择添加连接器。
  3. 在名称处输入 UnicornRentals。
  4. 在远程 MCP 服务器 URL 处输入 CDK 输出中的 GatewayResourceUrl 值。
  5. 选择保存。

生产部署注意事项

把这个方案移到生产环境时，考虑下列事项。

关于监控与可观测性，使用 Amazon CloudWatch 监控你的 AgentCore Gateway 请求指标、独角兽服务 Lambda 调用，以及 AgentCore runtime 容器健康状况。为错误率和延迟阈值设置告警，并打开日志，以跟踪 MCP 方法调用和响应时间。

关于成本优化，请注意 AgentCore runtime 按容器运行时和调用量采用基于消费的定价。为把成本控制住，应按预期流量模式合理设置容器内存和 CPU 分配，并复查 Lambda 并发设置。

关于负责任的 AI，在你的信任边界上加入安全控制。在 MCP 服务器中用严格模式校验工具参数，并在独角兽服务 Lambda 中再次校验，使业务逻辑不信任未经验证的输入。对于跨越该边界的非结构化文本，使用 Amazon Bedrock Guardrails 过滤有害内容、阻止被拒绝的主题，并在响应到达客户端之前，从中涂去个人可识别信息（personally identifiable information，PII）等敏感数据。

清理

要删除 CDK 堆栈所创建的全部资源，运行下列命令。

cd infrastructure/cdk
npx cdk destroy

后续步骤

要查看这个示例方案的源代码和部署说明，请访问 aws-samples 中的 GitHub 仓库。你可以把独角兽租赁服务 Lambda 替换成自己的业务逻辑，并增加新的工具和小组件，从而改用这一模式。

结论

本文说明了如何在 Amazon Bedrock AgentCore runtime 上构建并部署一台带有交互式小组件 UI 的 MCP 服务器。这个架构模式是：在 AgentCore runtime 上放一个很薄的 MCP 协议层，它把业务逻辑委托给专门的 Lambda 函数，并把自包含的小组件 HTML 作为 MCP 应用资源来提供。它通过一个 AgentCore Gateway 端点暴露这套栈，并使你以最小的运维开销得到一个可扩展的 MCP Apps 部署。

这种方法之所以有力，在于你不需要构建的那些东西。AgentCore runtime 处理扩展、会话隔离、健康监控和基础设施管理这些无差异的繁重工作，因此你的团队可以继续专注于对客户重要的业务逻辑和小组件体验。你编写一个很薄的协议适配器，把它指向你的现有服务，其余的由 AgentCore 处理。

因为该方案建立在开放的 MCP Apps 标准之上，你的投入不会被锁定在单一 AI 宿主上。同一台服务器、同一组工具和同一组交互式小组件，可以在其他支持 MCP Apps 扩展的宿主上工作。你构建一次，就能在客户选择与 AI 交互的任何地方接触到他们。而且因为该架构把协议处理与业务逻辑清晰分开，你可以独立演进。更换数据存储、增加新工具、重新设计小组件，或连接更多后端服务，这些改变都不需要重新架构这次部署。MCP 层保持很薄，你的服务保持可移植，AgentCore runtime 则保持一切继续运行。

PRIMARY_SOURCE: https://aws.amazon.com/blogs/machine-learning/build-interactive-mcp-apps-using-amazon-bedrock-agentcore

  • #MCP Apps
  • #AgentCore
  • #小组件
  • #部署
  • #清理

继续阅读