{"slug": "add-mcp-apps-to-your-ai-sdk-application", "title": "Add MCP Apps to Your AI SDK Application", "summary": "Developers can now integrate interactive MCP Apps into AI SDK applications, allowing tools to return HTML-based UIs rendered in sandboxed iframes. The AI SDK provides helpers for connecting to MCP servers, filtering tools, reading UI resources, and proxying iframe requests, enabling dashboards and forms within chat interfaces.", "body_md": "MCP Apps let a Model Context Protocol (MCP) tool return an interactive UI instead of plain text. The model still calls ordinary MCP tools, but a tool can point to a `ui://`\n\nresource that holds HTML, and your app renders that HTML in a sandboxed iframe. To build the host side, the AI SDK provides `@ai-sdk/mcp`\n\nhelpers for advertising MCP Apps support, filtering which tools the model sees, and reading `ui://`\n\nresources, plus `@ai-sdk/react`\n\ncomponents for rendering the iframe and bridging its messages. Your chat can then display a dashboard, form, or other interactive view generated by a tool, while the untrusted HTML remains isolated.\n\nIn this guide, you'll learn how to:\n\n- Connect to an MCP server with MCP Apps capabilities\n- Pass only model-visible tools to the model with\n`splitMCPAppTools`\n\n- Read a tool's\n`ui://`\n\nresource with`readMCPAppResource`\n\n- Proxy app-initiated tool calls safely from the iframe\n- Render the app UI in your React chat with\n`experimental_MCPAppRenderer`\n\nBefore you begin, make sure you have:\n\n- The\n`ai`\n\npackage with`@ai-sdk/mcp`\n\nand`@ai-sdk/react`\n\n- The MCP TypeScript SDK (\n`@modelcontextprotocol/sdk`\n\n) and a provider package, such as`@ai-sdk/openai`\n\n- An MCP server that exposes MCP Apps tools (tools that point to\n`ui://`\n\nresources) - A React app that uses\n`useChat`\n\n(the examples below use the Next.js App Router)\n\nAn MCP Apps host connects to an MCP server, decides which tools the model can see, and renders any app UI that a tool points to. At runtime, the host follows these steps:\n\n- Connect to the MCP server with MCP Apps client capabilities.\n- List the server's tools and split them by MCP Apps visibility.\n- Pass only the model-visible tools to\n`streamText`\n\nor`generateText`\n\n. - Read a tool's\n`ui://`\n\nresource when its tool part includes MCP App metadata. - Render the HTML resource in a sandboxed iframe.\n- Proxy allowed iframe requests, such as app-visible tool calls, back to the MCP server.\n\nThe rest of this guide builds each step.\n\nCreate the MCP client with `mcpAppClientCapabilities`\n\nso the host advertises that it can render `text/html;profile=mcp-app`\n\nresources.\n\nAdvertise these capabilities only if your host can safely fetch and render MCP App resources.\n\nMCP Apps tools can declare `_meta.ui.visibility`\n\n. Pass tools marked `\"model\"`\n\nto the model, and keep tools marked only `\"app\"`\n\nfor iframe requests so the model never sees them. Split the tool list with `splitMCPAppTools`\n\nand pass `modelVisible`\n\nto `streamText`\n\n.\n\nWhen the model calls an app-backed tool, the MCP client keeps the app metadata in the tool UI, which the React renderer uses to determine whether a tool part has an MCP App.\n\nRead a tool's `ui://`\n\nresource with `readMCPAppResource`\n\nbefore you send it to the browser host.\n\n`readMCPAppResource`\n\nchecks that the resource uses a `ui://`\n\nURI, requires the MCP Apps MIME type, decodes text or base64 content, and returns the HTML along with rendering metadata such as its content security policy and permissions.\n\nThe iframe can't reach your MCP server directly. It sends JSON-RPC messages to your host, and your host decides which ones to allow. For an app-initiated tool call, confirm that the requested tool is app-visible before calling the MCP server.\n\nIn production, add any policy and user-approval checks your app needs before forwarding an iframe request.\n\nIn your React chat UI, render normal message parts as usual and pass tool parts to `experimental_MCPAppRenderer`\n\n.\n\n`experimental_MCPAppRenderer`\n\nis experimental and may change in a future release.\n\n`experimental_MCPAppRenderer`\n\nrenders nothing for ordinary tools. For an app-backed tool, it loads the resource, creates the sandbox bridge, sends tool input and result notifications to the iframe, and forwards supported app requests through your handlers.\n\n- Treat MCP App HTML as untrusted. Render it in a sandboxed iframe, ideally through a sandbox proxy route on a separate origin.\n- Never pass app-only tools to the model. Use\n`splitMCPAppTools`\n\nand expose only the`modelVisible`\n\ntools. - Validate every iframe request on the server before you call\n`client.callTool`\n\n. - Cache resources by\n`resourceUri`\n\nso repeated tool calls don't refetch identical HTML. - Keep each tool's\n`content`\n\nand`structuredContent`\n\nuseful on their own, so text-only hosts still work without the UI. - Close short-lived MCP clients when the response or host request finishes.\n\n- Read the\n[MCP Apps helpers reference](https://ai-sdk.dev/v7/docs/reference/ai-sdk-core/mcp-apps)for the host-side functions. - See the\n[MCP App Renderer reference](https://ai-sdk.dev/v7/docs/reference/ai-sdk-ui/mcp-app-renderer)for the React component's props. - Learn more about setting up the\n[underlying MCP tools](https://ai-sdk.dev/docs/ai-sdk-core/mcp-tools).", "url": "https://wpnews.pro/news/add-mcp-apps-to-your-ai-sdk-application", "canonical_source": "https://vercel.com/kb/guide/ai-sdk-mcp-apps", "published_at": "2026-06-27 00:10:53+00:00", "updated_at": "2026-06-27 00:35:34.251034+00:00", "lang": "en", "topics": ["ai-tools", "ai-infrastructure", "developer-tools"], "entities": ["AI SDK", "MCP", "Next.js", "React", "OpenAI"], "alternates": {"html": "https://wpnews.pro/news/add-mcp-apps-to-your-ai-sdk-application", "markdown": "https://wpnews.pro/news/add-mcp-apps-to-your-ai-sdk-application.md", "text": "https://wpnews.pro/news/add-mcp-apps-to-your-ai-sdk-application.txt", "jsonld": "https://wpnews.pro/news/add-mcp-apps-to-your-ai-sdk-application.jsonld"}}