Get started with MCP Apps changedconnectors/building/mcp-apps/getting-started
Nearest release: v2.1.322, published 15 hours before upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.
Upstream edited this page at 10 Nov 2026 17:02 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 10 Nov 2026 17:07 UTC.
Upstream edited
Recorded here
Lines+52added
Lines−15removed
From line
1
where the diff opens
First seen
14 Aug 2026
this site's first read of the page
Recorded edits7to this page, all time
## What an MCP App can do in Claude ### Check what a capability requires
The whole hunk
from line 1, old and new numbered
/
from line 1
11# Get started with MCP Apps
22
3> Try example MCP Apps in Claude Desktop, then use the MCP Apps SDK, examples, and agent skills to add interactive UI to your own MCP server.
3> See what an MCP App can do in Claude, such as the side panel, app tools, and embedded websites, then try an example and build your own with the SDK.
44
5An MCP App is interactive UI that your MCP server renders inside a Claude conversation, such as an interactive chart or map. You build one with the [MCP Apps SDK](https://modelcontextprotocol.github.io/ext-apps/api/index.html) as part of your own MCP server, so it reaches people the same way the rest of your plugin's connector does.
5An MCP App is interactive UI that your MCP server renders inside a Claude conversation, such as an interactive chart or map. You build one with the [MCP Apps SDK](https://modelcontextprotocol.github.io/ext-apps/api/index.html) as part of your own MCP server.
66
77This page is for developers who have an MCP server, or are building one, and want it to show UI in Claude.
88
99> [!NOTE]
1010>
11> If you haven't built the server yet, see [Build an MCP server for Claude](https://claude.com/docs/connectors/building/index.md).
11> These cases are covered on other pages:
12>
13> * **Deciding whether your MCP server needs UI**: see [Decide what to include in your plugin](https://claude.com/docs/connectors/building/what-to-build.md)
14> * **Building the server first**: see [Build an MCP server for Claude](https://claude.com/docs/connectors/building/index.md)
15> * **Finding and using connectors that have an MCP App**: see [Use interactive connectors in Claude](https://support.claude.com/en/articles/13454812-use-interactive-connectors-in-claude)
1216
13To see how an MCP App looks and behaves, [try an example in Claude Desktop](#try-an-example-mcp-app-in-claude-desktop) first, then [build your own](#build-your-own-mcp-app) from the SDK quickstart, the examples, or the agent skills.
17Start at the section that matches where you are:
1418
19* **Scoping an app, or extending one that already renders in Claude**: see [what an MCP App can do in Claude](#what-an-mcp-app-can-do-in-claude), such as open in the side panel, embed your website, or give Claude tools to call
20* **New to MCP Apps**: [try an example in Claude Desktop](#try-an-example-mcp-app-in-claude-desktop) to see how an MCP App looks and behaves
21* **Ready to build**: [build your own MCP App](#build-your-own-mcp-app) from a quickstart, an example implementation, or the MCP Apps skills for AI coding agents
22
23## What an MCP App can do in Claude
24
25* **[Side panel and full screen](https://claude.com/docs/connectors/building/mcp-apps/display-modes.md)**: show your app beside the conversation or full screen when it needs more room than the conversation gives it
26* **[Entry points](https://claude.com/docs/connectors/building/mcp-apps/entry-points.md)**: let people open your app from the **Artifacts** page in Claude, without asking Claude for the app, and let them pin it to the sidebar
27* **[App tools](https://claude.com/docs/connectors/building/mcp-apps/app-tools.md)**: register tools in your app's UI so that Claude can change what your app shows, such as a list on screen or the selected rows
28* **[Messages](https://claude.com/docs/connectors/building/mcp-apps/send-messages.md)**: send Claude a message from your app, such as when someone clicks a button in your app that asks Claude for a plan
29* **[Embedded websites](https://claude.com/docs/connectors/building/mcp-apps/embedded-sites.md)**: load your own website in an `<iframe>` inside your app, such as your product's editor or dashboard
30* **[Downloads](https://claude.com/docs/connectors/building/mcp-apps/download-files.md)**: save a file from your app to the user's device
31
32### Check what a capability requires
33
34Check requirements such as these before you build:
35
36* **Organization access**: before you build on a capability such as the side panel, entry points, or app tools, check whether your organization has access by following the steps on that capability's page
37* **Remote server**: app tools, entry points, and embedded websites need a connector that's backed by a [remote server](https://claude.com/docs/connectors/building/index.md#choose-where-the-server-runs)
38* **Verified listing**: for a directory connector, entry points and embedded websites are available only under a [Verified](https://claude.com/docs/connectors/verification.md#verified) listing.
39 * People who install your connector from a [Community](https://claude.com/docs/connectors/verification.md#community) listing don't get either one, even if both worked while you tested with a custom connector.
40 * To compare a directory connector with a custom connector, see [Directory connectors vs custom connectors](https://claude.com/docs/connectors/building/directory-vs-custom.md).
41
42Claude Desktop runs the [example servers](#try-an-example-mcp-app-in-claude-desktop) as local servers, so test app tools, entry points, and embedded websites with your own server.
43
44[Add your server to Claude as a custom connector](https://claude.com/docs/connectors/building/testing.md#test-in-claude-as-a-custom-connector), and [expose it through a tunnel](https://claude.com/docs/connectors/building/testing.md#test-a-local-server) first if it runs on your machine. For the conditions on embedded websites in a custom connector, see [Where embedded sites load](https://claude.com/docs/connectors/building/mcp-apps/embedded-sites.md#where-embedded-sites-load).
45
1546## Try an example MCP App in Claude Desktop
1647
1748The MCP Apps repository publishes example servers that you run locally with `npx` and connect to Claude Desktop through its configuration file.
from line 49
1849
1950### Connect an example server
2051
21Connecting an example server means adding its entry to Claude Desktop's configuration file, so that the desktop app runs the server locally with `npx`. To connect one:
22
2352**1. Install Claude Desktop**
2453
2554Install Claude Desktop and sign in.
from line 122
93122
94123Once the server is connected, prompt Claude to use it. For example, with the customer segmentation server connected, ask Claude to show you recent customer data.
95124
96Claude asks for permission to display the app. Click **Allow**, or **Always allow** for a server you trust, and the MCP App renders inline in the conversation.
125Claude asks for permission to display the app. Click **Allow once**, or **Always allow** for a server you trust, and the MCP App renders inline in the conversation. If the permission setting in the message box is **Auto**, Claude can display the app without asking.
97126
127If the tool runs but no app appears, [Troubleshoot MCP Apps](https://claude.com/docs/connectors/building/mcp-apps/troubleshooting.md#tool-call-appears-but-the-app-is-invisible) lists what to check.
128
98129## Build your own MCP App
99130
100To add an MCP App to your own MCP server, start from the SDK documentation and examples:
101
102131* [Add an interactive UI to your MCP server](https://claude.com/docs/connectors/building/mcp-apps/quickstart.md): add a one-tool MCP App to the quickstart server on this site, in plain JavaScript with no build step
103132* [MCP Apps Quickstart](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html): step-by-step guide to building your first MCP App
104133* [SDK API documentation](https://modelcontextprotocol.github.io/ext-apps/api/index.html): full API reference
105134* [Example implementations](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples): vanilla JS, React, Vue, Svelte, and more
106135
107> [!TIP]
108>
109> To test a remote MCP App locally, connect to it through a proxy such as [mcp-remote](https://www.npmjs.com/package/mcp-remote).
136To test a server on your machine as a custom connector in Claude, see [Test a local server](https://claude.com/docs/connectors/building/testing.md#test-a-local-server).
110137
111138### Register tools and resources once for every host
112139
113An MCP App can run in Claude and in other hosts that support MCP Apps from one codebase. On the server, register your tools and resources with [`registerAppTool()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/server-helpers.registerAppTool.html) and [`registerAppResource()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/server-helpers.registerAppResource.html), which generate each host's metadata for you. In the app, call [`App.connect()`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#connect) without a transport argument, and the SDK detects the host and picks the transport.
140An MCP App can run in Claude and in other hosts that support MCP Apps from one codebase.
114141
142* **On the server**: register your tools and resources with [`registerAppTool()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/server-helpers.registerAppTool.html) and [`registerAppResource()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/server-helpers.registerAppResource.html), which generate each host's metadata for you
143* **In the app**: call [`App.connect()`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#connect) without a transport argument, and the SDK detects the host and picks the transport
144
115145### Set `ui.domain` for Claude
116146
117Each host defines its own format for the [`Resource._meta.ui.domain`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceMeta.html#domain) field, the sandbox origin your app is served from. For Claude, the value is the first 32 hex characters of the SHA-256 of your server URL, followed by `.claudemcpcontent.com`. Compute it with this command, replacing `https://example.com/mcp` with your server URL:
147Each host defines its own format for the [`Resource._meta.ui.domain`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceMeta.html#domain) field, the sandbox origin your app is served from.
118148
149For Claude, the value is the first 32 hex characters of the SHA-256 of your server URL, followed by `.claudemcpcontent.com`. Compute it with this command, replacing `https://example.com/mcp` with your server URL:
150
119151```shell theme={null}
120152node -e 'const yourServerUrl = "https://example.com/mcp"; console.log(require("crypto").createHash("sha256").update(yourServerUrl).digest("hex").slice(0,32) + ".claudemcpcontent.com")'
121153```
from line 162
130162
131163### Build with an AI coding agent
132164
133If you use an AI coding agent, the [MCP Apps skills](https://github.com/modelcontextprotocol/ext-apps/tree/main/plugins/mcp-apps) guide it through MCP App development. They work in any agent that supports the [Agent Skills](https://agentskills.io) standard, including Claude Code. In Claude Code, install the MCP Apps skills plugin with these commands:
165If you use an AI coding agent, the [MCP Apps skills](https://github.com/modelcontextprotocol/ext-apps/tree/main/plugins/mcp-apps) guide it through MCP App development. They work in any agent that supports the [Agent Skills](https://agentskills.io) standard, including Claude Code.
134166
167In Claude Code, install the MCP Apps skills plugin with these commands:
168
135169```text theme={null}
136170/plugin marketplace add modelcontextprotocol/ext-apps
137171/plugin install mcp-apps@mcp-apps
from line 177
143177
144178If you have an existing app built on the OpenAI Apps SDK, follow the [migration reference](https://modelcontextprotocol.github.io/ext-apps/api/documents/Migrate_OpenAI_App.html) to move it to the MCP Apps SDK. The MCP Apps skills can also do the migration: ask your agent to "Migrate from OpenAI Apps SDK" or "Convert my OpenAI App to an MCP App".
145179
180If your tools already declare global [entry points](https://claude.com/docs/connectors/building/mcp-apps/entry-points.md) under the `openai/ui` key, check what else each tool needs in Claude in [Mark a tool as a global entry point](https://claude.com/docs/connectors/building/mcp-apps/entry-points.md#mark-a-tool-as-a-global-entry-point).
181
146182## Send feedback on MCP Apps
147183
148184To report a problem or suggest a change to MCP Apps, email [[email protected]](mailto:[email protected]) or open an issue on the [ext-apps repository](https://github.com/modelcontextprotocol/ext-apps/issues).
from line 188
152188* [Design guidelines](https://claude.com/docs/connectors/building/mcp-apps/design-guidelines.md): display modes, mobile layout, and style variables for an app that feels native to Claude
153189* [Troubleshoot MCP Apps](https://claude.com/docs/connectors/building/mcp-apps/troubleshooting.md): developer tools and fixes for an app that doesn't render
154190* [Submit a connector](https://claude.com/docs/connectors/building/submission.md): list your server and its MCP App screenshots in the directory
191* [Manage your listing after publishing](https://claude.com/docs/connectors/building/after-publishing.md#update-a-published-connector-or-plugin): update a connector that's already listed in the directory
155192
No line in this hunk matches that.