Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client.
Why
·
Quickstart
·
API Docs
·
Spec
·
Contributing
Excalidraw built with MCP Apps, running in Claude
- Build with Agent Skills
- Supported Clients
- Why MCP Apps?
- How It Works
- Getting Started
- Using the SDK
- Examples
- Specification
- Resources
- Contributing
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:
| Skill | What it does | Try it |
|---|---|---|
create-mcp-app |
Scaffolds a new MCP App with an interactive UI from scratch | "Create an MCP App" |
migrate-oai-app |
Converts an existing OpenAI App to use MCP Apps | "Migrate from OpenAI Apps SDK" |
add-app-to-server |
Adds interactive UI to an existing MCP server's tools | "Add UI to my MCP server" |
convert-web-app |
Turns an existing web app into a hybrid web + MCP App | "Add MCP App support to my web app" |
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.
Note
MCP Apps is an extension to the core MCP specification. Host support varies — see the clients page for the full list.
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.