Create Mcp App

This walks you through building interactive UIs that run inside Claude Desktop and other MCP hosts. The core pattern is simple: register a tool that returns data, link it to an HTML resource that displays the UI, and the host handles the rendering. You get framework templates for React, Vue, Svelte, and vanilla JS, plus the patterns doc covers real stuff like chunked responses, polling dashboards, and streaming input. The gotchas are predictable: register handlers before calling connect, always configure CSP for network requests since there's no same origin server, and don't forget text fallbacks for hosts without UI support. If you're adding interactive views to MCP tools, this is the reference you clone and adapt from.

skills.sh installs: 2.3K
GitHub stars: 3.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add modelcontextprotocol/ext-apps --skill create-mcp-app --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

Tool - Called by the LLM/host, returns data
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