MCPAgenticFrameworks

MCP Apps — Interactive UI Extension for the Model Context Protocol

by Model Context Protocol

IntermediateDocumentationFree~2-3 hours to read the guide and ship a first app; a day to port an existing server

The official MCP extension that lets your tools return a sandboxed interactive UI instead of a wall of text.

Start LearningAdded Aug 30, 2026 · Updated Aug 30, 2026

Overview

MCP Apps began as SEP-1865, proposed on 21 November 2025, shipped as the first official MCP extension on 26 January 2026, and was folded into the extensions framework of the 2026-07-28 MCP specification. The documentation is structured as a conceptual guide — why an app beats a standalone web page, how the protocol works, when to reach for it, the security model, framework support, client support — followed by a build guide and a complete API reference at apps.extensions.modelcontextprotocol.io. Mechanically, a tool declares a `_meta.ui.resourceUri` pointing at a `ui://` resource, which the host can preload before the tool is even called; the host fetches an HTML page usually bundled with its JavaScript and CSS, renders it inside a sandboxed iframe, and the app communicates back over a JSON-RPC dialect carried by postMessage — sharing some methods with core MCP such as `tools/call` and adding new `ui/`-prefixed ones such as `ui/initialize`. The resource's `_meta.ui` object carries `csp` to whitelist external origins and `permissions` to request capabilities like camera or microphone. The `@modelcontextprotocol/ext-apps` package ships React hooks, server helpers and an App Bridge module for host authors, though raw postMessage is a supported path. The companion repository (2.8k stars, spec version 2026-01-26 marked stable) carries starter templates for React, Vue, Svelte, Preact, Solid and vanilla JavaScript plus roughly eighteen runnable example servers, from a CesiumJS globe and Three.js scenes to a PDF viewer, cohort heatmap and text-to-speech server. It was authored jointly by Anthropic, OpenAI's Nick Cooper and MCP-UI creators Ido Salomon and Liad Yosef, merging OpenAI's Apps SDK with the community MCP-UI project.

At a Glance

Topic
MCP
Level
Intermediate
Format
Documentation
Cost
Free
Duration
~2-3 hours to read the guide and ship a first app; a day to port an existing server
Provider
Model Context Protocol
Hands-on
Yes — code/exercises
Certificate
None

What You’ll Learn

  • Declare a UI resource from a tool using `_meta.ui.resourceUri` and the `ui://` scheme
  • Render app HTML in a host-controlled sandboxed iframe that cannot reach the parent page
  • Exchange JSON-RPC messages over postMessage using `ui/`-prefixed methods such as `ui/initialize`
  • Call MCP server tools from inside the rendered app and receive pushed fresh results
  • Whitelist external script origins with `_meta.ui.csp` and request camera or microphone permissions
  • Choose between the ext-apps SDK, its React hooks, or a raw postMessage implementation
  • Judge when an interactive app genuinely beats a plain text or structured tool response

Highlights

  • The first official MCP extension — part of the 2026-07-28 spec, not a vendor side project
  • Merges OpenAI's Apps SDK with the community MCP-UI project; co-authored by Anthropic, OpenAI and MCP-UI
  • Roughly eighteen runnable example servers, from a CesiumJS globe to a PDF viewer and shader playground
  • Starter templates for React, Vue, Svelte, Preact, Solid and vanilla JS — no framework lock-in
  • The security model is spelled out concretely: sandboxed iframe, pre-declared templates, host-enforced capability limits

Who It’s For

Best For

  • MCP server authors whose tool results beg to be explored rather than read
  • Client and host developers adding extension support via the App Bridge module
  • Engineers deciding between an in-conversation app and a standalone web app
  • Teams building dashboards, approval workflows or config forms inside Claude or ChatGPT

Prerequisites

  • Working knowledge of MCP servers, tools and resources
  • Comfortable with TypeScript/JavaScript and browser APIs such as iframes and postMessage
  • Familiarity with JSON-RPC requests, responses and notifications

FAQ

What is MCP Apps — Interactive UI Extension for the Model Context Protocol?

The official documentation for MCP Apps, the first ratified extension to the Model Context Protocol, which lets an MCP server return an interactive HTML interface — a chart, a form, a dashboard, a PDF viewer — that renders inline inside Claude, ChatGPT, VS Code Copilot and other compliant hosts. Written for engineers who already ship MCP servers and want tool results users can manipulate rather than read, and for client authors adding extension support.

Is MCP Apps — Interactive UI Extension for the Model Context Protocol free?

MCP Apps — Interactive UI Extension for the Model Context Protocol is free to access.

What level is MCP Apps — Interactive UI Extension for the Model Context Protocol for?

MCP Apps — Interactive UI Extension for the Model Context Protocol is aimed at a intermediate audience. Recommended background: Working knowledge of MCP servers, tools and resources, Comfortable with TypeScript/JavaScript and browser APIs such as iframes and postMessage, Familiarity with JSON-RPC requests, responses and notifications.

How long does MCP Apps — Interactive UI Extension for the Model Context Protocol take?

Expect roughly ~2-3 hours to read the guide and ship a first app; a day to port an existing server. Most learners work through it at their own pace.

What will I learn from MCP Apps — Interactive UI Extension for the Model Context Protocol?

You'll learn: Declare a UI resource from a tool using `_meta.ui.resourceUri` and the `ui://` scheme; Render app HTML in a host-controlled sandboxed iframe that cannot reach the parent page; Exchange JSON-RPC messages over postMessage using `ui/`-prefixed methods such as `ui/initialize`; Call MCP server tools from inside the rendered app and receive pushed fresh results; Whitelist external script origins with `_meta.ui.csp` and request camera or microphone permissions; Choose between the ext-apps SDK, its React hooks, or a raw postMessage implementation; Judge when an interactive app genuinely beats a plain text or structured tool response.

Topics

MCPMCP Appsinteractive UIagent toolingJSON-RPC

Sources

This page was written from 3 sources, 2 on domains other than modelcontextprotocol.io.

  1. 1.modelcontextprotocol.ioappsvendor
  2. 2.github.comext apps
  3. 3.blog.modelcontextprotocol.io2026 01 26 mcp apps