Create MCP App: build interactive UIs inside MCP-enabled hosts (short listing)
Build MCP Apps — an MCP tool plus a bundled HTML resource with lifecycle handlers, framework templates (React/Vue/Svelte/Vanilla) and patterns for polling, streaming, CSP and fullscreen
- What
- Build MCP Apps — an MCP tool plus a bundled HTML resource with lifecycle handlers, framework templates (React/Vue/Svelte/Vanilla) and patterns for polling, streaming, CSP and fullscreen
- Cost
- Free
- Needs
- an MCP server project (or a new one) and the @modelcontextprotocol/ext-apps SDK — the skill is guidance the agent follows, not software to install
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Selected by Skill Harbor — short listing (the repo states no license, so no content is reproduced): @modelcontextprotocol's official guide for building MCP Apps — interactive UIs that run inside MCP-enabled hosts like Claude Desktop. The core concept: every MCP App is a tool plus an HTML resource, linked by the tool's `_meta.ui.resourceUri` — the host calls the tool, renders the resource UI, the server returns the result, and the UI receives it. Covers framework selection (React with a `useApp` hook, vanilla JS, Vue/Svelte/Preact/Solid with manual lifecycle), project setup for existing or new MCP servers, framework templates to clone from the SDK repo, API references (App class handlers, server registration helpers, spec types, theming), and advanced patterns: app-only tools, polling dashboards, chunked responses, binary resources, network requests with CSP configuration, host context (theme, fonts, safe areas), fullscreen mode, streaming input, view-state recovery, plus common mistakes (missing text fallback, CSP misconfiguration, handlers registered after connect) and local testing with the basic-host example. Honest caveats: you'll build against a live SDK — the guide expects you to clone the SDK repo for examples and JSDoc, and to bundle UIs with vite-plugin-singlefile; license not stated by the source repo — short listing with a link only, nothing copied. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: an MCP server project (or a new one) and the @modelcontextprotocol/ext-apps SDK — the skill is guidance the agent follows, not software to install Install "Create MCP App: build interactive UIs inside MCP-enabled hosts" for me. It gives my agent @modelcontextprotocol's official guide for building MCP Apps: the tool-plus-HTML-resource core concept, framework templates (React, vanilla, Vue/Svelte/Preact/Solid), API references, and advanced patterns (app-only tools, polling, streaming, CSP, host context, fullscreen, view-state recovery). IMPORTANT: the repo states no license — fetch from the link only, and reproduce nothing beyond the link. Repository: https://github.com/modelcontextprotocol/ext-apps/blob/main/plugins/mcp-apps/skills/create-mcp-app/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). Review the files for suspicious commands or credential handling; stop on any red flag and never assume the repository is safe. Tell me if anything looks off. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "create-mcp-app". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. clone the SDK repo for the framework templates and JSDoc; decide the framework and whether this is a new server or an add-on). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.