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 20 Oct 2026 18:07 UTC.
Upstream edited
Recorded here
Lines+65added
Lines−67removed
From line
6
where the diff opens
First seen
14 Aug 2026
this site's first read of the page
Recorded edits5to this page, all time
The whole hunk
from line 6, old and new numbered
/
from line 6
66
77This page is for developers who have an MCP server, or are building one, and want it to show UI in Claude.
88
9<Note>
10 If you haven't built the server yet, see [Build an MCP server for Claude](/docs/connectors/building/index).
11</Note>
9> [!NOTE]
10>
11> If you haven't built the server yet, see [Build an MCP server for Claude](/docs/connectors/building/index).
1212
1313To 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.
1414
from line 20
2020
2121Connecting 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:
2222
23<Steps>
24 <Step title="Install Claude Desktop">
25 Install Claude Desktop and sign in.
26 </Step>
23**1. Install Claude Desktop**
2724
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>
25Install Claude Desktop and sign in.
3126
32 <Step title="Add an example server">
33 Add one of these example servers to your `claude_desktop_config.json`:
27**2. Open the configuration file**
3428
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 |
29Go to [**Settings > Developer**](https://claude.ai/desktop/settings/desktop/developer) and click **Edit Config**.
4130
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:
31**3. Add an example server**
4332
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 }
53 }
54 ```
33Add one of these example servers to your `claude_desktop_config.json`:
5534
56 ```json Map theme={null}
57 {
58 "mcpServers": {
59 "map": {
60 "command": "npx",
61 "args": ["-y", "@modelcontextprotocol/server-map", "--stdio"]
62 }
63 }
64 }
65 ```
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 |
6641
67 ```json ShaderToy theme={null}
68 {
69 "mcpServers": {
70 "shadertoy": {
71 "command": "npx",
72 "args": ["-y", "@modelcontextprotocol/server-shadertoy", "--stdio"]
73 }
74 }
75 }
76 ```
42The 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:
7743
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 }
86 }
87 ```
88 </CodeGroup>
89 </Step>
44```json Customer Segmentation theme={null}
45{
46 "mcpServers": {
47 "customer-segmentation": {
48 "command": "npx",
49 "args": ["-y", "@modelcontextprotocol/server-customer-segmentation", "--stdio"]
50 }
51 }
52}
53```
9054
91 <Step title="Save and restart">
92 Save the file and restart the desktop app to connect the server.
93 </Step>
94</Steps>
55```json Map theme={null}
56{
57 "mcpServers": {
58 "map": {
59 "command": "npx",
60 "args": ["-y", "@modelcontextprotocol/server-map", "--stdio"]
61 }
62 }
63}
64```
9565
66```json ShaderToy theme={null}
67{
68 "mcpServers": {
69 "shadertoy": {
70 "command": "npx",
71 "args": ["-y", "@modelcontextprotocol/server-shadertoy", "--stdio"]
72 }
73 }
74}
75```
76
77```json Sheet Music theme={null}
78{
79 "mcpServers": {
80 "sheet-music": {
81 "command": "npx",
82 "args": ["-y", "@modelcontextprotocol/server-sheet-music", "--stdio"]
83 }
84 }
85}
86```
87
88**4. Save and restart**
89
90Save the file and restart the desktop app to connect the server.
91
9692### Ask Claude to use the app
9793
9894Once 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.
from line 104
108104* [SDK API documentation](https://modelcontextprotocol.github.io/ext-apps/api/index.html): full API reference
109105* [Example implementations](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples): vanilla JS, React, Vue, Svelte, and more
110106
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>
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).
112110
113111### Register tools and resources once for every host
114112
No line in this hunk matches that.