@modelcontextprotocol/ext-apps 0.4.0 → 0.4.2

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.
Files changed (34) hide show
  1. package/LICENSE +196 -1
  2. package/README.md +274 -25
  3. package/dist/docs/patterns.d.ts +9 -0
  4. package/dist/src/app-bridge.d.ts +253 -247
  5. package/dist/src/app-bridge.examples.d.ts +9 -0
  6. package/dist/src/app-bridge.js +17 -17
  7. package/dist/src/app-with-deps.js +9 -9
  8. package/dist/src/app.d.ts +246 -209
  9. package/dist/src/app.examples.d.ts +9 -0
  10. package/dist/src/app.js +10 -10
  11. package/dist/src/generated/schema.d.ts +45 -33
  12. package/dist/src/generated/schema.test.d.ts +1 -0
  13. package/dist/src/message-transport.d.ts +30 -32
  14. package/dist/src/message-transport.examples.d.ts +9 -0
  15. package/dist/src/react/index.d.ts +8 -10
  16. package/dist/src/react/index.examples.d.ts +6 -0
  17. package/dist/src/react/index.js +8 -8
  18. package/dist/src/react/react-with-deps.js +8 -8
  19. package/dist/src/react/useApp.d.ts +58 -44
  20. package/dist/src/react/useApp.examples.d.ts +6 -0
  21. package/dist/src/react/useAutoResize.d.ts +14 -11
  22. package/dist/src/react/useAutoResize.examples.d.ts +6 -0
  23. package/dist/src/react/useDocumentTheme.d.ts +14 -16
  24. package/dist/src/react/useDocumentTheme.examples.d.ts +6 -0
  25. package/dist/src/react/useHostStyles.d.ts +45 -53
  26. package/dist/src/react/useHostStyles.examples.d.ts +6 -0
  27. package/dist/src/server/index.d.ts +215 -41
  28. package/dist/src/server/index.examples.d.ts +9 -0
  29. package/dist/src/server/index.js +10 -10
  30. package/dist/src/spec.types.d.ts +56 -40
  31. package/dist/src/styles.d.ts +75 -32
  32. package/dist/src/styles.examples.d.ts +9 -0
  33. package/dist/src/types.d.ts +8 -7
  34. package/package.json +26 -7
