Agent skill · software engineering · modelcontextprotocol
create-mcp-app
This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides comprehensive guidance for building MCP Apps with interactive UIs.
Why this skill is useful
Provides specific patterns and templates for building MCP Apps that the AI wouldn't reliably generate on its own.
What it needs
Requires git, npm installed locally. About 4k tokens when loaded. Last updated 2026-07-23. 2,691 stars on the source repository.
What this skill does
Create MCP App Build interactive UIs that run inside MCP-enabled hosts like Claude Desktop. An MCP App combines an MCP tool with an HTML resource to display rich, interactive content. Core Concept: Tool + Resource Every MCP App requires two parts linked together: 1. Tool - Called by the LLM/host, returns data 2. Resource - Serves the bundled HTML UI that displays the data The tool's meta.ui.resourceUri references the resource's URI. Host calls tool → Host renders resource UI → Server returns result → UI receives result. Quick Start Decision Tree Framework Selection Framework SDK Support Best For ----------- ------------- ---------- React useApp hook provided Teams familiar with React Vanilla JS Manual lifecycle Simple apps, no build complexity Vue/Svelte/Preact/Solid Manual lifecycle Framework preference Project Context Adding to existing MCP server: Import registerAppTool, registerAppResource from SDK Add tool registration with meta.ui.resourceUri Add resource registration serving bundled HTML Creating new MCP server: Set up server with transport (stdio or HTTP) Register tools and resources Configure build system with vite-plugin-singlefile Getting Reference Code Clone the SDK repository for working examples and API documentation: Framework Templates Learn and adapt from /tmp/mcp-ext-apps/examples/basic-server-{framework}/: Template Key Files ---------- ----------- basic-server-vanillajs/ server.ts, src/mcp-app.ts, mcp-app.html basic-server-react/ server.ts, src/mcp-app.tsx (uses useApp hook) basic-server-vue/ server.ts, src/App.vue basic-server-svelte/ server.ts, src/App.svelte basic-server-preact/ server.ts, src/mcp-app.tsx basic-server-solid/ server.ts, src/mcp-app.tsx Each template includes: server.ts with registerAppTool and registerAppResource main.ts entry point with HTTP and stdio transport setup Client-side app (e.g., src/mcp-app.ts, src/mcp-app.tsx) with lifecycle handlers src/global.css with global styles and host style variable fallbacks vite.config.ts …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills modelcontextprotocol/create-mcp-app