將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工具。