Watch

Mirror of https://github.com/modelcontextprotocol/ext-apps — Official repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers

TypeScript 76.4%
MDX 19.3%
JavaScript 4.3%

Find a file

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Anton Pidkuiko MacBook 8ef9142f00 Fix widget layout to use full available width - Change marketing widget containers from fixed 600px to width: 100% - Update basic-host iframe to use flex: 1 for proper expansion - Widgets now fill their parent container instead of fixed size Files changed: - examples/budget-allocator-server/src/mcp-app.css - examples/customer-segmentation-server/src/mcp-app.css - examples/scenario-modeler-server/src/mcp-app.css - examples/system-monitor-server/src/mcp-app.css - examples/basic-host/src/index.module.css 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>		2025-12-08 14:01:28 +00:00
.github/workflows	Fix compatibility with @modelcontextprotocol/sdk 1.23+ (#84 )	2025-12-08 12:13:07 +01:00
.husky	Add basic-host and basic-server-react examples	2025-12-04 14:28:27 -06:00
docs	Update MIME type to text/html;profile=mcp-app	2025-12-04 14:50:30 -06:00
examples	Fix widget layout to use full available width	2025-12-08 14:01:28 +00:00
specification/draft	fix: change size-changed to be in correct tense (#83 )	2025-12-08 12:14:56 +01:00
src	fix: change size-changed to be in correct tense (#83 )	2025-12-08 12:14:56 +01:00
.gitattributes	Track `package-lock.json` for deterministic builds (#44 )	2025-12-01 20:06:32 +00:00
.gitignore	Track `package-lock.json` for deterministic builds (#44 )	2025-12-01 20:06:32 +00:00
.prettierignore	Add basic-server-vanillajs example	2025-12-04 14:28:27 -06:00
build.bun.ts	npm run prettier:fix	2025-11-23 03:15:06 +00:00
CONTRIBUTING.md	setup ci & presubmit (#20 )	2025-11-25 02:40:48 +00:00
package-lock.json	Fix compatibility with @modelcontextprotocol/sdk 1.23+ (#84 )	2025-12-08 12:13:07 +01:00
package.json	Make examples:build dynamically discover all examples	2025-12-04 14:33:14 -06:00
README.md	Add Quickstart guide for building MCP Apps	2025-12-04 14:28:55 -06:00
tsconfig.json	Initial commit	2025-11-21 11:56:27 +00:00
typedoc.json	Add Quickstart guide for building MCP Apps	2025-12-04 14:28:55 -06:00

README.md

@modelcontextprotocol/ext-apps

This repo contains the SDK and specification for MCP Apps Extension (SEP-1865).

MCP Apps are a proposed standard inspired by MCP-UI and OpenAI's 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
React hooks: @modelcontextprotocol/ext-apps/react — API Docs

Host Developers

Embed and communicate with MCP Apps in your chat application.

SDK for Hosts: @modelcontextprotocol/ext-apps/app-bridge — API Docs

There's no supported host implementation in this repo (beyond the examples/basic-host example).

We have contributed a tentative implementation of hosting / iframing / sandboxing logic to the 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:

npm install -S git+https://github.com/modelcontextprotocol/ext-apps.git

Your package.json will then look like:

{
  "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

examples/basic-server-react — Example MCP server with tools that return UI Apps (React)
examples/basic-server-vanillajs — Example MCP server with tools that return UI Apps (vanilla JS)
examples/basic-host — Bare-bones example of hosting MCP Apps

To run the examples end-to-end:

npm i
npm run examples:start

Then open http://localhost:8080/