create-mcp-app: Claude Code Skill & Agent Tool
An open-source skill by modelcontextprotocol (opens in a new tab), published in the modelcontextprotocol/ext-apps (opens in a new tab) repository on GitHub. The official Model Context Protocol skill for building MCP Apps — tools that render an interactive interface inside the host — with framework templates and SDK patterns.
Install create-mcp-app
Requires Node.jsnpx skills add modelcontextprotocol/ext-apps --skill create-mcp-appRun this command in your project terminal to install this skill for Claude Code.
What this skill does
create-mcp-app is the official Model Context Protocol skill for building MCP Apps: tools that render an interactive user interface directly inside the host application instead of returning plain text. Use it when you want to add a UI to an MCP tool, scaffold an MCP App, or understand the SDK's patterns.
The skill starts from the core concept — an MCP App is a tool paired with a UI resource — and a quick decision tree that picks a framework and adapts to your existing project. The agent learns from the official example templates for vanilla JavaScript, React with its useApp hook, Vue and Svelte, from the SDK source files that serve as the API reference, from advanced patterns, and from a reference host implementation.
Critical implementation notes prevent the usual traps: how to add dependencies, how to run a TypeScript server, and the order in which handlers must be registered. A list of common mistakes saves debugging time, and the testing section shows how to run your server next to the basic reference host and debug with log messages sent to the host. Use it with Claude Code to give your MCP tools a real interface people can click.
Key Capabilities
- Core model: a tool paired with a UI resource rendered inside the host
- Framework templates for vanilla JavaScript, React, Vue and Svelte
- SDK source files and a reference host implementation as references
- Notes on dependencies, TypeScript execution and handler registration order
- Local testing with the basic reference host and debugging with sendLog
How to use with Claude Code & AI Agents
Install the skill
Run the command above at the root of your project. The CLI asks which agents to set up — Claude Code, Cursor and other supported agents — and adds create-mcp-app to the project, so teammates who pull the repository get it too. Add-gto install it for your user account across every project.Open a new agent session
Start a fresh Claude Code session in that project so the agent loads the new skill. This skill needs no extra tool or API key.Ask in plain words
Describe the task, for example:“Create an MCP App with React that shows our sales dashboard inside the chat.”The agent matches your request to the skill's description and follows its SKILL.md instructions step by step. Read them on GitHub before using the skill on a system that matters.