How to Add Interactive UIs in Claude and ChatGPT via MCP Apps

MCP Apps let your tools render interactive dashboards, forms, and visualizations directly inside Claude and ChatGPT. In this video you build a full MCP App from scratch using Claude Code and the official agent skill — and the same approach works with any agent tool that supports skills, including VS Code Copilot, Goose, Cline, Gemini CLI, Codex, Cursor, and Google Antigravity. Timestamps: 0:00 - MCP tools now have UIs 0:40 - What MCP Apps actually are 1:55 - MCP Apps Explained 5:12 - Building an MCP App 9:37 - Testing MCP App in Claude 10:58 - Advanced Patterns for MCP Apps 12:04 - Tips to get started with MCP Apps 13:38 - TLDR; recap What you will learn: ✅ What MCP Apps are and how they differ from standard MCP tools ✅ How to install the create-mcp-app agent skill in Claude Code ✅ How to scaffold a full MCP App from a single prompt ✅ How the tool and UI resource pattern works together ✅ How bidirectional communication lets the UI call back to the server ✅ How to test locally with basic-host before connecting to Claude ✅ How to run your MCP App inside Claude using a local tunnel ✅ Which advanced patterns matter before going to production Links and Resources: ✔️ MCP Apps official docs: https://modelcontextprotocol.io/exten... ext-apps repository: https://github.com/modelcontextprotoc... ✔️ Agent Skills guide: https://modelcontextprotocol.github.i... ✔️ Quickstart: https://modelcontextprotocol.github.i... ✔️ Advanced Patterns: https://modelcontextprotocol.github.i... ✔️ Testing guide: https://modelcontextprotocol.github.i... ✔️ MCP Apps launch blog: https://blog.modelcontextprotocol.io/... ✔️ Norwegian Police API: https://api.politiet.no/politiloggen/... Related videos: Your MCP deep dive episode —    • Let’s Vibe Code an MCP Server in 10 Minutes   Claude Code best practices episode —    • How to Get Started with Claude Code in 5 M...   Playground plugin episode —    • How to Use the Claude Code Playground Plugin   🔔 Subscribe for weekly AI tutorials 📩 Join our newsletter → https://gritai.kit.com/ 🌐 Website → https://www.gritai.studio/ 👉 Join our AI community → https://www.gritai.studio/build-with-... #MCPApps #ClaudeCode #ModelContextProtocol #MCP #ClaudeAI #ChatGPT #AITools #GritAIStudio #AITutorial #BuildWithAI