ext-apps
installs/mo · npmstarsforks
How to install ext-apps?
modelcontextprotocol/ext-apps
$git clone https://github.com/modelcontextprotocol/ext-appsREADME.md
| 1 | <!-- LOGO --> |
| 2 | <div align="center"> |
| 3 | <picture> |
| 4 | <source media="(prefers-color-scheme: dark)" srcset="media/mcp-white.svg"> |
| 5 | <source media="(prefers-color-scheme: light)" srcset="media/mcp.svg"> |
| 6 | <img src="media/mcp.svg" alt="MCP Apps" width="128"> |
| 7 | </picture> |
| 8 | <h1>MCP Apps</h1> |
| 9 | <p> |
| 10 | Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client. |
| 11 | <br /><br /> |
| 12 | <a href="#why-mcp-apps">Why</a> |
| 13 | · |
| 14 | <a href="https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html">Quickstart</a> |
| 15 | · |
| 16 | <a href="https://apps.extensions.modelcontextprotocol.io/api/">API Docs</a> |
| 17 | · |
| 18 | <a href="https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx">Spec</a> |
| 19 | · |
| 20 | <a href="CONTRIBUTING.md">Contributing</a> |
| 21 | </p> |
| 22 | </div> |
| 23 | |
| 24 | <p align="center"> |
| 25 | <a href="https://github.com/modelcontextprotocol/ext-apps/actions/workflows/ci.yml"><img src="https://github.com/modelcontextprotocol/ext-apps/actions/workflows/ci.yml/badge.svg" alt="CI"></a> |
| 26 | <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue" alt="License: Apache 2.0"></a> |
| 27 | <a href="https://www.npmjs.com/package/@modelcontextprotocol/ext-apps"><img src="https://img.shields.io/npm/v/@modelcontextprotocol/ext-apps.svg" alt="npm version"></a> |
| 28 | <a href="https://www.npmjs.com/package/@modelcontextprotocol/ext-apps"><img src="https://img.shields.io/npm/dm/@modelcontextprotocol/ext-apps.svg" alt="npm downloads"></a> |
| 29 | <a href="https://github.com/modelcontextprotocol/ext-apps"><img src="https://img.shields.io/github/stars/modelcontextprotocol/ext-apps" alt="GitHub stars"></a> |
| 30 | <a href="https://apps.extensions.modelcontextprotocol.io/api/"><img src="https://img.shields.io/badge/docs-API%20Reference-blue" alt="API Documentation"></a> |
| 31 | </p> |
| 32 | |
| 33 | <p align="center"> |
| 34 | <img src="media/excalidraw.gif" alt="MCP Apps demo" width="600"> |
| 35 | <br><em>Excalidraw built with MCP Apps, running in Claude</em> |
| 36 | </p> |
| 37 | |
| 38 | ## Table of Contents |
| 39 | |
| 40 | - [Build with Agent Skills](#build-with-agent-skills) |
| 41 | - [Supported Clients](#supported-clients) |
| 42 | - [Why MCP Apps?](#why-mcp-apps) |
| 43 | - [How It Works](#how-it-works) |
| 44 | - [Getting Started](#getting-started) |
| 45 | - [Using the SDK](#using-the-sdk) |
| 46 | - [Examples](#examples) |
| 47 | - [Specification](#specification) |
| 48 | - [Resources](#resources) |
| 49 | - [Contributing](#contributing) |
| 50 | |
| 51 | ## Build with Agent Skills |
| 52 | |
| 53 | The fastest way to build an MCP App is to let your AI coding agent do it. This |
| 54 | repo ships four [Agent Skills](https://agentskills.io/) — install them once, |
| 55 | then just ask: |
| 56 | |
| 57 | | Skill | What it does | Try it | |
| 58 | | --------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------- | |
| 59 | | [`create-mcp-app`](./plugins/mcp-apps/skills/create-mcp-app/SKILL.md) | Scaffolds a new MCP App with an interactive UI from scratch | _"Create an MCP App"_ | |
| 60 | | [`migrate-oai-app`](./plugins/mcp-apps/skills/migrate-oai-app/SKILL.md) | Converts an existing OpenAI App to use MCP Apps | _"Migrate from OpenAI Apps SDK"_ | |
| 61 | | [`add-app-to-server`](./plugins/mcp-apps/skills/add-app-to-server/SKILL.md) | Adds interactive UI to an existing MCP server's tools | _"Add UI to my MCP server"_ | |
| 62 | | [`convert-web-app`](./plugins/mcp-apps/skills/convert-web-app/SKILL.md) | Turns an existing web app into a hybrid web + MCP App | _"Add MCP App support to my web app"_ | |
| 63 | |
| 64 | ### Install the Skills |
| 65 | |
| 66 | **Claude Code** — install via the plugin marketplace: |
| 67 | |
| 68 | ``` |
| 69 | /plugin marketplace add modelcontextprotocol/ext-apps |
| 70 | /plugin install mcp-apps@modelcontextprotocol-ext-apps |
| 71 | ``` |
| 72 | |
| 73 | **Other agents** — any AI coding agent that supports |
| 74 | [Agent Skills](https://agentskills.io/) c |
People who liked this also viewed
6 picksType
- fastmcp🚀 The fast, Pythonic way to build MCP servers and clients.MCP ServersJul 2026
- playwright-mcpPlaywright MCP serverMCP ServersJul 2026
- langchain-mcp-adaptersLangChain 🔌 MCPMCP ServersJul 2026
- mcporterCall MCPs via TypeScript, masquerading as simple TypeScript API. Or package them as cli.MCP ServersJul 2026
- mcp-proxyA bridge between Streamable HTTP and stdio MCP transportsMCP ServersJul 2026
- fastmcpA TypeScript framework for building MCP servers.MCP ServersJul 2026
