Based on each vendor’s official docs, checked November 12, 2026

MCP Apps: add interactive UI to an MCP server for Claude and Cursor

An MCP App is interactive UI that an MCP server renders inside a host conversation, such as a chart, map, form or dashboard, instead of returning text alone. This guide follows official sources checked on November 12, 2026: Anthropic's MCP Apps getting-started and quickstart docs, the Model Context Protocol Apps overview, the MCP Apps announcement, and Cursor's MCP documentation. It explains how to add a UI to a server with the official SDK, what Claude and Cursor document today, and where support is still host-specific. It does not invent a price for MCP Apps, which is a protocol extension rather than a paid add-on, and it does not claim that every MCP host will render the UI. If a host cannot render an app, official Cursor docs say the same tool should still work through normal MCP responses. That progressive-enhancement rule is the safe default to design for.

1. 1. Understand what an MCP App is, and what it is not

   The official MCP Apps overview describes a server that declares a ui:// resource containing an HTML interface. When the model calls the tool, a supporting host fetches that resource and displays it in a sandboxed iframe, then exchanges data with the UI over postMessage. The host controls which capabilities the app may use. This is an official MCP extension, identified as io.modelcontextprotocol/ui, not a replacement for ordinary tools, resources or prompts. Text and structured results still matter, because a host that does not implement the extension should be able to use the same tool without the UI. Do not put secrets in the HTML you ship, and do not assume the iframe can read the host's cookies, DOM or local storage; the documented security model is designed to prevent that.

2. 2. Install the official SDK and start from a small tool

   Anthropic's quickstart installs the 1.x line of the MCP Apps SDK, which it pairs with the 1.x MCP SDK, using npm install @modelcontextprotocol/ext-apps@^1. The package provides server helpers that attach UI metadata to tools and resources, and a small browser client that the UI loads to talk to the host. Official docs tell you to register tools and resources with registerAppTool() and registerAppResource(), which generate each host's metadata, and to call App.connect() in the app without a transport argument so the SDK can detect the host. Start with one tool and a small UI, such as the roll-dice example in the Anthropic quickstart, and confirm from the command line that the server advertises the UI before you try it in a host.

   npm install @modelcontextprotocol/ext-apps@^1

3. 3. Try an official example in Claude Desktop

   Anthropic documents example servers in the MCP Apps repository that you run locally with npx and connect through Claude Desktop's configuration file (Settings > Developer > Edit Config). Official examples include Customer Segmentation, Map, ShaderToy and Sheet Music, with config snippets that call packages such as @modelcontextprotocol/server-map. Pin a version if you keep an entry beyond a first try. After you save the file and restart Desktop, ask Claude to use the app; Claude asks for permission to display it, and you can allow it once or always. If the permission setting in the message box is Auto, Claude can display the app without asking. If the tool runs but no app appears, use Anthropic's Troubleshoot MCP Apps page rather than guessing. Claude Desktop runs these examples as local servers; capabilities that need a remote connector should be tested with your own hosted server.

4. 4. Set Claude's ui.domain if the host is Claude

   Each host defines its own format for Resource._meta.ui.domain, the sandbox origin the app is served from. For Claude, official docs say the value is the first 32 hex characters of the SHA-256 of your server URL, followed by .claudemcpcontent.com. Anthropic publishes a short node command to compute it, and gives c3d80a4ed901ee05b21755a88273b4a4.claudemcpcontent.com as the result for https://example.com/mcp. If Claude reports an invalid or mismatched ui.domain, check this value first. Other hosts do not use that hostname, so keep the registration helpers rather than hard-coding a Claude-only domain into every build.

   node -e 'const yourServerUrl = "https://example.com/mcp"; console.log(require("crypto").createHash("sha256").update(yourServerUrl).digest("hex").slice(0,32) + ".claudemcpcontent.com")'

5. 5. Check what Cursor documents, and design for hosts that do not render UI

   Cursor's official MCP documentation, checked November 12, 2026, lists Apps (extension) as Supported: interactive UI views returned by MCP tools. It says MCP tools can return interactive UI along with standard tool output, and that MCP Apps follow progressive enhancement: if a host cannot render app UI, the same tool still works through normal MCP responses. That is the behavior to test in Cursor after your server advertises the UI. This guide does not invent Cursor-specific display modes beyond that page. The official MCP Apps overview also lists several other clients; the extension support matrix on the MCP site is community-maintained, so confirm each additional host in that host's own docs before you promise a UI there.

