About
Vercel Knowledge Base guide for building an MCP Apps host with AI SDK. It shows how `@ai-sdk/mcp` and `@ai-sdk/react` split model-visible tools from app-only tools, read `ui://` resources, and render interactive tool UIs inside a sandboxed iframe with `experimental_MCPAppRenderer`.
Summary
Why This Guide Matters:
1. Concrete host implementation: Moves MCP Apps from protocol concept to working React app wiring
2. Tool visibility model: Covers how to keep model-visible and app-visible tools separate
3. Resource rendering path: Shows how hosts read `ui://` resources and render HTML safely
4. Security boundary: Emphasizes sandboxed iframe rendering and allowed tool proxying
5. Collection fit: Complements the MCP Apps standard entry with a current Vercel AI SDK integration path
1. Concrete host implementation: Moves MCP Apps from protocol concept to working React app wiring
2. Tool visibility model: Covers how to keep model-visible and app-visible tools separate
3. Resource rendering path: Shows how hosts read `ui://` resources and render HTML safely
4. Security boundary: Emphasizes sandboxed iframe rendering and allowed tool proxying
5. Collection fit: Complements the MCP Apps standard entry with a current Vercel AI SDK integration path
Tags
vercelai-sdkmcp-appsreactimplementation