How modelcontextprotocol/ext-apps works
MCP Apps is a TypeScript SDK for serving interactive UI resources through MCP tools and connecting those UIs to compliant chat hosts. The main workflow is server-side tool/resource registration, tool invocation, host resource loading and iframe rendering, then bidirectional communication between the UI and host. The SDK also exposes host-context, display-mode, teardown, model-context, and sizing features, plus optional React hooks for connection, resizing, and host styling. The tree and excerpts support these major boundaries; some internal wiring, especially in the bridge and transport, is not shown.
Main entry points: app.ts App Protocol Client · useApp.tsx React App Hook · index.ts UI Resource Registration · useHostStyles.ts Host Style Hooks
Components 18
Server Integration
- Tool Registration
src/server/index.ts - UI Resource Registration
src/server/index.ts
App Runtime
- App Protocol Client
src/app.ts - PostMessage Transport
src/message-transport.ts - App Bridge
src/app-bridge.ts
React Integration
- React App Hook
src/react/useApp.tsx - Resize Hook
src/react/useAutoResize.ts - Host Style Hooks
src/react/useHostStyles.ts - Document Theme Hook
src/react/useDocumentTheme.ts
Protocol and Styling
- Event Dispatch
src/events.ts - Schema Validation
src/standard-schema.ts - Protocol Types
src/types.ts - Host Style Application
src/styles.ts
Other components
- MCP App Developer
- MCP Server
- LLM Tool Caller
- Compliant Host
- Sandboxed UI
Connections 22
- MCP App Developer → Tool Registration: registers tools
- MCP App Developer → UI Resource Registration: registers resources
- Tool Registration → MCP Server: registers with
- UI Resource Registration → MCP Server: registers with
- LLM Tool Caller → MCP Server: calls tool
- MCP Server → Compliant Host: returns tool result
- Compliant Host → UI Resource Registration: fetches UI resource
- Compliant Host → Sandboxed UI: renders resource
- Sandboxed UI → React App Hook: mounts hook
- React App Hook → App Protocol Client: creates and connects
- React App Hook → PostMessage Transport: creates transport
- App Protocol Client → PostMessage Transport: communicates through
- App Protocol Client → Compliant Host: requests and notifies
- Compliant Host → App Protocol Client: sends context and tool data
- App Protocol Client → Event Dispatch: dispatches events
- App Protocol Client → Schema Validation: validates tool data
- App Bridge → App Protocol Client: bridges app protocol
- App Protocol Client → Protocol Types: uses protocol definitions
- Resize Hook → App Protocol Client: sets up size reporting
- Host Style Hooks → App Protocol Client: observes host context
- Host Style Hooks → Host Style Application: applies host styles
- Document Theme Hook → Host Style Application: reads document theme