@modelcontextprotocol/ext-apps 0.4.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +448 -30
- package/dist/docs/patterns.d.ts +9 -0
- package/dist/src/app-bridge.d.ts +187 -194
- package/dist/src/app-bridge.examples.d.ts +9 -0
- package/dist/src/app-bridge.js +17 -17
- package/dist/src/app-with-deps.js +9 -9
- package/dist/src/app.d.ts +224 -197
- package/dist/src/app.examples.d.ts +9 -0
- package/dist/src/app.js +10 -10
- package/dist/src/generated/schema.d.ts +47 -35
- package/dist/src/generated/schema.test.d.ts +1 -0
- package/dist/src/message-transport.d.ts +17 -17
- package/dist/src/message-transport.examples.d.ts +9 -0
- package/dist/src/react/index.d.ts +8 -10
- package/dist/src/react/index.examples.d.ts +6 -0
- package/dist/src/react/index.js +8 -8
- package/dist/src/react/react-with-deps.js +8 -8
- package/dist/src/react/useApp.d.ts +45 -36
- package/dist/src/react/useApp.examples.d.ts +6 -0
- package/dist/src/react/useAutoResize.d.ts +10 -9
- package/dist/src/react/useAutoResize.examples.d.ts +6 -0
- package/dist/src/react/useDocumentTheme.d.ts +11 -15
- package/dist/src/react/useDocumentTheme.examples.d.ts +6 -0
- package/dist/src/react/useHostStyles.d.ts +33 -42
- package/dist/src/react/useHostStyles.examples.d.ts +6 -0
- package/dist/src/server/index.d.ts +169 -88
- package/dist/src/server/index.examples.d.ts +9 -0
- package/dist/src/server/index.js +9 -9
- package/dist/src/spec.types.d.ts +55 -39
- package/dist/src/styles.d.ts +71 -28
- package/dist/src/styles.examples.d.ts +9 -0
- package/dist/src/types.d.ts +1 -1
- package/package.json +25 -8
package/README.md
CHANGED
|
@@ -2,33 +2,44 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@modelcontextprotocol/ext-apps) [](https://modelcontextprotocol.github.io/ext-apps/api/)
|
|
4
4
|
|
|
5
|
-
This repo contains the SDK and
|
|
5
|
+
This repo contains the SDK and specification for MCP Apps Extension ([SEP-1865](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)).
|
|
6
|
+
|
|
7
|
+
## Specification
|
|
8
|
+
|
|
9
|
+
| Version | Status | Link |
|
|
10
|
+
| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| **2026-01-26** | Stable | [specification/2026-01-26/apps.mdx](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx) |
|
|
12
|
+
| draft | Development | [specification/draft/apps.mdx](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx) |
|
|
6
13
|
|
|
7
14
|
MCP Apps are a proposed standard inspired by [MCP-UI](https://mcpui.dev/) and [OpenAI's Apps SDK](https://developers.openai.com/apps-sdk/) to allow MCP Servers to display interactive UI elements in conversational MCP clients / chatbots.
|
|
8
15
|
|
|
16
|
+
## Why MCP Apps?
|
|
17
|
+
|
|
18
|
+
MCP tools return text and structured data. That works for many cases, but not when you need an interactive UI, like a chart, form, or video player.
|
|
19
|
+
|
|
20
|
+
MCP Apps provide a standardized way to deliver interactive UIs from MCP servers. Your UI renders inline in the conversation, in context, in any compliant host.
|
|
21
|
+
|
|
9
22
|
## How It Works
|
|
10
23
|
|
|
11
|
-
MCP Apps extend the Model Context Protocol
|
|
24
|
+
MCP Apps extend the Model Context Protocol by letting tools declare UI resources:
|
|
12
25
|
|
|
13
|
-
1. **Tool
|
|
14
|
-
2. **
|
|
26
|
+
1. **Tool definition** — Your tool declares a `ui://` resource containing its HTML interface
|
|
27
|
+
2. **Tool call** — The LLM calls the tool on your server
|
|
15
28
|
3. **Host renders** — The host fetches the resource and displays it in a sandboxed iframe
|
|
16
29
|
4. **Bidirectional communication** — The host passes tool data to the UI via notifications, and the UI can call other tools through the host
|
|
17
30
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
## Overview
|
|
31
|
+
## Using the SDK
|
|
21
32
|
|
|
22
33
|
This SDK serves two audiences:
|
|
23
34
|
|
|
24
|
-
### App Developers
|
|
35
|
+
### For App Developers
|
|
25
36
|
|
|
26
37
|
Build interactive UIs that run inside MCP-enabled chat clients.
|
|
27
38
|
|
|
28
39
|
- **SDK for Apps**: `@modelcontextprotocol/ext-apps` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/app.html)
|
|
29
40
|
- **React hooks**: `@modelcontextprotocol/ext-apps/react` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/_modelcontextprotocol_ext-apps_react.html)
|
|
30
41
|
|
|
31
|
-
### Host Developers
|
|
42
|
+
### For Host Developers
|
|
32
43
|
|
|
33
44
|
Embed and communicate with MCP Apps in your chat application.
|
|
34
45
|
|
|
@@ -44,53 +55,460 @@ We have [contributed a tentative implementation](https://github.com/MCP-UI-Org/m
|
|
|
44
55
|
npm install -S @modelcontextprotocol/ext-apps
|
|
45
56
|
```
|
|
46
57
|
|
|
47
|
-
|
|
58
|
+
### Install Agent Skills
|
|
59
|
+
|
|
60
|
+
This repository provides two [Agent Skills](https://agentskills.io/) for building MCP Apps. You can install the skills as a Claude Code plugin:
|
|
48
61
|
|
|
49
|
-
```json
|
|
50
|
-
{
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"@modelcontextprotocol/ext-apps": "^0.0.1"
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
62
|
```
|
|
63
|
+
/plugin marketplace add modelcontextprotocol/ext-apps
|
|
64
|
+
/plugin install mcp-apps@modelcontextprotocol-ext-apps
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
For more information, including instructions for installing the skills in your favorite AI coding agent, see the [agent skills guide](./docs/agent-skills.md).
|
|
56
68
|
|
|
57
69
|
## Examples
|
|
58
70
|
|
|
71
|
+
The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains demo apps showcasing real-world use cases.
|
|
72
|
+
|
|
59
73
|
<!-- prettier-ignore-start -->
|
|
60
74
|
| | | |
|
|
61
75
|
|:---:|:---:|:---:|
|
|
62
|
-
| [](examples/map-server) | [](examples/threejs-server) | [](examples/shadertoy-server) |
|
|
63
|
-
| [**Map**](examples/map-server) | [**Three.js**](examples/threejs-server) | [**ShaderToy**](examples/shadertoy-server) |
|
|
64
|
-
| [](examples/sheet-music-server) | [](examples/wiki-explorer-server) | [](examples/cohort-heatmap-server) |
|
|
65
|
-
| [**Sheet Music**](examples/sheet-music-server) | [**Wiki Explorer**](examples/wiki-explorer-server) | [**Cohort Heatmap**](examples/cohort-heatmap-server) |
|
|
66
|
-
| [](examples/scenario-modeler-server) | [](examples/budget-allocator-server) | [](examples/customer-segmentation-server) |
|
|
67
|
-
| [**Scenario Modeler**](examples/scenario-modeler-server) | [**Budget Allocator**](examples/budget-allocator-server) | [**Customer Segmentation**](examples/customer-segmentation-server) |
|
|
68
|
-
| [](examples/system-monitor-server) | [](examples/transcript-server) | [](examples/video-resource-server) |
|
|
69
|
-
| [**System Monitor**](examples/system-monitor-server) | [**Transcript**](examples/transcript-server) | [**Video Resource**](examples/video-resource-server) |
|
|
70
|
-
| [](examples/pdf-server) | [](examples/qr-server) | |
|
|
71
|
-
| [**PDF Server**](examples/pdf-server) | [**QR Code (Python)**](examples/qr-server) | |
|
|
76
|
+
| [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) |
|
|
77
|
+
| [**Map**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | [**Three.js**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) | [**ShaderToy**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) |
|
|
78
|
+
| [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/wiki-explorer-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/cohort-heatmap-server) |
|
|
79
|
+
| [**Sheet Music**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | [**Wiki Explorer**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/wiki-explorer-server) | [**Cohort Heatmap**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/cohort-heatmap-server) |
|
|
80
|
+
| [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/scenario-modeler-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/budget-allocator-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) |
|
|
81
|
+
| [**Scenario Modeler**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/scenario-modeler-server) | [**Budget Allocator**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/budget-allocator-server) | [**Customer Segmentation**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) |
|
|
82
|
+
| [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/system-monitor-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/transcript-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/video-resource-server) |
|
|
83
|
+
| [**System Monitor**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/system-monitor-server) | [**Transcript**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/transcript-server) | [**Video Resource**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/video-resource-server) |
|
|
84
|
+
| [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/pdf-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) | [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/say-server) |
|
|
85
|
+
| [**PDF Server**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/pdf-server) | [**QR Code (Python)**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) | [**Say Demo**](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/say-server) |
|
|
72
86
|
|
|
73
87
|
### Starter Templates
|
|
74
88
|
|
|
75
89
|
| | |
|
|
76
90
|
|:---:|:---|
|
|
77
|
-
| [](examples/basic-server-react) | The same app built with different frameworks — pick your favorite!<br><br>[React](examples/basic-server-react) · [Vue](examples/basic-server-vue) · [Svelte](examples/basic-server-svelte) · [Preact](examples/basic-server-preact) · [Solid](examples/basic-server-solid) · [Vanilla JS](examples/basic-server-vanillajs) |
|
|
91
|
+
| [](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) | The same app built with different frameworks — pick your favorite!<br><br>[React](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) · [Vue](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) · [Svelte](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) · [Preact](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) · [Solid](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) · [Vanilla JS](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) |
|
|
78
92
|
<!-- prettier-ignore-end -->
|
|
79
93
|
|
|
80
|
-
|
|
94
|
+
### Running the Examples
|
|
81
95
|
|
|
82
|
-
|
|
96
|
+
#### With basic-host
|
|
97
|
+
|
|
98
|
+
To run all examples locally using [basic-host](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) (the reference host implementation included in this repo):
|
|
83
99
|
|
|
84
100
|
```bash
|
|
101
|
+
git clone https://github.com/modelcontextprotocol/ext-apps.git
|
|
102
|
+
cd ext-apps
|
|
85
103
|
npm install
|
|
86
104
|
npm start
|
|
87
105
|
```
|
|
88
106
|
|
|
89
107
|
Then open http://localhost:8080/.
|
|
90
108
|
|
|
109
|
+
#### With MCP Clients
|
|
110
|
+
|
|
111
|
+
To use these examples with MCP clients that support the stdio transport (such as Claude Desktop or VS Code), add this MCP server configuration to your client's settings:
|
|
112
|
+
|
|
113
|
+
<details>
|
|
114
|
+
<summary>MCP client configuration for all examples (using stdio)</summary>
|
|
115
|
+
|
|
116
|
+
```json
|
|
117
|
+
{
|
|
118
|
+
"mcpServers": {
|
|
119
|
+
"basic-react": {
|
|
120
|
+
"command": "npx",
|
|
121
|
+
"args": [
|
|
122
|
+
"-y",
|
|
123
|
+
"--silent",
|
|
124
|
+
"--registry=https://registry.npmjs.org/",
|
|
125
|
+
"@modelcontextprotocol/server-basic-react",
|
|
126
|
+
"--stdio"
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
"basic-vanillajs": {
|
|
130
|
+
"command": "npx",
|
|
131
|
+
"args": [
|
|
132
|
+
"-y",
|
|
133
|
+
"--silent",
|
|
134
|
+
"--registry=https://registry.npmjs.org/",
|
|
135
|
+
"@modelcontextprotocol/server-basic-vanillajs",
|
|
136
|
+
"--stdio"
|
|
137
|
+
]
|
|
138
|
+
},
|
|
139
|
+
"basic-vue": {
|
|
140
|
+
"command": "npx",
|
|
141
|
+
"args": [
|
|
142
|
+
"-y",
|
|
143
|
+
"--silent",
|
|
144
|
+
"--registry=https://registry.npmjs.org/",
|
|
145
|
+
"@modelcontextprotocol/server-basic-vue",
|
|
146
|
+
"--stdio"
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
"basic-svelte": {
|
|
150
|
+
"command": "npx",
|
|
151
|
+
"args": [
|
|
152
|
+
"-y",
|
|
153
|
+
"--silent",
|
|
154
|
+
"--registry=https://registry.npmjs.org/",
|
|
155
|
+
"@modelcontextprotocol/server-basic-svelte",
|
|
156
|
+
"--stdio"
|
|
157
|
+
]
|
|
158
|
+
},
|
|
159
|
+
"basic-preact": {
|
|
160
|
+
"command": "npx",
|
|
161
|
+
"args": [
|
|
162
|
+
"-y",
|
|
163
|
+
"--silent",
|
|
164
|
+
"--registry=https://registry.npmjs.org/",
|
|
165
|
+
"@modelcontextprotocol/server-basic-preact",
|
|
166
|
+
"--stdio"
|
|
167
|
+
]
|
|
168
|
+
},
|
|
169
|
+
"basic-solid": {
|
|
170
|
+
"command": "npx",
|
|
171
|
+
"args": [
|
|
172
|
+
"-y",
|
|
173
|
+
"--silent",
|
|
174
|
+
"--registry=https://registry.npmjs.org/",
|
|
175
|
+
"@modelcontextprotocol/server-basic-solid",
|
|
176
|
+
"--stdio"
|
|
177
|
+
]
|
|
178
|
+
},
|
|
179
|
+
"budget-allocator": {
|
|
180
|
+
"command": "npx",
|
|
181
|
+
"args": [
|
|
182
|
+
"-y",
|
|
183
|
+
"--silent",
|
|
184
|
+
"--registry=https://registry.npmjs.org/",
|
|
185
|
+
"@modelcontextprotocol/server-budget-allocator",
|
|
186
|
+
"--stdio"
|
|
187
|
+
]
|
|
188
|
+
},
|
|
189
|
+
"cohort-heatmap": {
|
|
190
|
+
"command": "npx",
|
|
191
|
+
"args": [
|
|
192
|
+
"-y",
|
|
193
|
+
"--silent",
|
|
194
|
+
"--registry=https://registry.npmjs.org/",
|
|
195
|
+
"@modelcontextprotocol/server-cohort-heatmap",
|
|
196
|
+
"--stdio"
|
|
197
|
+
]
|
|
198
|
+
},
|
|
199
|
+
"customer-segmentation": {
|
|
200
|
+
"command": "npx",
|
|
201
|
+
"args": [
|
|
202
|
+
"-y",
|
|
203
|
+
"--silent",
|
|
204
|
+
"--registry=https://registry.npmjs.org/",
|
|
205
|
+
"@modelcontextprotocol/server-customer-segmentation",
|
|
206
|
+
"--stdio"
|
|
207
|
+
]
|
|
208
|
+
},
|
|
209
|
+
"map": {
|
|
210
|
+
"command": "npx",
|
|
211
|
+
"args": [
|
|
212
|
+
"-y",
|
|
213
|
+
"--silent",
|
|
214
|
+
"--registry=https://registry.npmjs.org/",
|
|
215
|
+
"@modelcontextprotocol/server-map",
|
|
216
|
+
"--stdio"
|
|
217
|
+
]
|
|
218
|
+
},
|
|
219
|
+
"pdf": {
|
|
220
|
+
"command": "npx",
|
|
221
|
+
"args": [
|
|
222
|
+
"-y",
|
|
223
|
+
"--silent",
|
|
224
|
+
"--registry=https://registry.npmjs.org/",
|
|
225
|
+
"@modelcontextprotocol/server-pdf",
|
|
226
|
+
"--stdio"
|
|
227
|
+
]
|
|
228
|
+
},
|
|
229
|
+
"scenario-modeler": {
|
|
230
|
+
"command": "npx",
|
|
231
|
+
"args": [
|
|
232
|
+
"-y",
|
|
233
|
+
"--silent",
|
|
234
|
+
"--registry=https://registry.npmjs.org/",
|
|
235
|
+
"@modelcontextprotocol/server-scenario-modeler",
|
|
236
|
+
"--stdio"
|
|
237
|
+
]
|
|
238
|
+
},
|
|
239
|
+
"shadertoy": {
|
|
240
|
+
"command": "npx",
|
|
241
|
+
"args": [
|
|
242
|
+
"-y",
|
|
243
|
+
"--silent",
|
|
244
|
+
"--registry=https://registry.npmjs.org/",
|
|
245
|
+
"@modelcontextprotocol/server-shadertoy",
|
|
246
|
+
"--stdio"
|
|
247
|
+
]
|
|
248
|
+
},
|
|
249
|
+
"sheet-music": {
|
|
250
|
+
"command": "npx",
|
|
251
|
+
"args": [
|
|
252
|
+
"-y",
|
|
253
|
+
"--silent",
|
|
254
|
+
"--registry=https://registry.npmjs.org/",
|
|
255
|
+
"@modelcontextprotocol/server-sheet-music",
|
|
256
|
+
"--stdio"
|
|
257
|
+
]
|
|
258
|
+
},
|
|
259
|
+
"system-monitor": {
|
|
260
|
+
"command": "npx",
|
|
261
|
+
"args": [
|
|
262
|
+
"-y",
|
|
263
|
+
"--silent",
|
|
264
|
+
"--registry=https://registry.npmjs.org/",
|
|
265
|
+
"@modelcontextprotocol/server-system-monitor",
|
|
266
|
+
"--stdio"
|
|
267
|
+
]
|
|
268
|
+
},
|
|
269
|
+
"threejs": {
|
|
270
|
+
"command": "npx",
|
|
271
|
+
"args": [
|
|
272
|
+
"-y",
|
|
273
|
+
"--silent",
|
|
274
|
+
"--registry=https://registry.npmjs.org/",
|
|
275
|
+
"@modelcontextprotocol/server-threejs",
|
|
276
|
+
"--stdio"
|
|
277
|
+
]
|
|
278
|
+
},
|
|
279
|
+
"transcript": {
|
|
280
|
+
"command": "npx",
|
|
281
|
+
"args": [
|
|
282
|
+
"-y",
|
|
283
|
+
"--silent",
|
|
284
|
+
"--registry=https://registry.npmjs.org/",
|
|
285
|
+
"@modelcontextprotocol/server-transcript",
|
|
286
|
+
"--stdio"
|
|
287
|
+
]
|
|
288
|
+
},
|
|
289
|
+
"video-resource": {
|
|
290
|
+
"command": "npx",
|
|
291
|
+
"args": [
|
|
292
|
+
"-y",
|
|
293
|
+
"--silent",
|
|
294
|
+
"--registry=https://registry.npmjs.org/",
|
|
295
|
+
"@modelcontextprotocol/server-video-resource",
|
|
296
|
+
"--stdio"
|
|
297
|
+
]
|
|
298
|
+
},
|
|
299
|
+
"wiki-explorer": {
|
|
300
|
+
"command": "npx",
|
|
301
|
+
"args": [
|
|
302
|
+
"-y",
|
|
303
|
+
"--silent",
|
|
304
|
+
"--registry=https://registry.npmjs.org/",
|
|
305
|
+
"@modelcontextprotocol/server-wiki-explorer",
|
|
306
|
+
"--stdio"
|
|
307
|
+
]
|
|
308
|
+
},
|
|
309
|
+
"qr": {
|
|
310
|
+
"command": "uv",
|
|
311
|
+
"args": [
|
|
312
|
+
"run",
|
|
313
|
+
"/path/to/ext-apps/examples/qr-server/server.py",
|
|
314
|
+
"--stdio"
|
|
315
|
+
]
|
|
316
|
+
},
|
|
317
|
+
"say": {
|
|
318
|
+
"command": "uv",
|
|
319
|
+
"args": [
|
|
320
|
+
"run",
|
|
321
|
+
"--default-index",
|
|
322
|
+
"https://pypi.org/simple",
|
|
323
|
+
"https://raw.githubusercontent.com/modelcontextprotocol/ext-apps/refs/heads/main/examples/say-server/server.py",
|
|
324
|
+
"--stdio"
|
|
325
|
+
]
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
</details>
|
|
332
|
+
|
|
333
|
+
> [!NOTE]
|
|
334
|
+
> The `qr` server requires cloning the repository first. See [qr-server README](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) for details.
|
|
335
|
+
|
|
336
|
+
#### Local Development
|
|
337
|
+
|
|
338
|
+
To test local modifications with MCP clients, first clone and install the repository:
|
|
339
|
+
|
|
340
|
+
```bash
|
|
341
|
+
git clone https://github.com/modelcontextprotocol/ext-apps.git
|
|
342
|
+
cd ext-apps
|
|
343
|
+
npm install
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
Then configure your MCP client to build and run the local server. Replace `~/code/ext-apps` with your actual clone path:
|
|
347
|
+
|
|
348
|
+
<details>
|
|
349
|
+
<summary>MCP client configuration for local development (all examples)</summary>
|
|
350
|
+
|
|
351
|
+
```json
|
|
352
|
+
{
|
|
353
|
+
"mcpServers": {
|
|
354
|
+
"basic-react": {
|
|
355
|
+
"command": "bash",
|
|
356
|
+
"args": [
|
|
357
|
+
"-c",
|
|
358
|
+
"cd ~/code/ext-apps/examples/basic-server-react && npm run build >&2 && node dist/index.js --stdio"
|
|
359
|
+
]
|
|
360
|
+
},
|
|
361
|
+
"basic-vanillajs": {
|
|
362
|
+
"command": "bash",
|
|
363
|
+
"args": [
|
|
364
|
+
"-c",
|
|
365
|
+
"cd ~/code/ext-apps/examples/basic-server-vanillajs && npm run build >&2 && node dist/index.js --stdio"
|
|
366
|
+
]
|
|
367
|
+
},
|
|
368
|
+
"basic-vue": {
|
|
369
|
+
"command": "bash",
|
|
370
|
+
"args": [
|
|
371
|
+
"-c",
|
|
372
|
+
"cd ~/code/ext-apps/examples/basic-server-vue && npm run build >&2 && node dist/index.js --stdio"
|
|
373
|
+
]
|
|
374
|
+
},
|
|
375
|
+
"basic-svelte": {
|
|
376
|
+
"command": "bash",
|
|
377
|
+
"args": [
|
|
378
|
+
"-c",
|
|
379
|
+
"cd ~/code/ext-apps/examples/basic-server-svelte && npm run build >&2 && node dist/index.js --stdio"
|
|
380
|
+
]
|
|
381
|
+
},
|
|
382
|
+
"basic-preact": {
|
|
383
|
+
"command": "bash",
|
|
384
|
+
"args": [
|
|
385
|
+
"-c",
|
|
386
|
+
"cd ~/code/ext-apps/examples/basic-server-preact && npm run build >&2 && node dist/index.js --stdio"
|
|
387
|
+
]
|
|
388
|
+
},
|
|
389
|
+
"basic-solid": {
|
|
390
|
+
"command": "bash",
|
|
391
|
+
"args": [
|
|
392
|
+
"-c",
|
|
393
|
+
"cd ~/code/ext-apps/examples/basic-server-solid && npm run build >&2 && node dist/index.js --stdio"
|
|
394
|
+
]
|
|
395
|
+
},
|
|
396
|
+
"budget-allocator": {
|
|
397
|
+
"command": "bash",
|
|
398
|
+
"args": [
|
|
399
|
+
"-c",
|
|
400
|
+
"cd ~/code/ext-apps/examples/budget-allocator-server && npm run build >&2 && node dist/index.js --stdio"
|
|
401
|
+
]
|
|
402
|
+
},
|
|
403
|
+
"cohort-heatmap": {
|
|
404
|
+
"command": "bash",
|
|
405
|
+
"args": [
|
|
406
|
+
"-c",
|
|
407
|
+
"cd ~/code/ext-apps/examples/cohort-heatmap-server && npm run build >&2 && node dist/index.js --stdio"
|
|
408
|
+
]
|
|
409
|
+
},
|
|
410
|
+
"customer-segmentation": {
|
|
411
|
+
"command": "bash",
|
|
412
|
+
"args": [
|
|
413
|
+
"-c",
|
|
414
|
+
"cd ~/code/ext-apps/examples/customer-segmentation-server && npm run build >&2 && node dist/index.js --stdio"
|
|
415
|
+
]
|
|
416
|
+
},
|
|
417
|
+
"map": {
|
|
418
|
+
"command": "bash",
|
|
419
|
+
"args": [
|
|
420
|
+
"-c",
|
|
421
|
+
"cd ~/code/ext-apps/examples/map-server && npm run build >&2 && node dist/index.js --stdio"
|
|
422
|
+
]
|
|
423
|
+
},
|
|
424
|
+
"pdf": {
|
|
425
|
+
"command": "bash",
|
|
426
|
+
"args": [
|
|
427
|
+
"-c",
|
|
428
|
+
"cd ~/code/ext-apps/examples/pdf-server && npm run build >&2 && node dist/index.js --stdio"
|
|
429
|
+
]
|
|
430
|
+
},
|
|
431
|
+
"scenario-modeler": {
|
|
432
|
+
"command": "bash",
|
|
433
|
+
"args": [
|
|
434
|
+
"-c",
|
|
435
|
+
"cd ~/code/ext-apps/examples/scenario-modeler-server && npm run build >&2 && node dist/index.js --stdio"
|
|
436
|
+
]
|
|
437
|
+
},
|
|
438
|
+
"shadertoy": {
|
|
439
|
+
"command": "bash",
|
|
440
|
+
"args": [
|
|
441
|
+
"-c",
|
|
442
|
+
"cd ~/code/ext-apps/examples/shadertoy-server && npm run build >&2 && node dist/index.js --stdio"
|
|
443
|
+
]
|
|
444
|
+
},
|
|
445
|
+
"sheet-music": {
|
|
446
|
+
"command": "bash",
|
|
447
|
+
"args": [
|
|
448
|
+
"-c",
|
|
449
|
+
"cd ~/code/ext-apps/examples/sheet-music-server && npm run build >&2 && node dist/index.js --stdio"
|
|
450
|
+
]
|
|
451
|
+
},
|
|
452
|
+
"system-monitor": {
|
|
453
|
+
"command": "bash",
|
|
454
|
+
"args": [
|
|
455
|
+
"-c",
|
|
456
|
+
"cd ~/code/ext-apps/examples/system-monitor-server && npm run build >&2 && node dist/index.js --stdio"
|
|
457
|
+
]
|
|
458
|
+
},
|
|
459
|
+
"threejs": {
|
|
460
|
+
"command": "bash",
|
|
461
|
+
"args": [
|
|
462
|
+
"-c",
|
|
463
|
+
"cd ~/code/ext-apps/examples/threejs-server && npm run build >&2 && node dist/index.js --stdio"
|
|
464
|
+
]
|
|
465
|
+
},
|
|
466
|
+
"transcript": {
|
|
467
|
+
"command": "bash",
|
|
468
|
+
"args": [
|
|
469
|
+
"-c",
|
|
470
|
+
"cd ~/code/ext-apps/examples/transcript-server && npm run build >&2 && node dist/index.js --stdio"
|
|
471
|
+
]
|
|
472
|
+
},
|
|
473
|
+
"video-resource": {
|
|
474
|
+
"command": "bash",
|
|
475
|
+
"args": [
|
|
476
|
+
"-c",
|
|
477
|
+
"cd ~/code/ext-apps/examples/video-resource-server && npm run build >&2 && node dist/index.js --stdio"
|
|
478
|
+
]
|
|
479
|
+
},
|
|
480
|
+
"wiki-explorer": {
|
|
481
|
+
"command": "bash",
|
|
482
|
+
"args": [
|
|
483
|
+
"-c",
|
|
484
|
+
"cd ~/code/ext-apps/examples/wiki-explorer-server && npm run build >&2 && node dist/index.js --stdio"
|
|
485
|
+
]
|
|
486
|
+
},
|
|
487
|
+
"qr": {
|
|
488
|
+
"command": "bash",
|
|
489
|
+
"args": [
|
|
490
|
+
"-c",
|
|
491
|
+
"uv run ~/code/ext-apps/examples/qr-server/server.py --stdio"
|
|
492
|
+
]
|
|
493
|
+
},
|
|
494
|
+
"say": {
|
|
495
|
+
"command": "bash",
|
|
496
|
+
"args": [
|
|
497
|
+
"-c",
|
|
498
|
+
"uv run --index https://pypi.org/simple ~/code/ext-apps/examples/say-server/server.py --stdio"
|
|
499
|
+
]
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
</details>
|
|
506
|
+
|
|
507
|
+
This configuration rebuilds each server on launch, ensuring your local changes are picked up.
|
|
508
|
+
|
|
91
509
|
## Resources
|
|
92
510
|
|
|
93
511
|
- [Quickstart Guide](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html)
|
|
94
512
|
- [API Documentation](https://modelcontextprotocol.github.io/ext-apps/api/)
|
|
95
|
-
- [
|
|
513
|
+
- [Specification (2026-01-26)](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx) ([Draft](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx))
|
|
96
514
|
- [SEP-1865 Discussion](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type-checked code examples for the patterns documentation.
|
|
3
|
+
*
|
|
4
|
+
* These examples are included in {@link ./patterns.md} via `@includeCode` tags.
|
|
5
|
+
* Each function's region markers define the code snippet that appears in the docs.
|
|
6
|
+
*
|
|
7
|
+
* @module
|
|
8
|
+
*/
|
|
9
|
+
export {};
|