6. 6. Build with an agent only after the contract is clear

   Anthropic documents MCP Apps skills that work in any agent supporting the Agent Skills standard, including Claude Code. In Claude Code you can install them with /plugin marketplace add modelcontextprotocol/ext-apps and /plugin install mcp-apps@mcp-apps, then ask the agent to create an MCP App or add a UI to a tool. Those skills help you build the server; they are not a claim that Claude Code itself renders the app UI in the terminal. If you already have an OpenAI Apps SDK app, official Anthropic docs include a migration reference, and the skills can be asked to migrate it. Keep credentials out of the UI bundle, and review any embedded-website or entry-point requirement before you depend on it.

   /plugin marketplace add modelcontextprotocol/ext-apps
   /plugin install mcp-apps@mcp-apps

What Claude documents beyond the core extension

In Claude, official docs describe more than an inline card. An MCP App can open in a side panel or full screen, expose entry points from the Artifacts page, register app tools so Claude can change what is on screen, send Claude a message from a button in the UI, embed a website, and offer downloads to the user's device. Those capabilities have requirements you should read before you build: some need organization access, some need a connector backed by a remote server, and for a directory connector, entry points and embedded websites are available only under a Verified listing. People who install the same connector from a Community listing do not get those two capabilities, even if they worked while you tested a custom connector.

Claude connects to remote servers from Anthropic's cloud, so a localhost address will not work there. For a server on your machine, official docs tell you to expose it through a tunnel and add it as a custom connector, and to read the conditions on embedded websites. Feedback on MCP Apps can be sent to mcp-apps@anthropic.com or filed on the ext-apps repository.

Security and host control

The official MCP Apps overview says apps run in a sandboxed iframe, isolated from the host. The sandbox is described as preventing the app from accessing the parent window's DOM, reading the host's cookies or local storage, navigating the parent page, or executing scripts in the parent context. Communication goes through the postMessage API, and the host decides which capabilities to grant, including which tools the app may call or whether it may open links.

That model is strong isolation, not a license to ship untrusted HTML without review. Treat the UI as part of your security surface: avoid embedding secrets, be careful with embedded websites, and test what happens when a host refuses a capability. If you are building a host rather than a server, official docs point at the App Bridge module and a basic-host example rather than inventing your own message protocol.

Client support: vendor docs first, then the community matrix

This guide treats two vendor pages as confirmed on November 12, 2026. Anthropic documents MCP Apps in Claude, including Claude Desktop examples. Cursor documents the Apps extension as supported, with progressive enhancement when a host cannot render the UI. The MCP Apps overview also names VS Code GitHub Copilot, Microsoft 365 Copilot, Goose, Postman, MCPJam and Archestra.AI; the extension support matrix is explicitly community-maintained. This guide does not treat that matrix as a substitute for a vendor page, and it does not claim a VS Code setting or a ChatGPT plan limit that was not opened in official docs today.

The January 26, 2026 MCP Apps blog post describes MCP Apps as the first official MCP extension, with a stable specification dated 2026-01-26. Features have been added in host-specific docs since then, especially on the Claude side, so prefer the current Anthropic and Cursor pages for product behavior, and the specification plus SDK for what you send on the wire.

Tips

• Design the tool to return a useful non-UI result, so a host without MCP Apps support still works.
• Pin example server package versions if you keep a Desktop config beyond a first try.
• Compute Claude's ui.domain from the live server URL; a mismatch is a common render failure.
• Read Claude's Verified-listing rules before you depend on entry points or embedded websites in the directory.
• Use the official MCP Apps skills in Claude Code to build a server; do not assume the terminal will render the UI.

Next steps

Sources

• https://claude.com/docs/connectors/building/mcp-apps/getting-started · checked 2026-11-12
• https://claude.com/docs/connectors/building/mcp-apps/quickstart · checked 2026-11-12
• https://modelcontextprotocol.io/extensions/apps/overview · checked 2026-11-12
• https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/ · checked 2026-11-12
• https://cursor.com/docs/mcp · checked 2026-11-12
• https://modelcontextprotocol.io/extensions/client-matrix · checked 2026-11-12