Merge pull request #499 from jonathanhefner/update-docs-url
Use `apps.extensions.modelcontextprotocol.io` domain for docs URLs
This commit is contained in:
Jonathan Hefner
GitHub
commit
37533ff4c7
19 changed files with 57 additions and 56 deletions
1
.github/workflows/docs.yml
vendored
1
.github/workflows/docs.yml
vendored
|
|
@ -26,3 +26,4 @@ jobs:
|
|||
publish_dir: ./docs
|
||||
publish_branch: gh-pages
|
||||
keep_files: true
|
||||
cname: apps.extensions.modelcontextprotocol.io
|
||||
|
|
|
|||
20
README.md
20
README.md
|
|
@ -8,9 +8,9 @@
|
|||
<br /><br />
|
||||
<a href="#why-mcp-apps">Why</a>
|
||||
·
|
||||
<a href="https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html">Quickstart</a>
|
||||
<a href="https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html">Quickstart</a>
|
||||
·
|
||||
<a href="https://modelcontextprotocol.github.io/ext-apps/api/">API Docs</a>
|
||||
<a href="https://apps.extensions.modelcontextprotocol.io/api/">API Docs</a>
|
||||
·
|
||||
<a href="https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx">Spec</a>
|
||||
·
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<a href="https://www.npmjs.com/package/@modelcontextprotocol/ext-apps"><img src="https://img.shields.io/npm/v/@modelcontextprotocol/ext-apps.svg" alt="npm version"></a>
|
||||
<a href="https://www.npmjs.com/package/@modelcontextprotocol/ext-apps"><img src="https://img.shields.io/npm/dm/@modelcontextprotocol/ext-apps.svg" alt="npm downloads"></a>
|
||||
<a href="https://github.com/modelcontextprotocol/ext-apps"><img src="https://img.shields.io/github/stars/modelcontextprotocol/ext-apps" alt="GitHub stars"></a>
|
||||
<a href="https://modelcontextprotocol.github.io/ext-apps/api/"><img src="https://img.shields.io/badge/docs-API%20Reference-blue" alt="API Documentation"></a>
|
||||
<a href="https://apps.extensions.modelcontextprotocol.io/api/"><img src="https://img.shields.io/badge/docs-API%20Reference-blue" alt="API Documentation"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
|
|
@ -122,7 +122,7 @@ npm install -S @modelcontextprotocol/ext-apps
|
|||
```
|
||||
|
||||
**New here?** Start with the
|
||||
[Quickstart Guide](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html)
|
||||
[Quickstart Guide](https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html)
|
||||
to build your first MCP App.
|
||||
|
||||
## Using the SDK
|
||||
|
|
@ -133,10 +133,10 @@ UI metadata.
|
|||
|
||||
| Package | Purpose | Docs |
|
||||
| ------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| `@modelcontextprotocol/ext-apps` | Build interactive Views (App class, PostMessageTransport) | [API Docs →](https://modelcontextprotocol.github.io/ext-apps/api/modules/app.html) |
|
||||
| `@modelcontextprotocol/ext-apps/react` | React hooks for Views (useApp, useHostStyles, etc.) | [API Docs →](https://modelcontextprotocol.github.io/ext-apps/api/modules/_modelcontextprotocol_ext-apps_react.html) |
|
||||
| `@modelcontextprotocol/ext-apps/app-bridge` | Embed and communicate with Views in your chat client | [API Docs →](https://modelcontextprotocol.github.io/ext-apps/api/modules/app-bridge.html) |
|
||||
| `@modelcontextprotocol/ext-apps/server` | Register tools and resources on your MCP server | [API Docs →](https://modelcontextprotocol.github.io/ext-apps/api/modules/server.html) |
|
||||
| `@modelcontextprotocol/ext-apps` | Build interactive Views (App class, PostMessageTransport) | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/app.html) |
|
||||
| `@modelcontextprotocol/ext-apps/react` | React hooks for Views (useApp, useHostStyles, etc.) | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/_modelcontextprotocol_ext-apps_react.html) |
|
||||
| `@modelcontextprotocol/ext-apps/app-bridge` | Embed and communicate with Views in your chat client | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/app-bridge.html) |
|
||||
| `@modelcontextprotocol/ext-apps/server` | Register tools and resources on your MCP server | [API Docs →](https://apps.extensions.modelcontextprotocol.io/api/modules/server.html) |
|
||||
|
||||
There's no _supported_ host implementation in this repo (beyond the
|
||||
[examples/basic-host](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host)
|
||||
|
|
@ -243,8 +243,8 @@ point your client at a local build:
|
|||
|
||||
## Resources
|
||||
|
||||
- [Quickstart Guide](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html)
|
||||
- [API Documentation](https://modelcontextprotocol.github.io/ext-apps/api/)
|
||||
- [Quickstart Guide](https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html)
|
||||
- [API Documentation](https://apps.extensions.modelcontextprotocol.io/api/)
|
||||
- [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))
|
||||
- [SEP-1865 Discussion](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)
|
||||
|
|
|
|||
|
|
@ -472,4 +472,4 @@ You've built your first MCP App!
|
|||
- **Continue learning**: The [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) example builds on this quickstart with host communication, theming, and lifecycle handlers
|
||||
- **React version**: Compare with [`basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) for a React-based UI
|
||||
- **Other frameworks**: See also [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), and [Solid](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) examples
|
||||
- **API reference**: See the full [API documentation](https://modelcontextprotocol.github.io/ext-apps/api/)
|
||||
- **API reference**: See the full [API documentation](https://apps.extensions.modelcontextprotocol.io/api/)
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ To test local modifications, use this configuration (replace `~/code/ext-apps` w
|
|||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- Preact UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- Preact UI using the [`App`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
@ -70,4 +70,4 @@ npm run dev
|
|||
|
||||
## Build System
|
||||
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@ To test local modifications, use this configuration (replace `~/code/ext-apps` w
|
|||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- React UI using the [`useApp()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/_modelcontextprotocol_ext-apps_react.useApp.html) hook
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- React UI using the [`useApp()`](https://apps.extensions.modelcontextprotocol.io/api/functions/_modelcontextprotocol_ext-apps_react.useApp.html) hook
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
@ -72,4 +72,4 @@ npm run dev
|
|||
|
||||
## Build System
|
||||
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ To test local modifications, use this configuration (replace `~/code/ext-apps` w
|
|||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- Solid UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- Solid UI using the [`App`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
@ -70,4 +70,4 @@ npm run dev
|
|||
|
||||
## Build System
|
||||
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ To test local modifications, use this configuration (replace `~/code/ext-apps` w
|
|||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- Svelte 5 UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- Svelte 5 UI using the [`App`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
@ -70,4 +70,4 @@ npm run dev
|
|||
|
||||
## Build System
|
||||
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@ To test local modifications, use this configuration (replace `~/code/ext-apps` w
|
|||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- Vanilla JS UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class directly
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- Theme integration via [`applyDocumentTheme()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/app.applyDocumentTheme.html), [`applyHostStyleVariables()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/app.applyHostStyleVariables.html), and [`applyHostFonts()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/app.applyHostFonts.html)
|
||||
- Vanilla JS UI using the [`App`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html) class directly
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
- Theme integration via [`applyDocumentTheme()`](https://apps.extensions.modelcontextprotocol.io/api/functions/app.applyDocumentTheme.html), [`applyHostStyleVariables()`](https://apps.extensions.modelcontextprotocol.io/api/functions/app.applyHostStyleVariables.html), and [`applyHostFonts()`](https://apps.extensions.modelcontextprotocol.io/api/functions/app.applyHostFonts.html)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
@ -71,4 +71,4 @@ npm run dev
|
|||
|
||||
## Build System
|
||||
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ To test local modifications, use this configuration (replace `~/code/ext-apps` w
|
|||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- Vue 3 UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- Vue 3 UI using the [`App`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
@ -70,4 +70,4 @@ npm run dev
|
|||
|
||||
## Build System
|
||||
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
This example bundles into a single HTML file using Vite with `vite-plugin-singlefile` — see [`vite.config.ts`](vite.config.ts). This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining [`_meta.ui.csp.resourceDomains`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ An interactive budget allocation tool demonstrating real-time data visualization
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/01-initial.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/01-initial.png" alt="Initial" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/02-over-budget.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/02-over-budget.png" alt="Over budget" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/03-tech-heavy.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/03-tech-heavy.png" alt="Tech-heavy" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/01-initial.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/01-initial.png" alt="Initial" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/02-over-budget.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/02-over-budget.png" alt="Over budget" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/03-tech-heavy.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/03-tech-heavy.png" alt="Tech-heavy" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ A demo MCP App that displays cohort retention data as an interactive heatmap, sh
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/01-initial-view.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/01-initial-view.png" alt="Initial view" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/02-hover-state.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/02-hover-state.png" alt="Hover state" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/03-low-retention-hover.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/03-low-retention-hover.png" alt="Low retention hover" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/cohort-heatmap-server/01-initial-view.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/cohort-heatmap-server/01-initial-view.png" alt="Initial view" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/cohort-heatmap-server/02-hover-state.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/cohort-heatmap-server/02-hover-state.png" alt="Hover state" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/cohort-heatmap-server/03-low-retention-hover.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/cohort-heatmap-server/03-low-retention-hover.png" alt="Low retention hover" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ A demo MCP App that displays customer data as an interactive scatter/bubble char
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/01-account-age-revenue.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/01-account-age-revenue.png" alt="Account age vs revenue" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/02-tickets-nps-engagement.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/02-tickets-nps-engagement.png" alt="Tickets, NPS, engagement" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/07-age-engagement-revenue.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/07-age-engagement-revenue.png" alt="Age, engagement, revenue" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/customer-segmentation-server/01-account-age-revenue.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/customer-segmentation-server/01-account-age-revenue.png" alt="Account age vs revenue" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/customer-segmentation-server/02-tickets-nps-engagement.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/customer-segmentation-server/02-tickets-nps-engagement.png" alt="Tickets, NPS, engagement" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/customer-segmentation-server/07-age-engagement-revenue.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/customer-segmentation-server/07-age-engagement-revenue.png" alt="Age, engagement, revenue" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ An MCP App example used for E2E integration testing.
|
|||
This example demonstrates all App SDK communication APIs and is used by the E2E test suite to verify host-app interactions:
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- React UI using the [`useApp()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/_modelcontextprotocol_ext-apps_react.useApp.html) hook
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#openlink)
|
||||
- React UI using the [`useApp()`](https://apps.extensions.modelcontextprotocol.io/api/functions/_modelcontextprotocol_ext-apps_react.useApp.html) hook
|
||||
- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink)
|
||||
|
||||
## Key Files
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
A minimal Python MCP server that generates customizable QR codes with an interactive view UI.
|
||||
|
||||
|
||||
|
||||
|
||||
## MCP Client Configuration
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ A React-based demo MCP App that lets users adjust SaaS business parameters and s
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/scenario-modeler-server/01-compare-to.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/scenario-modeler-server/01-compare-to.png" alt="Compare to" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/scenario-modeler-server/02-bootstrapped-growth.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/scenario-modeler-server/02-bootstrapped-growth.png" alt="Bootstrapped growth" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/scenario-modeler-server/03-vc-rocketship.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/scenario-modeler-server/03-vc-rocketship.png" alt="VC rocketship" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/scenario-modeler-server/01-compare-to.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/scenario-modeler-server/01-compare-to.png" alt="Compare to" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/scenario-modeler-server/02-bootstrapped-growth.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/scenario-modeler-server/02-bootstrapped-growth.png" alt="Bootstrapped growth" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/scenario-modeler-server/03-vc-rocketship.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/scenario-modeler-server/03-vc-rocketship.png" alt="VC rocketship" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ A demo MCP App that renders [ShaderToy](https://www.shadertoy.com/)-compatible G
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/shadertoy-server/01-gradient.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/shadertoy-server/01-gradient.png" alt="Gradient" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/shadertoy-server/02-kaleidoscope.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/shadertoy-server/02-kaleidoscope.png" alt="Kaleidoscope" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/shadertoy-server/03-fractal.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/shadertoy-server/03-fractal.png" alt="Kaleidoscope" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/shadertoy-server/01-gradient.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/shadertoy-server/01-gradient.png" alt="Gradient" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/shadertoy-server/02-kaleidoscope.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/shadertoy-server/02-kaleidoscope.png" alt="Kaleidoscope" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/shadertoy-server/03-fractal.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/shadertoy-server/03-fractal.png" alt="Kaleidoscope" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ A demo MCP App that renders [ABC notation](https://en.wikipedia.org/wiki/ABC_not
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/01-twinkle-twinkle-little-star.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/01-twinkle-twinkle-little-star.png" alt="Twinkle, Twinkle Little Star" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/02-playing-on-repeat.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/sheet-music-server/02-playing-on-repeat.png" alt="Playing on repeat" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/sheet-music-server/01-twinkle-twinkle-little-star.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/sheet-music-server/01-twinkle-twinkle-little-star.png" alt="Twinkle, Twinkle Little Star" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/sheet-music-server/02-playing-on-repeat.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/sheet-music-server/02-playing-on-repeat.png" alt="Playing on repeat" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ A demo MCP App that displays real-time OS metrics with a stacked area chart for
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/01-initial-state.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/01-initial-state.png" alt="Initial state" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/02-cpu-data-accumulated.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/02-cpu-data-accumulated.png" alt="CPU data accumulated" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/03-extended-cpu-history.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/03-extended-cpu-history.png" alt="Extended CPU history" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/system-monitor-server/01-initial-state.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/system-monitor-server/01-initial-state.png" alt="Initial state" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/system-monitor-server/02-cpu-data-accumulated.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/system-monitor-server/02-cpu-data-accumulated.png" alt="CPU data accumulated" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/system-monitor-server/03-extended-cpu-history.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/system-monitor-server/03-extended-cpu-history.png" alt="Extended CPU history" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ Visualizes Wikipedia link graphs using a force-directed layout. Explore how Wiki
|
|||
|
||||
<table>
|
||||
<tr>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/01-zoomed.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/01-zoomed.png" alt="Zoomed" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/02-pop-up.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/02-pop-up.png" alt="Pop-up" width="100%"></a></td>
|
||||
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/03-expanded-graph.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/03-expanded-graph.png" alt="Expanded graph" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/wiki-explorer-server/01-zoomed.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/wiki-explorer-server/01-zoomed.png" alt="Zoomed" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/wiki-explorer-server/02-pop-up.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/wiki-explorer-server/02-pop-up.png" alt="Pop-up" width="100%"></a></td>
|
||||
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/wiki-explorer-server/03-expanded-graph.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/wiki-explorer-server/03-expanded-graph.png" alt="Expanded graph" width="100%"></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue