Back to Plugins

Mcp Apps

Skills for creating MCP Apps with the MCP Apps SDK

development
By Anthropic / Model Context Protocol
2.4k318Updated 1 week agoTypeScriptNOASSERTION

Installation

/plugin install mcp-apps@claude-plugins-official

How to install

  1. Open Claude Code in your terminal
  2. Run the installation command above
  3. The plugin will be enabled automatically
  4. Use the plugin's features in your Claude Code sessions

README

View on GitHub
<!-- LOGO --> <div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="media/mcp-white.svg"> <source media="(prefers-color-scheme: light)" srcset="media/mcp.svg"> <img src="media/mcp.svg" alt="MCP Apps" width="128"> </picture> <h1>MCP Apps</h1> <p> Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client. <br /><br /> <a href="#why-mcp-apps">Why</a> · <a href="https://apps.extensions.modelcontextprotocol.io/api/documents/Quickstart.html">Quickstart</a> · <a href="https://apps.extensions.modelcontextprotocol.io/api/">API Docs</a> · <a href="https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx">Spec</a> · <a href="CONTRIBUTING.md">Contributing</a> </p> </div> <p align="center"> <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> <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue" alt="License: Apache 2.0"></a> <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> <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> <a href="https://github.com/modelcontextprotocol/ext-apps"><img src="https://img.shields.io/github/stars/modelcontextprotocol/ext-apps" alt="GitHub stars"></a> <a href="https://apps.extensions.modelcontextprotocol.io/api/"><img src="https://img.shields.io/badge/docs-API%20Reference-blue" alt="API Documentation"></a> </p> <p align="center"> <img src="media/excalidraw.gif" alt="MCP Apps demo" width="600"> <br><em>Excalidraw built with MCP Apps, running in Claude</em> </p>

Table of Contents

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:

SkillWhat it doesTry it
create-mcp-appScaffolds a new MCP App with an interactive UI from scratch"Create an MCP App"
migrate-oai-appConverts an existing OpenAI App to use MCP Apps"Migrate from OpenAI Apps SDK"
add-app-to-serverAdds interactive UI to an existing MCP server's tools"Add UI to my MCP server"
convert-web-appTurns 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

<p align="center"> <a href="https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt/"><img src="https://img.shields.io/badge/ChatGPT-docs-74aa9c?logo=openai&logoColor=white" alt="ChatGPT"></a> <a href="https://claude.com/docs/connectors/building/mcp-apps/getting-started"><img src="https://img.shields.io/badge/Claude-docs-d97706?logo=claude&logoColor=white" alt="Claude"></a> <a href="https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support"><img src="https://img.shields.io/badge/VS_Code-docs-007ACC?logo=visualstudiocode&logoColor=white" alt="VS Code"></a> <a href="https://block.github.io/goose/docs/tutorials/building-mcp-apps/"><img src="https://img.shields.io/badge/Goose-docs-000000?logo=goose&logoColor=white" alt="Goose"></a> <a href="https://learning.postman.com/docs/postman-ai/mcp-requests/interact"><img src="https://img.shields.io/badge/Postman-docs-FF6C37?logo=postman&logoColor=white" alt="Postman"></a> <a href="https://www.mcpjam.com/blog/mcp-apps-example"><img src="https://img.shields.io/badge/MCPJam-docs-8B5CF6" alt="MCPJam"></a> </p>

[!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:

  1. Tool definition — Your tool declares a ui:// resource containing its HTML interface
  2. Tool call — The LLM calls the tool on your server
  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

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.

PackagePurposeDocs
@modelcontextprotocol/ext-appsBuild interactive Views (App class, PostMessageTransport)API Docs →
@modelcontextprotocol/ext-apps/reactReact hooks for Views (useApp, useHostStyles, etc.)API Docs →
@modelcontextprotocol/ext-apps/app-bridgeEmbed and communicate with Views in your chat clientAPI Docs →
@modelcontextprotocol/ext-apps/serverRegister tools and resources on your MCP serverAPI 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.

<!-- prettier-ignore-start -->
MapThree.jsShaderToy
MapThree.jsShaderToy
Sheet MusicWiki ExplorerCohort Heatmap
Sheet MusicWiki ExplorerCohort Heatmap
Scenario ModelerBudget AllocatorCustomer Segmentation
Scenario ModelerBudget AllocatorCustomer Segmentation
System MonitorTranscript[![Video Resource](examples/video-

…

View source on GitHub

You might also like

Feature Development
Plugins
Plugin Development Kit
Plugins
ContextKit
Plugins