Vercel published a technical guide this week walking developers through integrating MCP Apps into AI SDK applications, unlocking interactive UIs inside chat interfaces instead of the text walls that plague most LLM integrations today.

What Are MCP Apps?

MCP (Model Context Protocol) Apps let an MCP tool return an HTML interface rather than plain text. The model still calls ordinary tools via JSON-RPC, but a tool can point to a ui:// resource containing the markup. Your host app renders that HTML in a sandboxed iframe while keeping untrusted content isolated from your main application. This means dashboards, forms, data visualizations—all the rich interactivity users expect—can live alongside conversational AI without compromising security.

The Host-Side Architecture

The guide walks through five core steps: connect to an MCP server with mcpAppClientCapabilities so it knows you support text/html; use splitMCPAppTools to filter which tools the model actually sees (keeping some for iframe-only requests); read a tool's ui:// resource with readMCPAppResource before sending anything to the browser; proxy allowed iframe requests back to your MCP server; and finally render everything using experimental_MCPAppRenderer in React. The split is critical—tools marked "model" go to the LLM while "app"-only tools stay hidden from it but available for iframe-initiated calls.

Security First, Sandboxed Everything

The documentation doesn't soft-pedal the security implications. Treat MCP App HTML as fully untrusted. Render it in a sandboxed iframe on a separate origin if possible. Every iframe request must be validated server-side before forwarding to your MCP client. Never pass app-only tools to the model—use splitMCPAppTools and expose only what the LLM needs. Cache resources by resourceUri to avoid redundant fetches, but keep each tool's content and structuredContent meaningful on their own so text-only hosts degrade gracefully.

What Developers Need

You'll need the ai package with @ai-sdk/mcp and @ai-sdk/react installed, plus the MCP TypeScript SDK (@modelcontextprotocol/sdk) and a provider like @ai-sdk/openai. Your app needs to be React-based using useChat—Vercel's examples lean on Next.js App Router. And of course, you need an MCP server that actually exposes tools pointing at ui:// resources.

Key Takeaways

  • MCP Apps bridge the gap between text-only AI responses and rich interactive interfaces
  • Security boundaries are non-negotiable: sandboxed iframes, request validation, tool visibility filtering
  • The experimental_MCPAppRenderer component handles the React integration but may change in future releases
  • Keep tools meaningful without their UI so fallback experiences remain functional

The Bottom Line

This is a smart architectural pattern that solves real UX friction in AI-powered apps—if you're building with the AI SDK and your users need more than chat logs, MCP Apps are worth evaluating. Just don't slack on the security hardening; sandbox escapes aren't theoretical.