Create Mcp App
Scaffold an MCP App that pairs an MCP tool with a bundled HTML UI resource for interactive views inside Claude Desktop and other MCP hosts.
Overview
create-mcp-app is an agent skill for the Build phase that guides you through pairing an MCP tool with an HTML UI resource using MCP Apps SDK registration and host lifecycle patterns.
Install
npx skills add https://github.com/modelcontextprotocol/ext-apps --skill create-mcp-appWhat is this skill?
- Core pattern: MCP tool plus HTML resource linked via `_meta.ui.resourceUri`
- Guidance for adding apps to existing servers or greenfield MCP projects
- Framework matrix: React (`useApp`), Vanilla JS, Vue/Svelte/Preact/Solid lifecycle paths
- Documents host flow: tool call → render resource UI → server result → UI update
- Covers `registerAppTool` and `registerAppResource` from the MCP Apps SDK
- Every MCP App requires exactly two linked parts: tool and HTML resource
Adoption & trust: 1.4k installs on skills.sh; 2.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have—or need—an MCP tool that returns data but users cannot interact with results inside the host without a proper App resource and `_meta.ui` wiring.
Who is it for?
Indie builders adding dashboards, forms, or visualizations to MCP servers they already run for Claude Desktop-class hosts.
Skip if: Teams only needing stateless JSON tools with no embedded UI, or projects not targeting MCP Apps-capable hosts.
When should I use this skill?
User asks to create an MCP App, add UI to an MCP tool, build an interactive MCP View, scaffold an MCP App, or needs MCP Apps SDK and host integration guidance.
What do I get? / Deliverables
You ship a registered MCP App where the host can invoke the tool and render the bundled UI resource that consumes tool results interactively.
- Tool registration with `_meta.ui.resourceUri`
- Resource registration serving bundled HTML UI
Recommended Skills
Journey fit
Build is the canonical phase for extending agent surfaces with new tools and host-rendered UIs, not for distribution or growth campaigns. agent-tooling is where MCP servers, tool registration, and SDK lifecycle patterns belong in the solo-builder journey.
How it compares
Skill package for MCP App architecture—not a replacement for generic MCP server tutorials that skip UI-resource registration.
Common Questions / FAQ
Who is create-mcp-app for?
Solo developers building MCP servers who need interactive HTML views bound to specific tools in MCP-enabled clients.
When should I use create-mcp-app?
During Build agent-tooling when you scaffold a new MCP App, attach a UI to an existing tool, or need SDK patterns for tool plus resource registration.
Is create-mcp-app safe to install?
Check the Security Audits panel on this Prism page; implementing MCP Apps may require network and filesystem access in your server—scope permissions to what your UI actually needs.
SKILL.md
READMESKILL.md - Create Mcp App
# 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: ```bash git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps ``` ### 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` using `vite-plugin-singlefile` - `package.json` with `npm run` scripts and required dependencies - `.gitignore` excluding `node_modules/` and `dist/` ### API Reference (Source Files) Read JSDoc documentation directly from `/tmp/mcp-ext-apps/src/`: | File | Contents | |------|----------| | `src/app.ts` | `App` class, handlers (`ontoolinput`, `ontoolresult`, `onhostcontextchanged`, `onteardown`, etc.), lifecycle | | `src/server/index.ts` | `registerAppTool`, `registerAppResource`, helper functions | | `src/spec.types.ts` | All type definitions: `McpUiHostContext`, `McpUiStyleVariableKey` (CSS variable names), `McpUiResourceCsp` (CSP configuration), etc. | | `src/styles.ts` | `applyDocumentTheme`, `applyHostStyleVariables`, `applyHostFonts` | | `src/react/useApp.tsx` | `useApp` hook for React apps | ### Advanced Patterns See `/tmp/mcp-ext-apps/docs/patterns.md` for detailed recipes: - **App-only tools** — `visibility: ["app"]`, hiding tools from model - **Polling** — real-time dashboards, interval management - **Chunked responses** — large files, pagination, base64 encoding - **Error handling** — `isError`, informing model of failures - **Binary resources** — audio/video/etc via `resources/read`, blob