将MCP应用程序添加到您的AI SDK应用中

MCP应用程序允许模型上下文协议（MCP）工具返回交互式UI而非纯文本。模型仍调用普通MCP工具，但工具可以指向包含HTML的ui://资源，应用程序在沙箱化iframe中渲染该HTML。AI SDK提供@ai-sdk/mcp帮助函数，用于广告MCP应用程序支持、过滤模型可见的工具、读取ui://资源，以及@ai-sdk/react组件用于渲染iframe并桥接消息。您的聊天界面可以显示工具生成的仪表板、表单或其他交互式视图，同时保持不受信任的HTML隔离。

在本指南中，您将学习如何：连接到具有MCP应用程序功能的MCP服务器；使用splitMCPAppTools仅将模型可见的工具传递给模型；使用readMCPAppResource读取工具的ui://资源；安全地代理从iframe发起的应用程序可见工具调用；在React聊天中使用experimental_MCPAppRenderer渲染应用程序UI。

开始前，请确保您已安装包含@ai-sdk/mcp和@ai-sdk/react的ai包、MCP TypeScript SDK (@modelcontextprotocol/sdk) 及提供者包（如@ai-sdk/openai）、暴露MCP应用程序工具的MCP服务器，以及使用useChat的React应用（示例使用Next.js App Router）。

MCP应用程序主机的工作流程如下：连接到具有MCP应用程序客户端能力的MCP服务器；列出服务器工具并按可见性拆分；仅将模型可见的工具传递给streamText或generateText；当工具部分包含MCP应用程序元数据时读取ui://资源；在沙箱化iframe中渲染HTML资源；代理允许的iframe请求（如应用程序可见工具调用）回MCP服务器。本指南逐步构建每个步骤。

首先，使用mcpAppClientCapabilities创建MCP客户端，以便主机广告其能够渲染text/html;profile=mcp-app资源。然后，使用splitMCPAppTools拆分工具列表，并将modelVisible传递给streamText。当模型调用应用程序支持的工具时，MCP客户端在工具UI中保留应用程序元数据，React渲染器据此判断工具部分是否具有MCP应用程序。接着，使用readMCPAppResource在发送到浏览器主机之前读取ui://资源，该函数检查URI、要求MCP应用程序MIME类型、解码内容并返回HTML及渲染元数据。之后，代理应用程序可见的工具调用：iframe无法直接访问MCP服务器，因此它向主机发送JSON-RPC消息，主机验证请求工具是否应用程序可见后再调用MCP服务器。最后，在React聊天UI中，将工具部分传递给experimental_MCPAppRenderer，该组件会加载资源、创建沙箱桥接、发送工具输入和结果通知，并通过处理程序转发支持的应用程序请求。

最佳实践包括：将MCP应用程序HTML视为不受信任内容，在沙箱化iframe中渲染；绝不将应用程序仅可见工具传递给模型，仅暴露modelVisible工具；在调用client.callTool前在服务器端验证每个iframe请求；按resourceUri缓存资源以避免重复获取；保持每个工具的内容和结构化内容独立有用，以便纯文本主机仍能工作；在响应或主机请求完成后关闭短生命周期MCP客户端。

下一步：阅读MCP应用程序帮助函数参考、MCP应用程序渲染器参考，以及了解如何设置底层MCP工具。