Home Docs Claude Documentation 25 Sep 2026

One change · claude-docs

Get started with MCP Apps changedconnectors/building/mcp-apps/getting-started

Nearest release: v2.1.283, published under an hour after 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 25 Sep 2026 18:00 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 25 Sep 2026 18:07 UTC.

Upstream edited 25 Sep 2026 18:00 UTC

Recorded here 25 Sep 2026 18:07 UTC

Lines+122added

Lines−80removed

From line 1 where the diff opens

First seen 14 Aug 2026 this site's first read of the page

Recorded edits2to this page, all time

## Try an example MCP App in Claude Desktop ### Ask Claude to use the app ### Register tools and resources once for every host ### Set `ui.domain` for Claude ### Build with an AI coding agent ### Migrate from the OpenAI Apps SDK ## Send feedback on MCP Apps ## Next steps ## Try an example MCP App ### See it in action ## Migrate from OpenAI Apps SDK

The whole hunk

from line 1, old and new numbered

lines

from line 1

11# Get started with MCP Apps

3> Learn how to test MCP Apps in Claude

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.

5## Try an example MCP App

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.

7This page is for developers who have an MCP server, or are building one, and want it to show UI in Claude.

9<Note>

10 If you haven't built the server yet, see [Build an MCP server for Claude](/docs/connectors/building/index).

11</Note>

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.

15## Try an example MCP App in Claude Desktop

17The MCP Apps repository publishes example servers that you run locally with `npx` and connect to Claude Desktop through its configuration file.

719### Connect an example server

820

9Make sure you have installed and logged into Claude Desktop. Navigate to the [developer settings page](https://claude.ai/desktop/settings/desktop/developer) (**Settings > Developer**) and click the "Edit Config" button.

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:

1022

11Add one of the example servers to your `claude_desktop_config.json`:

23<Steps>

24 <Step title="Install Claude Desktop">

25 Install Claude Desktop and sign in.

26 </Step>

1227

13| Example | Description |

14| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |

15| [**Customer Segmentation**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) | Data visualization with scatter charts and clustering analysis |

16| [**Map**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | Interactive 3D globe viewer using CesiumJS |

17| [**QR Code**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) | QR code generation with customizable colors and styling |

18| [**ShaderToy**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) | Real-time GLSL shader compilation and display |

19| [**Sheet Music**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | ABC notation rendering with interactive audio playback |

20| ⋮ | Explore [more examples](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples)—each with ready-to-use config snippets! |

28 <Step title="Open the configuration file">

29 Go to [**Settings > Developer**](https://claude.ai/desktop/settings/desktop/developer) and click **Edit Config**.

30 </Step>

2131

22<CodeGroup>

23 ```json Customer Segmentation theme={null}

24 {

25 "mcpServers": {

26 "customer-segmentation": {

27 "command": "npx",

28 "args": ["-y", "@modelcontextprotocol/customer-segmentation-server", "--stdio"]

29 }

30 }

31 }

32 ```

32 <Step title="Add an example server">

33 Add one of these example servers to your `claude_desktop_config.json`:

3334

34 ```json Map theme={null}

35 {

36 "mcpServers": {

37 "map": {

38 "command": "npx",

39 "args": ["-y", "@modelcontextprotocol/map-server", "--stdio"]

35 | Example | Description |

36 | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |

37 | [Customer Segmentation](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) | Data visualization with scatter charts and clustering analysis |

38 | [Map](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | Interactive 3D globe viewer using CesiumJS |

39 | [ShaderToy](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) | Real-time GLSL shader compilation and display |

40 | [Sheet Music](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | ABC notation rendering with interactive audio playback |

42 The MCP Apps repository has [more examples](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples), each with a ready-to-use config snippet. The config entry for each example in the table runs its server with `npx`, which fetches the latest published version each time. Pin a version, such as `@modelcontextprotocol/[email protected]`, if you keep an entry beyond trying it out:

44 <CodeGroup>

45 ```json Customer Segmentation theme={null}

46 {

47 "mcpServers": {

48 "customer-segmentation": {

49 "command": "npx",

50 "args": ["-y", "@modelcontextprotocol/server-customer-segmentation", "--stdio"]

51 }

52 }

4053 }

41 }

42 }

43 ```

54 ```

4455

45 ```json QR Code theme={null}

46 {

47 "mcpServers": {

48 "qr": {

49 "command": "npx",

50 "args": ["-y", "@modelcontextprotocol/qr-server", "--stdio"]

56 ```json Map theme={null}

57 {

58 "mcpServers": {

59 "map": {

60 "command": "npx",

61 "args": ["-y", "@modelcontextprotocol/server-map", "--stdio"]

62 }

63 }

5164 }

52 }

53 }

54 ```

65 ```

5566

56 ```json ShaderToy theme={null}

57 {

58 "mcpServers": {

59 "shadertoy": {

60 "command": "npx",

61 "args": ["-y", "@modelcontextprotocol/shadertoy-server", "--stdio"]

67 ```json ShaderToy theme={null}

68 {

69 "mcpServers": {

70 "shadertoy": {

71 "command": "npx",

72 "args": ["-y", "@modelcontextprotocol/server-shadertoy", "--stdio"]

73 }

74 }

6275 }