package/LICENSE CHANGED
@@ -1,6 +1,193 @@
1
+ The MCP project is undergoing a licensing transition from the MIT License to the Apache License, Version 2.0 ("Apache-2.0"). All new code and specification contributions to the project are licensed under Apache-2.0. Documentation contributions (excluding specifications) are licensed under CC-BY-4.0.
2
+
3
+ Contributions for which relicensing consent has been obtained are licensed under Apache-2.0. Contributions made by authors who originally licensed their work under the MIT License and who have not yet granted explicit permission to relicense remain licensed under the MIT License.
4
+
5
+ No rights beyond those granted by the applicable original license are conveyed for such contributions.
6
+
7
+ ---
8
+
9
+ Apache License
10
+ Version 2.0, January 2004
11
+ http://www.apache.org/licenses/
12
+
13
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
14
+
15
+ 1. Definitions.
16
+
17
+ "License" shall mean the terms and conditions for use, reproduction,
18
+ and distribution as defined by Sections 1 through 9 of this document.
19
+
20
+ "Licensor" shall mean the copyright owner or entity authorized by
21
+ the copyright owner that is granting the License.
22
+
23
+ "Legal Entity" shall mean the union of the acting entity and all
24
+ other entities that control, are controlled by, or are under common
25
+ control with that entity. For the purposes of this definition,
26
+ "control" means (i) the power, direct or indirect, to cause the
27
+ direction or management of such entity, whether by contract or
28
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
29
+ outstanding shares, or (iii) beneficial ownership of such entity.
30
+
31
+ "You" (or "Your") shall mean an individual or Legal Entity
32
+ exercising permissions granted by this License.
33
+
34
+ "Source" form shall mean the preferred form for making modifications,
35
+ including but not limited to software source code, documentation
36
+ source, and configuration files.
37
+
38
+ "Object" form shall mean any form resulting from mechanical
39
+ transformation or translation of a Source form, including but
40
+ not limited to compiled object code, generated documentation,
41
+ and conversions to other media types.
42
+
43
+ "Work" shall mean the work of authorship, whether in Source or
44
+ Object form, made available under the License, as indicated by a
45
+ copyright notice that is included in or attached to the work
46
+ (an example is provided in the Appendix below).
47
+
48
+ "Derivative Works" shall mean any work, whether in Source or Object
49
+ form, that is based on (or derived from) the Work and for which the
50
+ editorial revisions, annotations, elaborations, or other modifications
51
+ represent, as a whole, an original work of authorship. For the purposes
52
+ of this License, Derivative Works shall not include works that remain
53
+ separable from, or merely link (or bind by name) to the interfaces of,
54
+ the Work and Derivative Works thereof.
55
+
56
+ "Contribution" shall mean any work of authorship, including
57
+ the original version of the Work and any modifications or additions
58
+ to that Work or Derivative Works thereof, that is intentionally
59
+ submitted to the Licensor for inclusion in the Work by the copyright
60
+ owner or by an individual or Legal Entity authorized to submit on behalf
61
+ of the copyright owner. For the purposes of this definition, "submitted"
62
+ means any form of electronic, verbal, or written communication sent
63
+ to the Licensor or its representatives, including but not limited to
64
+ communication on electronic mailing lists, source code control systems,
65
+ and issue tracking systems that are managed by, or on behalf of, the
66
+ Licensor for the purpose of discussing and improving the Work, but
67
+ excluding communication that is conspicuously marked or otherwise
68
+ designated in writing by the copyright owner as "Not a Contribution."
69
+
70
+ "Contributor" shall mean Licensor and any individual or Legal Entity
71
+ on behalf of whom a Contribution has been received by Licensor and
72
+ subsequently incorporated within the Work.
73
+
74
+ 2. Grant of Copyright License. Subject to the terms and conditions of
75
+ this License, each Contributor hereby grants to You a perpetual,
76
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77
+ copyright license to reproduce, prepare Derivative Works of,
78
+ publicly display, publicly perform, sublicense, and distribute the
79
+ Work and such Derivative Works in Source or Object form.
80
+
81
+ 3. Grant of Patent License. Subject to the terms and conditions of
82
+ this License, each Contributor hereby grants to You a perpetual,
83
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
84
+ (except as stated in this section) patent license to make, have made,
85
+ use, offer to sell, sell, import, and otherwise transfer the Work,
86
+ where such license applies only to those patent claims licensable
87
+ by such Contributor that are necessarily infringed by their
88
+ Contribution(s) alone or by combination of their Contribution(s)
89
+ with the Work to which such Contribution(s) was submitted. If You
90
+ institute patent litigation against any entity (including a
91
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
92
+ or a Contribution incorporated within the Work constitutes direct
93
+ or contributory patent infringement, then any patent licenses
94
+ granted to You under this License for that Work shall terminate
95
+ as of the date such litigation is filed.
96
+
97
+ 4. Redistribution. You may reproduce and distribute copies of the
98
+ Work or Derivative Works thereof in any medium, with or without
99
+ modifications, and in Source or Object form, provided that You
100
+ meet the following conditions:
101
+
102
+ (a) You must give any other recipients of the Work or
103
+ Derivative Works a copy of this License; and
104
+
105
+ (b) You must cause any modified files to carry prominent notices
106
+ stating that You changed the files; and
107
+
108
+ (c) You must retain, in the Source form of any Derivative Works
109
+ that You distribute, all copyright, patent, trademark, and
110
+ attribution notices from the Source form of the Work,
111
+ excluding those notices that do not pertain to any part of
112
+ the Derivative Works; and
113
+
114
+ (d) If the Work includes a "NOTICE" text file as part of its
115
+ distribution, then any Derivative Works that You distribute must
116
+ include a readable copy of the attribution notices contained
117
+ within such NOTICE file, excluding those notices that do not
118
+ pertain to any part of the Derivative Works, in at least one
119
+ of the following places: within a NOTICE text file distributed
120
+ as part of the Derivative Works; within the Source form or
121
+ documentation, if provided along with the Derivative Works; or,
122
+ within a display generated by the Derivative Works, if and
123
+ wherever such third-party notices normally appear. The contents
124
+ of the NOTICE file are for informational purposes only and
125
+ do not modify the License. You may add Your own attribution
126
+ notices within Derivative Works that You distribute, alongside
127
+ or as an addendum to the NOTICE text from the Work, provided
128
+ that such additional attribution notices cannot be construed
129
+ as modifying the License.
130
+
131
+ You may add Your own copyright statement to Your modifications and
132
+ may provide additional or different license terms and conditions
133
+ for use, reproduction, or distribution of Your modifications, or
134
+ for any such Derivative Works as a whole, provided Your use,
135
+ reproduction, and distribution of the Work otherwise complies with
136
+ the conditions stated in this License.
137
+
138
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
139
+ any Contribution intentionally submitted for inclusion in the Work
140
+ by You to the Licensor shall be under the terms and conditions of
141
+ this License, without any additional terms or conditions.
142
+ Notwithstanding the above, nothing herein shall supersede or modify
143
+ the terms of any separate license agreement you may have executed
144
+ with Licensor regarding such Contributions.
145
+
146
+ 6. Trademarks. This License does not grant permission to use the trade
147
+ names, trademarks, service marks, or product names of the Licensor,
148
+ except as required for reasonable and customary use in describing the
149
+ origin of the Work and reproducing the content of the NOTICE file.
150
+
151
+ 7. Disclaimer of Warranty. Unless required by applicable law or
152
+ agreed to in writing, Licensor provides the Work (and each
153
+ Contributor provides its Contributions) on an "AS IS" BASIS,
154
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
155
+ implied, including, without limitation, any warranties or conditions
156
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
157
+ PARTICULAR PURPOSE. You are solely responsible for determining the
158
+ appropriateness of using or redistributing the Work and assume any
159
+ risks associated with Your exercise of permissions under this License.
160
+
161
+ 8. Limitation of Liability. In no event and under no legal theory,
162
+ whether in tort (including negligence), contract, or otherwise,
163
+ unless required by applicable law (such as deliberate and grossly
164
+ negligent acts) or agreed to in writing, shall any Contributor be
165
+ liable to You for damages, including any direct, indirect, special,
166
+ incidental, or consequential damages of any character arising as a
167
+ result of this License or out of the use or inability to use the
168
+ Work (including but not limited to damages for loss of goodwill,
169
+ work stoppage, computer failure or malfunction, or any and all
170
+ other commercial damages or losses), even if such Contributor
171
+ has been advised of the possibility of such damages.
172
+
173
+ 9. Accepting Warranty or Additional Liability. While redistributing
174
+ the Work or Derivative Works thereof, You may choose to offer,
175
+ and charge a fee for, acceptance of support, warranty, indemnity,
176
+ or other liability obligations and/or rights consistent with this
177
+ License. However, in accepting such obligations, You may act only
178
+ on Your own behalf and on Your sole responsibility, not on behalf
179
+ of any other Contributor, and only if You agree to indemnify,
180
+ defend, and hold each Contributor harmless for any liability
181
+ incurred by, or claims asserted against, such Contributor by reason
182
+ of your accepting any such warranty or additional liability.
183
+
184
+ END OF TERMS AND CONDITIONS
185
+
186
+ ---
187
+
1
188
  MIT License
2
189
 
3
- Copyright (c) 2025 Anthropic, PBC
190
+ Copyright (c) 2024-2025 Model Context Protocol a Series of LF Projects, LLC.
4
191
 
5
192
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
193
  of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +206,11 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
206
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
207
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
208
  SOFTWARE.
209
+
210
+ ---
211
+
212
+ Creative Commons Attribution 4.0 International (CC-BY-4.0)
213
+
214
+ Documentation in this project (excluding specifications) is licensed under
215
+ CC-BY-4.0. See https://creativecommons.org/licenses/by/4.0/legalcode for
216
+ the full license text.
package/README.md CHANGED
@@ -6,29 +6,33 @@ This repo contains the SDK and [specification](https://github.com/modelcontextpr
6
6
 
7
7
  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
8
 
9
+ ## Why MCP Apps?
10
+
11
+ 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.
12
+
13
+ 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.
14
+
9
15
  ## How It Works
10
16
 
11
- MCP Apps extend the Model Context Protocol to let servers deliver **interactive UIs** to MCP hosts. Here's how it works:
17
+ MCP Apps extend the Model Context Protocol by letting tools declare UI resources:
12
18
 
13
- 1. **Tool call** — The LLM calls a tool on your server
14
- 2. **UI Resource** — The tool's definition links to a predeclared `ui://` resource containing its HTML interface
19
+ 1. **Tool definition** — Your tool declares a `ui://` resource containing its HTML interface
20
+ 2. **Tool call** — The LLM calls the tool on your server
15
21
  3. **Host renders** — The host fetches the resource and displays it in a sandboxed iframe
16
22
  4. **Bidirectional communication** — The host passes tool data to the UI via notifications, and the UI can call other tools through the host
17
23
 
18
- This enables dashboards, forms, visualizations, and other rich experiences inside chat interfaces.
19
-
20
- ## Overview
24
+ ## Using the SDK
21
25
 
22
26
  This SDK serves two audiences:
23
27
 
24
- ### App Developers
28
+ ### For App Developers
25
29
 
26
30
  Build interactive UIs that run inside MCP-enabled chat clients.
27
31
 
28
32
  - **SDK for Apps**: `@modelcontextprotocol/ext-apps` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/app.html)
29
33
  - **React hooks**: `@modelcontextprotocol/ext-apps/react` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/_modelcontextprotocol_ext-apps_react.html)
