Development
Plugin
ext-apps
Official repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers
Plugin Signal73/100Solid
maintained91
capable34
documented100
adopted73
Install on Claude Code
> /plugin marketplace add modelcontextprotocol/ext-apps> /plugin install mcp-apps@mcp-apps
Stats
2,703
Stars
363
Forks
Active
Maintenance
TypeScript
Language
18d ago
Last commit
8mo ago
Created
Repo: modelcontextprotocol/ext-apps
What's inside
Skills
4/add-app-to-serverThis skill should be used when the user asks to "add an app to my MCP server", "add UI to my MCP server", "add a view to my MCP tool", "enrich MCP tools with UI", "add interactive UI to existing server", "add MCP Apps to my server", or needs to add interactive UI capabilities to/convert-web-appThis skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP App", "convert iframe embed to MCP App", "turn my SPA into an MCP App", or/create-mcp-appThis skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides/migrate-oai-appThis skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK.
README
1Table of Contents
- Build with Agent Skills
- Supported Clients
- Why MCP Apps?
- How It Works
- Getting Started
- Using the SDK
- Examples
- Specification
- Resources
- Contributing
Build with Agent Skills
The fastest way to build an MCP App is to let your AI coding agent do it. This repo ships four Agent Skills — install them once, then just ask:
| Skill | What it does | Try it |
|---|---|---|
create-mcp-app | Scaffolds a new MCP App with an interactive UI from scratch | "Create an MCP App" |
migrate-oai-app | Converts an existing OpenAI App to use MCP Apps | "Migrate from OpenAI Apps SDK" |
add-app-to-server | Adds interactive UI to an existing MCP server's tools | "Add UI to my MCP server" |
convert-web-app | Turns an existing web app into a hybrid web + MCP App | "Add MCP App support to my web app" |
Install the Skills
Claude Code — install via the plugin marketplace:
/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps
Other agents — any AI coding agent that supports Agent Skills can use these skills. See the agent skills guide for manual installation instructions.
Once installed, verify by asking your agent "What skills do you have?" — you
should see create-mcp-app, migrate-oai-app, add-app-to-server, and
convert-web-app in the list. Then just ask it to create or migrate an app and
it will guide you through the rest.
Supported Clients
[!NOTE] MCP Apps is an extension to the core MCP specification. Host support varies — see the clients page for the full list.
Why MCP Apps?
MCP tools return text and structured data. That works for many cases, but not when you need an interactive UI, like a chart, form, design canvas or video player.
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.
How It Works
MCP Apps extend the Model Context Protocol by letting tools declare UI resources:
- Tool definition — Your tool declares a
ui://resource containing its HTML interface - Tool call — The LLM calls the tool on your server
- Host renders — The host fetches the resource and displays it in a sandboxed iframe
- Bidirectional communication — The host passes tool data to the UI via notifications, and the UI can call other tools through the host
Getting Started
npm install -S @modelcontextprotocol/ext-apps
New here? Start with the Quickstart Guide to build your first MCP App.
Using the SDK
The SDK serves three roles: app developers building interactive Views, host developers embedding those Views, and MCP server authors registering tools with UI metadata.
| Package | Purpose | Docs |
|---|---|---|
@modelcontextprotocol/ext-apps | Build interactive Views (App class, PostMessageTransport) | API Docs → |
@modelcontextprotocol/ext-apps/react | React hooks for Views (useApp, useHostStyles, etc.) | API Docs → |
@modelcontextprotocol/ext-apps/app-bridge | Embed and communicate with Views in your chat client | API Docs → |
@modelcontextprotocol/ext-apps/server | Register tools and resources on your MCP server | API Docs → |
There's no supported host implementation in this repo (beyond the examples/basic-host example).
The MCP-UI client SDK offers a fully-featured MCP Apps framework used by a few hosts. Clients may choose to use it or roll their own implementation.
Examples
The
examples/
directory contains demo apps showcasing real-world use cases.
 |  |  |
| Map | Three.js | ShaderToy |
 |  |  |
| Sheet Music | Wiki Explorer | Cohort Heatmap |
 |  |  |
| Scenario Modeler | Budget Allocator | Customer Segmentation |
 |  |  |
| System Monitor | Transcript | Video Resource |
 |  |  |
| PDF Server | QR Code (Python) | Say Demo |
Starter Templates
 | The same app built with different frameworks — pick your favorite!React · Vue · Svelte · Preact · Solid · Vanilla JS |
