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 546f507e49
Add QR code Python MCP server example (#105)
* Add QR code Python MCP server example

A minimal Python MCP server that generates customizable QR codes with an
interactive widget UI. Features:

- Generate QR codes from any text or URL
- Customizable colors, size, border, and error correction
- Interactive widget using MCP Apps SDK protocol
- Supports both HTTP (for web clients) and stdio (for Claude Desktop)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Potential fix for code scanning alert no. 10: Client-side cross-site scripting

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Add semicolon

* Bind to 0.0.0.0 for Docker compatibility

* Use SDK from unpkg + add CSP resourceDomains for external scripts

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
2025-12-09 19:20:08 +01:00
.github/workflows Deploy docs to GitHub Pages on release (#104) 2025-12-09 16:18:19 +01:00
.husky Add basic-host and basic-server-react examples 2025-12-04 14:28:27 -06:00
docs Add checkpoints and callouts to quickstart guide (#93) 2025-12-09 16:16:28 +01:00
examples Add QR code Python MCP server example (#105) 2025-12-09 19:20:08 +01:00
specification/draft fix: change size-changed to be in correct tense (#83) 2025-12-08 12:14:56 +01:00
src Add RESOURCE_MIME_TYPE constant (#108) 2025-12-09 19:10:56 +01:00
.gitattributes Track package-lock.json for deterministic builds (#44) 2025-12-01 20:06:32 +00:00
.gitignore Add Three.js marketing example server 2025-12-08 21:19:42 +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 release: 0.0.3, switched to npm trusted publishing (#101) 2025-12-09 00:52:52 +01:00
LICENSE add license (#96) 2025-12-08 21:51:19 +01:00
package-lock.json Smoothen the process of getting started (#103) 2025-12-09 16:15:32 +01:00
package.json release: v0.0.4 (try using node token again) (#102) 2025-12-09 01:29:06 +01:00
README.md Smoothen the process of getting started (#103) 2025-12-09 16:15:32 +01: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

@modelcontextprotocol/ext-apps

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.

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

Start with these foundational examples to learn the SDK:

The 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