63 }

64 }

65 ```

76 ```

6677

67 ```json Sheet Music theme={null}

68 {

69 "mcpServers": {

70 "sheet-music": {

71 "command": "npx",

72 "args": ["-y", "@modelcontextprotocol/sheet-music-server", "--stdio"]

78 ```json Sheet Music theme={null}

79 {

80 "mcpServers": {

81 "sheet-music": {

82 "command": "npx",

83 "args": ["-y", "@modelcontextprotocol/server-sheet-music", "--stdio"]

84 }

85 }

7386 }

74 }

75 }

76 ```

77</CodeGroup>

87 ```

88 </CodeGroup>

89 </Step>

7890

79Save and restart the desktop app to connect.

91 <Step title="Save and restart">

92 Save the file and restart the desktop app to connect the server.

93 </Step>

94</Steps>

8095

81### See it in action

96### Ask Claude to use the app

8297

83Once your local server is connected, prompt Claude to use it. For example, with the customer segmentation server, ask Claude to show you recent customer data.

98Once 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.

8499

85Claude will prompt you for permission to display the App. Click "Always allow", and you'll see the MCP App render inline in the conversation.

100Claude 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.

86101

87102## Build your own MCP App

88103

89Ready to add an MCP App to your own MCP server? Here are the key resources:

104To add an MCP App to your own MCP server, start from the SDK documentation and examples:

90105

91* [MCP Apps Quickstart](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html) - Step-by-step guide to building your first MCP App

92* [SDK API Documentation](https://modelcontextprotocol.github.io/ext-apps/api/index.html) - Full API reference

93* [Example implementations](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) - Vanilla JS, React, Vue, Svelte, and more

106* [Add an interactive UI to your MCP server](/docs/connectors/building/mcp-apps/quickstart): add a one-tool MCP App to the quickstart server on this site, in plain JavaScript with no build step

107* [MCP Apps Quickstart](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html): step-by-step guide to building your first MCP App

108* [SDK API documentation](https://modelcontextprotocol.github.io/ext-apps/api/index.html): full API reference

109* [Example implementations](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples): vanilla JS, React, Vue, Svelte, and more

94110

95If you are using an AI coding agent, [MCP Apps skills](https://github.com/modelcontextprotocol/ext-apps/tree/main/plugins/mcp-apps) provide guided development for agents that support the [Agent Skills](https://agentskills.io) standard, including Claude Code, Cursor, Gemini CLI, and others. In Claude Code, you can install the MCP Apps skills plugin with the following commands:

111<Tip>To test a remote MCP App locally, connect to it through a proxy such as [mcp-remote](https://www.npmjs.com/package/mcp-remote).</Tip>

96112

113### Register tools and resources once for every host

114

115An 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.

116

117### Set `ui.domain` for Claude

118

119Each 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:

120

121```shell theme={null}

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

97123```

124

125For `https://example.com/mcp`, the command prints:

126

127```text theme={null}

128c3d80a4ed901ee05b21755a88273b4a4.claudemcpcontent.com

129```

130

131If Claude reports `Invalid ui.domain format` or `ui.domain mismatch`, see [Troubleshoot MCP Apps](/docs/connectors/building/mcp-apps/troubleshooting#ui-domain-validation-fails).

132

133### Build with an AI coding agent

134

135If 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:

136

137```text theme={null}

98138/plugin marketplace add modelcontextprotocol/ext-apps

99/plugin install mcp-apps@modelcontextprotocol-ext-apps

139/plugin install mcp-apps@mcp-apps

100140```

101141

102Once installed, ask your agent to "Create an MCP App" or "Add a UI to my MCP tool".

142Once the MCP Apps skills plugin is installed, ask your agent to "Create an MCP App" or "Add a UI to my MCP tool".

103143

104<Tip>You can test remote MCP Apps locally via a proxy like [mcp-remote](https://www.npmjs.com/package/mcp-remote).</Tip>

144### Migrate from the OpenAI Apps SDK

105145

106## Migrate from OpenAI Apps SDK

146If 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".

107147

108If you are migrating an existing app from the OpenAI Apps SDK to the MCP Apps SDK, see the [migration reference](https://modelcontextprotocol.github.io/ext-apps/api/documents/Migrate_OpenAI_App.html).

148## Send feedback on MCP Apps

109149

110You can also use the MCP Apps skills mentioned above to help migrate your apps. Ask your agent to "Migrate from OpenAI Apps SDK" or "Convert my OpenAI App to an MCP App".

150To 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).

111151

112***

152## Next steps

113153

114We'd love to see what you build! Send feedback to [[email protected]](mailto:[email protected]) or open an issue on the [ext-apps repository](https://github.com/modelcontextprotocol/ext-apps/issues).

154* [Design guidelines](/docs/connectors/building/mcp-apps/design-guidelines): display modes, mobile layout, and style variables for an app that feels native to Claude

155* [Troubleshoot MCP Apps](/docs/connectors/building/mcp-apps/troubleshooting): developer tools and fixes for an app that doesn't render

156* [Submit a connector](/docs/connectors/building/submission): list your server and its MCP App screenshots in the directory

115157