MCP Apps

Install

npx skillfoxx add plugins/mcp-apps

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@mcp-apps

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps

This is third-party code. Review the repository files before installing.

What it does

MCP Apps is the official Model Context Protocol extension that lets an MCP server return an HTML interface alongside a tool result: a chart, a form, a dashboard. The repository holds the specification, the SDK, and four skills for agents: scaffolding a new MCP App from scratch, adding a UI to an existing MCP server tool, migrating an app from the OpenAI Apps SDK, and turning a plain web app into a hybrid one. The skills give the agent a step-by-step procedure and links to reference templates in React, Vue, Svelte, Preact, Solid and plain JavaScript.

Who it is for. For developers building MCP servers who need to give a tool an interactive interface instead of a plain text reply.

Example request

Add an interactive UI to my MCP server that shows the result as a dashboard

Limitations

The skills give instructions and template links, but building the UI needs its own build setup (vite-plugin-singlefile to bundle the HTML). Client-side MCP Apps support depends on the specific app: Claude, ChatGPT, VS Code, Goose, Postman and others are listed in the README.

How to disable. Remove the mcp-apps plugin via /plugin in Claude Code, or, for a manual install, delete the skill folder from your agent's directory.

Security check

• The skills only guide UI development and don't perform external actions on their own

README in short

The README of the official modelcontextprotocol/ext-apps repository describes MCP Apps as a protocol extension for interactive UIs on top of MCP server tools. The README lists supporting clients: Claude, ChatGPT, VS Code, Goose, Postman, MCPJam, mcp-use and Alpic. The fastest start is one of four skills, installable as a Claude Code plugin or manually into any agent that supports Agent Skills. The repository also holds example servers in several frameworks and the full specification text.

SKILL.md

---
name: create-mcp-app
description: 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.
---

# 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 |

Related