Running the Examples
With basic-host
To run all examples locally using basic-host (the reference host implementation included in this repo):
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
npm start
Then open http://localhost:8080/.
With MCP Clients
Every Node.js example is published as @modelcontextprotocol/server-<name>. To
add one to an MCP client that supports stdio (Claude Desktop, VS Code, etc.),
use this pattern:
{
"mcpServers": {
"<name>": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-<name>", "--stdio"]
}
}
}
For example, to add the map server: @modelcontextprotocol/server-map. The
Python examples (qr-server, say-server) use uv run instead — see their
READMEs for details.
Local Development
To test local modifications with an MCP client, clone the repo, install, then point your client at a local build:
{
"mcpServers": {
"<name>": {
"command": "bash",
"args": [
"-c",
"cd ~/code/ext-apps/examples/<name>-server && npm run build >&2 && node dist/index.js --stdio"
]
}
}
}
Specification
| Version | Status | Link |
|---|---|---|
| 2026-01-26 | Stable | specification/2026-01-26/apps.mdx |
| draft | Development | specification/draft/apps.mdx |
Resources
Contributing
Contributions are welcome! Please read CONTRIBUTING.md for guidelines on how to get started, submit pull requests, and report issues.
File tree
493modelcontextprotocol/ext-appsView on GitHub
.claude-plugin/
marketplace.json
.gitattributes
.github/
workflows/
ci.yml
docs-preview.yml
docs.yml
npm-publish.yml
publish.yml
update-snapshots.yml
.gitignore
.husky/
pre-commit
.npmrc
.prettierignore
.prettierrc.json
AGENTS.md
build.bun.ts
CLAUDE.md
CONTRIBUTING.md
docs/
agent-skills.md
authorization.md
csp-cors.md
favicons/
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon-dark-16x16.png
favicon-dark-32x32.png
favicon-dark.ico
favicon.ico
index.html
mcp-theme.css
migrate_from_openai_apps.md
overview.md
patterns.md
patterns.tsx
quickstart-success.png
quickstart.md
testing-mcp-apps.md
examples/
basic-host/
.gitignore
index.html
package.json
README.md
sandbox.html
serve.ts
src/
global.css
host-styles.ts
implementation.ts
index.module.css
index.tsx
sandbox.ts
theme.ts
vite-env.d.ts
tsconfig.json
vite.config.ts
basic-server-preact/
.gitignore
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
global.css
mcp-app.module.css
mcp-app.tsx
vite-env.d.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
basic-server-react/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.module.css
mcp-app.tsx
vite-env.d.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
basic-server-solid/
.gitignore
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
global.css
mcp-app.module.css
mcp-app.tsx
vite-env.d.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
basic-server-svelte/
.gitignore
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
App.svelte
global.css
mcp-app.ts
svelte.config.js
tsconfig.json
tsconfig.server.json
vite.config.ts
basic-server-vanillajs/
.gitignore
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
basic-server-vue/
.gitignore
env.d.ts
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
App.vue
global.css
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
budget-allocator-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
cohort-heatmap-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.module.css
mcp-app.tsx
vite-env.d.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
customer-segmentation-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
data-generator.ts
global.css
mcp-app.css
mcp-app.ts
types.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
debug-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
integration-server/
.gitignore
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
global.css
mcp-app.module.css
mcp-app.tsx
vite-env.d.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
lazy-auth-server/
main.ts
mcp-app.html
package.json
README.md
secret-app.html
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
secret-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
map-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
mcp-app.ts
test-standalone.html
tsconfig.json
tsconfig.server.json
vite.config.ts
pdf-server/
.gitignore
.mcpbignore
build-mcpb.mjs
grid-cell.png
icon.png
main.ts
manifest.json
mcp-app.html
package.json
pdf-icon.svg
pdfjs-polyfill.ts
README.md
screenshot.png
server.test.ts
server.ts
src/
annotation-panel.ts
commands.ts
global.css
mcp-app.css
mcp-app.ts
pdf-annotations.test.ts
pdf-annotations.ts
viewer-state.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
qr-server/
.gitignore
grid-cell.png
package.json
README.md
server.py
quickstart/
.gitignore
main.ts
mcp-app.html
package.json
README.md
server.ts
src/
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
run-all.ts
say-server/
.gitignore
grid-cell.png
mcp-app.html
package.json
README.md
screenshot.png
server.py
scenario-modeler-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
components/
MetricCard.tsx
ProjectionChart.tsx
SliderRow.tsx
global.css
hooks/
useTheme.ts
lib/
calculations.ts
formatters.ts
mcp-app.css
mcp-app.tsx
types.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
shadertoy-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
vendor/
ShaderToyLite.d.ts
ShaderToyLite.js
tsconfig.json
tsconfig.server.json
vite.config.ts
sheet-music-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
system-monitor-server/
.gitignore
grid-cell.png
main.ts
mcp-app.html
package.json
README.md
screenshot.png
server.ts
src/
global.css
mcp-app.css
mcp-app.ts
tsconfig.json
tsconfig.server.json
vite.config.ts
threejs-server/
.gitignore
grid-cell.png
main.ts
... 176 moreFAQ
ext-apps is a Claude Code plugin with 4 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes add-app-to-server, convert-web-app, create-mcp-app. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is ext-apps?
- Official repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers
- How do I install ext-apps?
- Run these in Claude Code: /plugin marketplace add modelcontextprotocol/ext-apps then /plugin install mcp-apps@mcp-apps. Then prompt normally.
- Does ext-apps auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is ext-apps free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.