Build Your First MCP App
The official quickstart currently uses the TypeScript SDK and Node.js 18+ to build a tool with a View rendered in compatible hosts.
Architecture
MCP Tool → returns data + UI resource reference Host → renders View in sandboxed iframe View ↔ App bridge ↔ Host/MCP capabilities
Start from a useful tool
UI is valuable when flat text or elicitation is insufficient: searchable pickers, chart interaction, complex forms, or multi-step configuration.
Keep a non-UI fallback
The same capability should remain meaningful for clients that do not implement MCP Apps.
Use official scaffolding
The MCP Apps project also ships Agent Skills such as create-mcp-app to scaffold the recommended architecture in supported coding agents.