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
Olivier Chafik 75ecd62384
fix(examples): improve updateModelContext with structured YAML frontmatter (#271)
* map-server: fix async/await in ontoolresult, remove unused getViewStorageKey

* fix(map-server): improve updateModelContext and fix initialization

- Use structured YAML frontmatter format for model context (like pdf-server)
- Add tool name, altitude, and cleaner data format
- Fix initialization deadlock: app.connect() was inside ontoolresult handler
  which could never fire until connected
- Fix view state persistence: widgetUUID now properly extracted from
  ontoolresult and used to restore persisted camera position
- Server now includes widgetUUID in tool result _meta for widget identification

* fix(pdf-server): use widgetUUID for page persistence

- Add widgetUUID to tool result _meta for widget identification
- Use widgetUUID instead of generated key (pdfUrl+toolId) for localStorage
- Enables reliable page restoration when revisiting PDF widgets

* fix(transcript-server): use structured YAML frontmatter for model context

- Add tool name, listening status, and unsent entry count in frontmatter
- Consistent format with pdf-server and map-server

* update names

* drop bogus altitude

* Update mcp-app.ts
2026-01-14 22:08:09 +00:00
.github/workflows examples: add PDF viewer w/ chunked data loading, full-screen, model context updates, private tool (#267) 2026-01-14 14:25:24 +00:00
.husky Add pre-commit check for private registry URLs in package-lock.json (#133) 2025-12-16 13:41:50 +00:00
docs Add "Server-Side" section to OpenAI migration guide 2026-01-13 15:18:05 -06:00
examples fix(examples): improve updateModelContext with structured YAML frontmatter (#271) 2026-01-14 22:08:09 +00:00
plugins/mcp-apps Add Claude Code plugin with "Create MCP App" skill (#256) 2026-01-14 00:50:18 +00:00
scripts fix: ensure lib is built before examples:build (#185) 2026-01-09 01:36:42 +00:00
specification/draft disambiguate resource in csp sample (#257) 2026-01-14 00:49:40 +00:00
src Improve JSDoc comments with cross-references and clarifications (#254) 2026-01-14 00:41:17 +00:00
tests/e2e fix(examples): improve updateModelContext with structured YAML frontmatter (#271) 2026-01-14 22:08:09 +00:00
.gitattributes fix: Windows compatibility - bun as optional dep, cross-env for examples (#145) 2025-12-16 14:07:38 +00:00
.gitignore tests: add Playwright E2E tests with screenshot golden testing (+ fix examples session handling) (#115) 2025-12-13 20:57:27 +00:00
.prettierignore Add Claude Code plugin with "Create MCP App" skill (#256) 2026-01-14 00:50:18 +00:00
.prettierrc.json api: optional Client in AppBridge (allow custom forwarding), better protocol types (AppRequest, AppNotification, AppResult) (#146) 2025-12-13 21:07:13 +00:00
AGENTS.md Add Claude Code plugin with "Create MCP App" skill (#256) 2026-01-14 00:50:18 +00:00
build.bun.ts build app-with-deps (#221) 2026-01-09 01:26:31 +00:00
CLAUDE.md Add {AGENTS,CLAUDE}.md for AI assistant guidance (#218) 2026-01-12 19:54:24 +00:00
CONTRIBUTING.md tests: add Playwright E2E tests with screenshot golden testing (+ fix examples session handling) (#115) 2025-12-13 20:57:27 +00:00
LICENSE chore: update licensing to Apache 2.0 for new contributions (#251) 2026-01-14 00:42:13 +00:00
package-lock.json examples: add PDF viewer w/ chunked data loading, full-screen, model context updates, private tool (#267) 2026-01-14 14:25:24 +00:00
package.json examples: add PDF viewer w/ chunked data loading, full-screen, model context updates, private tool (#267) 2026-01-14 14:25:24 +00:00
playwright.config.ts fix: ensure E2E screenshot tests work consistently across CI and local (#150) 2025-12-15 15:12:36 +00:00
README.md examples: add PDF viewer w/ chunked data loading, full-screen, model context updates, private tool (#267) 2026-01-14 14:25:24 +00:00
RELEASES.md chore: release 0.3.0 (#204) 2026-01-09 00:55:45 +00:00
tsconfig.json Initial commit 2025-11-21 11:56:27 +00:00
typedoc.config.mjs Improve JSDoc comments with cross-references and clarifications (#254) 2026-01-14 00:41:17 +00:00

@modelcontextprotocol/ext-apps

npm version API Documentation

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.

How It Works

MCP Apps extend the Model Context Protocol to let servers deliver interactive UIs to MCP hosts. Here's how it works:

  1. Tool call — The LLM calls a tool on your server
  2. UI Resource — The tool's definition links to a predeclared ui:// resource containing its HTML interface
  3. Host renders — The host fetches the resource and displays it in a sandboxed iframe
  4. Bidirectional communication — The host passes tool data to the UI via notifications, and the UI can call other tools through the host

This enables dashboards, forms, visualizations, and other rich experiences inside chat interfaces.

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

npm install -S @modelcontextprotocol/ext-apps

Or edit your package.json manually:

{
  "dependencies": {
    "@modelcontextprotocol/ext-apps": "^0.0.1"
  }
}

Examples

Map Three.js ShaderToy
Map Three.js ShaderToy
Sheet Music Wiki Explorer Cohort Heatmap
Sheet Music Wiki Explorer Cohort Heatmap
Scenario Modeler Budget Allocator Customer Segmentation
Scenario Modeler Budget Allocator Customer Segmentation
System Monitor Transcript Video Resource
System Monitor Transcript Video Resource
PDF Server
PDF Server

Starter Templates

Basic The same app built with different frameworks — pick your favorite!

React · Vue · Svelte · Preact · Solid · Vanilla JS

The examples/ directory contains additional demo apps showcasing real-world use cases.

To run all examples:

npm install
npm start

Then open http://localhost:8080/.

Resources