AI Engineering/Phase 13/Lesson 14

MCP Apps — Interactive UI Resources via `ui://`

Text-only tool output caps what agents can show. MCP Apps (SEP-1724, official January 26, 2026) let a tool return sandboxed interactive HTML rendered inline in Claude Desktop, ChatGPT, Cursor, Goose, and VS Code. Dashboards, forms, maps, 3D scenes, all through one extension. This lesson walks the `ui://` resource scheme, the `text/html;profile=mcp-app` MIME, the iframe-sandbox postMessage protocol, and the security surface that comes with letting a server render HTML.

Build 1.3 hr Python (stdlib, UI resource emitter), HTML (sample app)

Prerequisites: Phase 13 · 07 (MCP server), Phase 13 · 10 (resources)

#Learning Objectives

Return a ui:// resource from a tool call and set the correct MIME and metadata.
Declare a tool's associated UI with _meta.ui.resourceUri, _meta.ui.csp, and _meta.ui.permissions.
Implement the iframe sandbox postMessage JSON-RPC for UI-to-host communication.
Apply CSP and permissions-policy defaults that defend against UI-originated attacks.

Full Access lesson

Keep going. The rest of this lesson is one step away.

Unlock all 503 lessons, video, code, quizzes and every future update. Pay in your own currency with Paystack.

See plans Sign in

The text and code of this lesson are based on AI Engineering from Scratch by Rohit Ghumare, MIT licensed.