MCP Ext Apps Tutorial: Building Interactive MCP Apps and Hosts

Learn how to use modelcontextprotocol/ext-apps to build interactive MCP Apps, wire host bridges, secure UI resources, and run reliable testing and migration workflows.

Why This Track Matters

Standard MCP tools work well for text and structured payloads, but many workflows need embedded UI. MCP Apps extend the protocol so servers can return interactive, sandboxed interfaces linked directly to tool executions.

This track focuses on:

• understanding the stable MCP Apps spec and lifecycle model
• building app-side UIs with @modelcontextprotocol/ext-apps
• implementing host-side bridges and context handling safely
• testing and migrating from OpenAI Apps-style integrations

Current Snapshot (auto-updated)

• repository: modelcontextprotocol/ext-apps
• stars: about 2.2k
• latest release: v1.7.1 (published 2026-04-27)

Mental Model

flowchart LR
    A[MCP Server Tool] --> B[ui:// Resource]
    B --> C[Host Sandbox Iframe]
    C --> D[App SDK]
    D --> E[Tool Data + Events]
    C --> F[Host Bridge]
    F --> A

Chapter Guide

Chapter	Key Question	Outcome
01 - Getting Started and Spec Orientation	What does MCP Apps add to core MCP, and how do I start?	Fast onboarding
02 - MCP Apps Architecture and Lifecycle	How do tools, UI resources, and host flows interact over time?	Clear system model
03 - App SDK: UI Resources and Tool Linkage	How do app developers bind UI to tool metadata and responses?	Better app design
04 - Host Bridge and Context Management	How should hosts embed, message, and constrain MCP Apps?	Safer host implementations
05 - Patterns, Security, and Performance	Which patterns improve UX while preserving safety?	Production-grade patterns
06 - Testing, Local Hosts, and Integration Workflows	How do I validate MCP Apps behavior before deployment?	Higher reliability
07 - Agent Skills and OpenAI Apps Migration	How do teams accelerate setup and migrate existing app stacks?	Faster adoption
08 - Release Strategy and Production Operations	How do I operate MCP Apps systems long term?	Durable operations

What You Will Learn

• how MCP Apps extends MCP with UI resource contracts and host/app bridging
• how to implement app-side rendering and interaction flows with SDK hooks
• how to apply security/CSP/context constraints for safer UI execution
• how to validate and evolve MCP Apps deployments with migration-aware practices

Source References

• Ext Apps README
• MCP Apps Overview
• Build Your First MCP App
• MCP Apps Patterns
• Testing MCP Apps
• Agent Skills Guide
• Migration from OpenAI Apps
• Quickstart Example
• Basic Host Example
• Integration Server Example

Related Tutorials

• MCP Specification Tutorial
• MCP TypeScript SDK Tutorial
• MCP Servers Tutorial
• MCP Use Tutorial

---

Start with Chapter 1: Getting Started and Spec Orientation.

Navigation & Backlinks

• Start Here: Chapter 1: Getting Started and Spec Orientation
• Back to Main Catalog
• Browse A-Z Tutorial Directory
• Search by Intent
• Explore Category Hubs

Full Chapter Map

1. Chapter 1: Getting Started and Spec Orientation
2. Chapter 2: MCP Apps Architecture and Lifecycle
3. Chapter 3: App SDK: UI Resources and Tool Linkage
4. Chapter 4: Host Bridge and Context Management
5. Chapter 5: Patterns, Security, and Performance
6. Chapter 6: Testing, Local Hosts, and Integration Workflows
7. Chapter 7: Agent Skills and OpenAI Apps Migration
8. Chapter 8: Release Strategy and Production Operations

Generated by AI Codebase Knowledge Builder