Build your First MCP App
summary
Remote MCP servers can return interactive UI not just text using the MCP Apps extension; the demo live-codes an app from a TypeScript React/Tailwind template, serves a sandboxed iframe UI that communicates via postMessage, and uses Zod schemas for tool inputs and outputs. The build takes about two hours, uses MCP Jam and MCP Inspector for local testing, tunnels the dev server to a public URL via SSH/Pomerium, registers the app in Claude.ai and ChatGPT, and successfully renders interactive widgets though loading and CSP rules sometimes slow or block assets.
AI-written summary · about
chapters (10)
- 0:00Introduction to MCP
- 1:00Protocol overview
- 2:01How tools work
- 4:30Adding UI to MCP
- 7:31Technical implementation
- 9:52Security and architecture
- 12:18Demo project setup
- 14:01Development workflow
- 19:03Deployment and tunneling
- 23:33Final demo and summary
related talks
29mMCP Apps: Primitives, discovery, and the Future of Software
22mMCP UI: Extending the frontier
16mBuilding Interactive UIs in VS Code with MCP Apps
38mEvolving AI chat with MCP Apps
30mLet's make an MCP Server!
20mLetting AI Interface with Your App with MCPs
29mBuilding MCP Apps With GraphQL Patterns You Already Know
15mWhen chatbots grow buttons: Building MCP apps