Add MCP Apps to Your AI SDK Application (vercel.com)

A recent announcement introduced MCP Apps, enhancing the Model Context Protocol (MCP) tool ecosystem by enabling the integration of interactive UIs into AI SDK applications. Instead of returning plain text, MCP tools can now reference a HTML resource within a sandboxed iframe, allowing developers to render a variety of interactive elements—such as dashboards and forms—directly within their applications. This new capability is significant for the AI/ML community as it allows for richer user interfaces and user experiences, paving the way for more complex and engaging applications using AI. To implement MCP Apps, developers can leverage the @ai-sdk/mcp package, providing helpers for managing tool visibility and message handling. Key technical steps include connecting to an MCP server, filtering tools based on their model visibility, and securely managing iframe requests. With features like readMCPAppResource for fetching HTML content and experimental_MCPAppRenderer for rendering within React applications, developers are guided to treat the HTML as untrusted and render it safely, ensuring both functionality and security. This advancement marks a significant evolution in the way developers can create dynamic, user-friendly interfaces in AI applications.