30
34
 
31
- ### Host Developers
35
+ ### For Host Developers
32
36
 
33
37
  Embed and communicate with MCP Apps in your chat application.
34
38
 
@@ -44,39 +48,284 @@ We have [contributed a tentative implementation](https://github.com/MCP-UI-Org/m
44
48
  npm install -S @modelcontextprotocol/ext-apps
45
49
  ```
46
50
 
47
- Or edit your `package.json` manually:
51
+ ### Install Agent Skills
48
52
 
49
- ```json
50
- {
51
- "dependencies": {
52
- "@modelcontextprotocol/ext-apps": "^0.0.1"
53
- }
54
- }
53
+ This repository provides two [Agent Skills](https://agentskills.io/) for building MCP Apps. You can install the skills as a Claude Code plugin:
54
+
55
+ ```
56
+ /plugin marketplace add modelcontextprotocol/ext-apps
57
+ /plugin install mcp-apps@modelcontextprotocol-ext-apps
55
58
  ```
56
59
 
60
+ For more information, including instructions for installing the skills in your favorite AI coding agent, see the [agent skills guide](./docs/agent-skills.md).
61
+
57
62
  ## Examples
58
63
 
59
- Start with these foundational examples to learn the SDK:
64
+ The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains demo apps showcasing real-world use cases.
65
+
66
+ <!-- prettier-ignore-start -->
67
+ | | | |
68
+ |:---:|:---:|:---:|
69
+ | [![Map](examples/map-server/grid-cell.png "Interactive 3D globe viewer using CesiumJS")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) | [![Three.js](examples/threejs-server/grid-cell.png "Interactive 3D scene renderer")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) | [![ShaderToy](examples/shadertoy-server/grid-cell.png "Real-time GLSL shader renderer")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/shadertoy-server) |
70
+ | [**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) |
71
+ | [![Sheet Music](examples/sheet-music-server/grid-cell.png "ABC notation to sheet music")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/sheet-music-server) | [![Wiki Explorer](examples/wiki-explorer-server/grid-cell.png "Wikipedia link graph visualization")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/wiki-explorer-server) | [![Cohort Heatmap](examples/cohort-heatmap-server/grid-cell.png "Customer retention heatmap")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/cohort-heatmap-server) |
72
+ | [**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) |
73
+ | [![Scenario Modeler](examples/scenario-modeler-server/grid-cell.png "SaaS business projections")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/scenario-modeler-server) | [![Budget Allocator](examples/budget-allocator-server/grid-cell.png "Interactive budget allocation")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/budget-allocator-server) | [![Customer Segmentation](examples/customer-segmentation-server/grid-cell.png "Scatter chart with clustering")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/customer-segmentation-server) |
74
+ | [**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) |
75
+ | [![System Monitor](examples/system-monitor-server/grid-cell.png "Real-time OS metrics")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/system-monitor-server) | [![Transcript](examples/transcript-server/grid-cell.png "Live speech transcription")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/transcript-server) | [![Video Resource](examples/video-resource-server/grid-cell.png "Binary video via MCP resources")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/video-resource-server) |
76
+ | [**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) |
77
+ | [![PDF Server](examples/pdf-server/grid-cell.png "Interactive PDF viewer with chunked loading")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/pdf-server) | [![QR Code](examples/qr-server/grid-cell.png "QR code generator")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/qr-server) | [![Say Demo](examples/say-server/grid-cell.png "Text-to-speech demo")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/say-server) |
78
+ | [**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) |
79
+
80
+ ### Starter Templates
60
81
 
61
- - [`examples/basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) — MCP server + MCP App using vanilla JS
62
- - [`examples/basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) — MCP server + MCP App using [React](https://github.com/facebook/react)
63
- - [`examples/basic-server-vue`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) MCP server + MCP App using [Vue](https://github.com/vuejs/vue)
64
- - [`examples/basic-server-svelte`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) — MCP server + MCP App using [Svelte](https://github.com/sveltejs/svelte)
65
- - [`examples/basic-server-preact`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) — MCP server + MCP App using [Preact](https://github.com/preactjs/preact)
66
- - [`examples/basic-server-solid`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) — MCP server + MCP App using [Solid](https://github.com/solidjs/solid)
67
- - [`examples/basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) — MCP host application supporting MCP Apps
82
+ | | |
83
+ |:---:|:---|
84
+ | [![Basic](examples/basic-server-react/grid-cell.png "Starter template")](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) |
85
+ <!-- prettier-ignore-end -->
68
86
 
69
- The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains additional demo apps showcasing real-world use cases.
87
+ ### Running the Examples
70
88
 
71
- To run all examples together:
89
+ #### With basic-host
90
+
91
+ 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):
72
92
 
73
93
  ```bash
94
+ git clone https://github.com/modelcontextprotocol/ext-apps.git
95
+ cd ext-apps
74
96
  npm install
75
97
  npm start
76
98
  ```
77
99
 
78
100
  Then open http://localhost:8080/.
79
101
 
102
+ #### With MCP Clients
103
+
104
+ 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:
105
+
106
+ <details>
107
+ <summary>MCP client configuration for all examples (using stdio)</summary>
108
+
109
+ ```json
110
+ {
111
+ "mcpServers": {
112
+ "basic-react": {
113
+ "command": "npx",
114
+ "args": [
115
+ "-y",
116
+ "--silent",
117
+ "--registry=https://registry.npmjs.org/",
118
+ "@modelcontextprotocol/server-basic-react",
119
+ "--stdio"
120
+ ]
121
+ },
122
+ "basic-vanillajs": {
123
+ "command": "npx",
124
+ "args": [
125
+ "-y",
126
+ "--silent",
127
+ "--registry=https://registry.npmjs.org/",
128
+ "@modelcontextprotocol/server-basic-vanillajs",
129
+ "--stdio"
130
+ ]
131
+ },
132
+ "basic-vue": {
133
+ "command": "npx",
134
+ "args": [
135
+ "-y",
136
+ "--silent",
137
+ "--registry=https://registry.npmjs.org/",
138
+ "@modelcontextprotocol/server-basic-vue",
139
+ "--stdio"
140
+ ]
141
+ },
142
+ "basic-svelte": {
143
+ "command": "npx",
144
+ "args": [
145
+ "-y",
146
+ "--silent",
147
+ "--registry=https://registry.npmjs.org/",
148
+ "@modelcontextprotocol/server-basic-svelte",
149
+ "--stdio"
150
+ ]
151
+ },
152
+ "basic-preact": {
153
+ "command": "npx",
154
+ "args": [
155
+ "-y",
156
+ "--silent",
157
+ "--registry=https://registry.npmjs.org/",
158
+ "@modelcontextprotocol/server-basic-preact",
159
+ "--stdio"
160
+ ]
161
+ },
162
+ "basic-solid": {
163
+ "command": "npx",
164
+ "args": [
165
+ "-y",
166
+ "--silent",
167
+ "--registry=https://registry.npmjs.org/",
168
+ "@modelcontextprotocol/server-basic-solid",
169
+ "--stdio"
170
+ ]
171
+ },
172
+ "budget-allocator": {
173
+ "command": "npx",
174
+ "args": [
175
+ "-y",
176
+ "--silent",
177
+ "--registry=https://registry.npmjs.org/",
178
+ "@modelcontextprotocol/server-budget-allocator",
179
+ "--stdio"
180
+ ]
181
+ },
182
+ "cohort-heatmap": {
183
+ "command": "npx",
184
+ "args": [
185
+ "-y",
186
+ "--silent",
187
+ "--registry=https://registry.npmjs.org/",
188
+ "@modelcontextprotocol/server-cohort-heatmap",
189
+ "--stdio"
190
+ ]
191
+ },
192
+ "customer-segmentation": {
193
+ "command": "npx",
194
+ "args": [
195
+ "-y",
196
+ "--silent",
197
+ "--registry=https://registry.npmjs.org/",
198
+ "@modelcontextprotocol/server-customer-segmentation",
199
+ "--stdio"
200
+ ]
201
+ },
202
+ "map": {
203
+ "command": "npx",
204
+ "args": [
205
+ "-y",
206
+ "--silent",
207
+ "--registry=https://registry.npmjs.org/",
208
+ "@modelcontextprotocol/server-map",
209
+ "--stdio"
210
+ ]
211
+ },
212
+ "pdf": {
213
+ "command": "npx",
214
+ "args": [
215
+ "-y",
216
+ "--silent",
217
+ "--registry=https://registry.npmjs.org/",
218
+ "@modelcontextprotocol/server-pdf",
219
+ "--stdio"
220
+ ]
221
+ },
222
+ "scenario-modeler": {
223
+ "command": "npx",
224
+ "args": [
225
+ "-y",
226
+ "--silent",
227
+ "--registry=https://registry.npmjs.org/",
228
+ "@modelcontextprotocol/server-scenario-modeler",
229
+ "--stdio"
230
+ ]
231
+ },
232
+ "shadertoy": {
233
+ "command": "npx",
234
+ "args": [
235
+ "-y",
236
+ "--silent",
237
+ "--registry=https://registry.npmjs.org/",
238
+ "@modelcontextprotocol/server-shadertoy",
239
+ "--stdio"
240
+ ]
241
+ },
242
+ "sheet-music": {
243
+ "command": "npx",
244
+ "args": [
245
+ "-y",
246
+ "--silent",
247
+ "--registry=https://registry.npmjs.org/",
248
+ "@modelcontextprotocol/server-sheet-music",
249
+ "--stdio"
250
+ ]
251
+ },
252
+ "system-monitor": {
253
+ "command": "npx",
254
+ "args": [
255
+ "-y",
256
+ "--silent",
257
+ "--registry=https://registry.npmjs.org/",
258
+ "@modelcontextprotocol/server-system-monitor",
259
+ "--stdio"
260
+ ]
261
+ },
262
+ "threejs": {
263
+ "command": "npx",
264
+ "args": [
265
+ "-y",
266
+ "--silent",
267
+ "--registry=https://registry.npmjs.org/",
268
+ "@modelcontextprotocol/server-threejs",
269
+ "--stdio"
270
+ ]
271
+ },
272
+ "transcript": {
273
+ "command": "npx",
274
+ "args": [
275
+ "-y",
276
+ "--silent",
277
+ "--registry=https://registry.npmjs.org/",
278
+ "@modelcontextprotocol/server-transcript",
279
+ "--stdio"
280
+ ]
281
+ },
282
+ "video-resource": {
283
+ "command": "npx",
284
+ "args": [
285
+ "-y",
286
+ "--silent",
287
+ "--registry=https://registry.npmjs.org/",
288
+ "@modelcontextprotocol/server-video-resource",
289
+ "--stdio"
290
+ ]
291
+ },
292
+ "wiki-explorer": {
293
+ "command": "npx",
294
+ "args": [
295
+ "-y",
296
+ "--silent",
297
+ "--registry=https://registry.npmjs.org/",
298
+ "@modelcontextprotocol/server-wiki-explorer",
299
+ "--stdio"
300
+ ]
301
+ },
302
+ "qr": {
303
+ "command": "uv",
304
+ "args": [
305
+ "run",
306
+ "/path/to/ext-apps/examples/qr-server/server.py",
307
+ "--stdio"
308
+ ]
309
+ },
310
+ "say": {
311
+ "command": "uv",
312
+ "args": [
313
+ "run",
314
+ "--default-index",
315
+ "https://pypi.org/simple",
316
+ "https://raw.githubusercontent.com/modelcontextprotocol/ext-apps/refs/heads/main/examples/say-server/server.py",
317
+ "--stdio"
318
+ ]
319
+ }
320
+ }
321
+ }
322
+ ```
323
+
324
+ </details>
325
+
326
+ > [!NOTE]
327
+ > 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.
328
+
80
329
  ## Resources
81
330
 
82
331
  - [Quickstart Guide](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html)
@@ -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 {};