skills.rest
modelcontextprotocol
modelcontextprotocolOFFICIAL
Explore all skills by this author →
WebsiteGitHub

create-mcp-app

Generates a complete MCP App starter with tool, UI resource, and registration metadata.

2.7k|363|Updated Nov 21, 2025
Search Tags:#sdk#scaffold#mcp#apps#tool#resource
One-click install
npx skills add https://github.com/modelcontextprotocol/ext-apps --skill create-mcp-app-modelcontextprotocol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-mcp-app
Source: https://github.com/modelcontextprotocol/ext-apps/tree/main/plugins/mcp-apps/skills/create-mcp-app
Command: npx skills add https://github.com/modelcontextprotocol/ext-apps --skill create-mcp-app-modelcontextprotocol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MCP App development traditionally requires coordinating a tool, a UI resource, and precise host integration. This skill provides a complete starter that wires together a tool and a bundled HTML resource, registers them with the MCP Apps SDK, and establishes the essential lifecycle and UI linkage.

Core Features & Use Cases

  • Scaffold a working MCP App skeleton that includes a tool and a linked UI resource.
  • Generate clear registration metadata and guidelines for host integration, lifecycle management, and UI-resource linking.
  • Use across frameworks (Vanilla JS, React, Vue, etc.) to accelerate prototyping, testing, and production-grade implementations.

Quick Start

Ask to scaffold a new MCP App with a sample tool and UI resource using the MCP Apps SDK.

Frequently Asked Questions about create-mcp-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold an MCP App with a tool and UI resource?▼

To scaffold an MCP App, ask to generate a starter that wires together a tool and a bundled HTML UI resource. It creates the required registration metadata, lifecycle hooks, and UI-resource linkage for rapid prototyping.

Can I use React or Vue to build the UI resource for an MCP App?▼

Yes, you can build the UI resource for an MCP App using Vanilla JS, React, Vue, or other supported frameworks. The skill generates template files and validates SDK conventions across these frameworks.

What is the _meta.ui.resourceUri linkage in MCP Apps SDK?▼

The _meta.ui.resourceUri linkage is the required registration metadata that connects your MCP tool to its bundled UI resource. It ensures proper host integration and lifecycle management within the MCP Apps SDK.

Does scaffolding an MCP App handle host integration and lifecycle hooks?▼

Yes, scaffolding an MCP App generates clear guidelines for host integration and establishes essential lifecycle hooks. It validates SDK conventions to ensure the starter is production-ready.

Do I need to manually configure dependencies for an MCP App starter?▼

No, you do not need to manually configure dependencies. The skill validates dependencies and SDK conventions automatically while generating the MCP App skeleton, tool, and UI resource.

Why use an MCP App scaffold instead of building a tool and UI manually?▼

MCP App development requires coordinating a tool, a UI resource, and precise host integration. Using a scaffold wires these together automatically, ensuring correct metadata and UI linkage for rapid prototyping.

Related Skills

Explore More Software Engineering Skills→
afterworkafterwork

aif

Automates Tailwind project builds and deployments via a single command.

Official
Advanced
olaservoolaservo
17

resourceful

Organize and utilize resource files within skills for complex workflows.

Community
Basic
OptimusPiOptimusPi

create-mcp-app

Scaffold MCP apps with tool-to-HTML resource wiring and lifecycle handlers.

Community
Advanced
wedsamuel1230wedsamuel1230
1

skill-creator

Scaffold Claude skills with SKILL.md templates and Python bootstrap scripts.

Community
Intermediate