Skip to main content

MCP Apps

What is MCP Apps​

MCP Apps is an extension to the Model Context Protocol that allows MCP servers to deliver interactive UI applications directly inside LLM host environments (Claude Desktop, VS Code Copilot, Microsoft 365 Copilot, Postman). Instead of returning plain text or structured data, tools return interactive HTML/JS interfaces rendered in sandboxed iframes.

  • Status: Supported in major MCP hosts (2026)
  • License: MIT (part of MCP ecosystem)
  • Hosts: Claude, Claude Desktop, VS Code GitHub Copilot, Microsoft 365 Copilot, Goose, Postman

Why it's interesting​

  • Context preservation — interactive UIs live inside the chat, so users don't lose context by switching tabs.
  • Bidirectional data flow — apps can call MCP tools on the server and receive pushed updates from the host.
  • Sandboxed security — apps run in isolated iframes with strict CSP; host controls permissions for tools, microphone, camera, etc.
  • Framework-agnostic — build with React, Vue, Svelte, vanilla JS, or any web framework.
  • Progressive enhancement — tools work as plain MCP tools when the host doesn't support UI; the UI layer is optional.
  • Already deployed — supported by Claude, VS Code Copilot, and Microsoft 365 Copilot today.

When to use​

  • Data exploration — interactive dashboards, drilldown charts, maps that live inside the conversation
  • Multi-step workflows — approval flows, configuration wizards, code review UIs
  • Rich media — PDF viewers, 3D models, video players with native interactivity
  • Real-time monitoring — live metrics dashboards that update without leaving chat
  • Complex forms — multi-field configuration with validation and interdependent fields

When NOT to use​

  • Simple text/image responses — plain MCP tool results are simpler and sufficient
  • Standalone web apps — if users are fine switching contexts, a regular web app is easier to build and maintain
  • Hosts that don't support it yet — not all MCP clients render UI resources
  • Non-interactive outputs — if the tool just returns data for the LLM to summarize, you don't need a UI

How it works​

  1. MCP server tool declares a ui:// resource in _meta.ui.resourceUri
  2. Host preloads the HTML/JS/CSS before the tool is invoked
  3. Tool execution triggers UI rendering in a sandboxed iframe
  4. App communicates with host via postMessage API
  5. App can call MCP tools through the host; host can push fresh data to the app

Resources​