MCP Apps 实战:在 ChatGPT、Claude 里渲染交互式 HTML 组件

AWS ML Blog · rss · 2026-09-12

AWS 博客演示如何用 Amazon Bedrock AgentCore 构建和部署 MCP App:MCP Apps 扩展了 Model Context Protocol,让 MCP 服务器能在 ChatGPT、Claude 等 AI 宿主内直接渲染交互式 HTML 组件(卡片、按钮),而非纯文本,且宿主无关——同一服务在所有支持 Apps 扩展的宿主里体验一致。

示例应用「Unicorn Rentals」覆盖完整租借流程:用户说「显示所有独角兽」,宿主为每只渲染带图片、价格、可用性的交互卡片;说「预订 Stardust」即返回预订确认;查订单和归还则按需返回纯文本。架构上,单个 MCP 服务器跑在 AgentCore runtime(无服务器、会话隔离)上,由 AgentCore Gateway 暴露统一安全端点,AWS WAF 做 IP 白名单校验,业务逻辑放在 Lambda + DynamoDB。

实现细节:应用基于官方 @modelcontextprotocol/sdk 和 @modelcontextprotocol/ext-apps 扩展,以 Express.js 服务运行;工具通过 registerAppTool 注册,工具配置中的 meta.ui.resourceUri 字段告诉宿主渲染哪个组件;组件作为 MCP Resources 注册,宿主通过 resources/read 拉取自包含 HTML,在沙箱 iframe 中渲染并注入工具返回的结构化数据,图片经 CloudFront/S3 分发。

原文链接 →

「编程与Agent」频道最新

更多「编程与Agent」频道 AI 资讯 →