4ca20f21c4* Restructure threejs-server README to match marketing examples - Update title format to "Example: Three.js App" - Constrain screenshot width using table layout - Add Features section with key capabilities - Reorganize Running section with Tool Input subsection - Add Architecture section describing server and app components - Remove implementation-focused sections (WidgetProps, Creating a New Widget) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add bun as devDependency to example packages npm install now automatically installs bun, eliminating the need for separate installation instructions. Removed manual bun install step from customer-segmentation-server README. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add start:http and start:stdio npm scripts to examples For the 6 examples supporting --stdio transport, add explicit scripts: - serve:http / serve:stdio for running the server - start:http / start:stdio for build + serve - start now aliases to start:http for backward compatibility Update READMEs to document both transport options. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Default basic-host SERVERS to localhost:3001/mcp - Change threejs-server default port from 3109 to 3001 for consistency - Add default SERVERS value in basic-host serve.ts - Document SERVERS env var in basic-host README 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Improve Examples section in README Frame the three basic examples as foundational starting points and add a link to the examples directory for additional demo apps. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
3.9 KiB
Markdown
79 lines
3.9 KiB
Markdown
# @modelcontextprotocol/ext-apps
|
|
|
|
[](https://modelcontextprotocol.github.io/ext-apps/api/)
|
|
|
|
This repo contains the SDK and [specification](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx) for MCP Apps Extension ([SEP-1865](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)).
|
|
|
|
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.
|
|
|
|
## Overview
|
|
|
|
This SDK serves two audiences:
|
|
|
|
### App Developers
|
|
|
|
Build interactive UIs that run inside MCP-enabled chat clients.
|
|
|
|
- **SDK for Apps**: `@modelcontextprotocol/ext-apps` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/app.html)
|
|
- **React hooks**: `@modelcontextprotocol/ext-apps/react` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/_modelcontextprotocol_ext-apps_react.html)
|
|
|
|
### Host Developers
|
|
|
|
Embed and communicate with MCP Apps in your chat application.
|
|
|
|
- **SDK for Hosts**: `@modelcontextprotocol/ext-apps/app-bridge` — [API Docs](https://modelcontextprotocol.github.io/ext-apps/api/modules/app-bridge.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) example).
|
|
|
|
We have [contributed a tentative implementation](https://github.com/MCP-UI-Org/mcp-ui/pull/147) of hosting / iframing / sandboxing logic to the [MCP-UI](https://github.com/idosal/mcp-ui) repository, and expect OSS clients may use it, while other clients might roll their own hosting logic.
|
|
|
|
## Installation
|
|
|
|
This repo is in flux and isn't published to npm yet. When it is, it will use the `@modelcontextprotocol/ext-apps` package.
|
|
|
|
In the meantime you can depend on the SDK library in a Node.js project by installing it with its git URL:
|
|
|
|
```bash
|
|
npm install -S git+https://github.com/modelcontextprotocol/ext-apps.git
|
|
```
|
|
|
|
Your `package.json` will then look like:
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"@modelcontextprotocol/ext-apps": "git+https://github.com/modelcontextprotocol/ext-apps.git"
|
|
}
|
|
}
|
|
```
|
|
|
|
> [!NOTE]
|
|
> The build tools (`esbuild`, `tsx`, `typescript`) are in `dependencies` rather than `devDependencies`. This is intentional: it allows the `prepare` script to run when the package is installed from git, since npm doesn't install devDependencies for git dependencies.
|
|
>
|
|
> Once the package is published to npm with pre-built `dist/`, these can be moved back to `devDependencies`.
|
|
|
|
## Examples
|
|
|
|
Start with these foundational examples to learn the SDK:
|
|
|
|
- [`examples/basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) — Example MCP server with tools that return UI Apps (vanilla JS)
|
|
- [`examples/basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) — Example MCP server with tools that return UI Apps (React)
|
|
- [`examples/basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) — Bare-bones example of hosting MCP Apps
|
|
|
|
The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains additional demo apps showcasing real-world use cases.
|
|
|
|
To run all examples together:
|
|
|
|
```
|
|
npm install
|
|
npm run examples:start
|
|
```
|
|
|
|
Then open http://localhost:8080/.
|
|
|
|
## Resources
|
|
|
|
- [Quickstart Guide](https://modelcontextprotocol.github.io/ext-apps/api/documents/Quickstart.html)
|
|
- [API Documentation](https://modelcontextprotocol.github.io/ext-apps/api/)
|
|
- [Draft Specification](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx)
|
|
- [SEP-1865 Discussion](https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865)
|