Briefing

MCP Apps Spec 2026‑01‑26: Interactive UIs Inside AI Conversations

ai-dev
by Maximilian Nussbaumer · Claude Anthropic

Patch your MCP tool to return structuredContent and load a ui:// resource; test JSON‑RPC handshake and CSP headers in the sandboxed iframe.

What to do now

Patch your MCP tool to return structuredContent and load a ui:// resource; test JSON‑RPC handshake and CSP headers in the sandboxed iframe.

Summary

Anthropic’s MCP Apps spec (v2026‑01‑26) extends the MCP protocol to allow AI tools to return a structuredContent payload alongside normal text, enabling hosts to load a ui:// resource into a sandboxed iframe and communicate via JSON‑RPC 2.0 over postMessage. The spec defines a handshake (ui/initialize), a lifecycle (tool‑input, tool‑result, tool‑cancelled, tool‑input‑partial, host‑context‑changed, resource‑teardown), action methods (ui/open‑link, ui/message, ui/request‑display‑mode, ui/update‑model‑context, tools/call), sizing messages (ui/notifications/size‑changed, ui/notifications/preferred‑size), and security controls (CSP via _meta.ui.csp and Permission Policy for camera, microphone, geolocation, clipboard). Host implementations already shipping the full spec include VS Code Copilot Chat, Claude Desktop, and ChatGPT, all of which support CSP via HTTP headers or meta tags and can send results before initialization completes. The protocol is renderer‑agnostic, so developers can supply any UI—React, Svelte, or a prefab renderer—without the host parsing the DOM. By turning an MCP server into a full‑stack application that runs inside the AI conversation, developers can write once and render everywhere, inheriting the host’s theme and sandboxing model. The spec is an official extension to MCP maintained by Anthropic and is already considered infrastructure rather than a proposal.

Key changes

  • MCP Apps spec v2026‑01‑26 introduces structuredContent payload alongside text content
  • Host loads ui:// resource into sandboxed iframe and communicates via JSON‑RPC 2.0 over postMessage
  • Handshake uses ui/initialize with protocol version negotiation and capability exchange
  • Lifecycle messages include tool‑input, tool‑result, tool‑cancelled, tool‑input‑partial, host‑context‑changed, resource‑teardown
  • Action methods include ui/open‑link, ui/message, ui/request‑display‑mode, ui/update‑model‑context, tools/call
  • Sizing messages: ui/notifications/size‑changed and ui/notifications/preferred‑size
  • Security features: CSP via _meta.ui.csp and Permission Policy for camera, microphone, geolocation, clipboard
  • Host implementations shipping: VS Code Copilot Chat, Claude Desktop, ChatGPT, all with full spec support

Affects

internal

Customer impact

Analyzing matches…

Ask about this story

Impact on an agency? Which customers? Compare historically Risks of waiting