SkillFoxx

MCP Apps plugin

The official plugin with skills for building MCP Apps: interactive UIs on top of MCP tools that render inline in Claude

  • 3,080 ★ on the repository
  • Last commit
PluginEditors’ pick

Minimal access

Why this level

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

modelcontextprotocol/ext-appsAuthor:Model Context Protocol

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add plugins/mcp-apps

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

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

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.

Good fit when

  • You're building an MCP server and want to show a tool result as a chart, a map or a form instead of plain text
  • You have an app built on the OpenAI Apps SDK and need to migrate it to MCP Apps
  • You have a regular web app and need to add MCP support without a rewrite

Not a fit when

  • Your MCP server is fine with plain text or tabular answers and needs no UI
  • The client you're targeting doesn't support MCP Apps

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.

FAQ

How is this different from a plain MCP server?

A plain server returns text or structured data. MCP Apps adds a link to an HTML resource to the tool result, which the host renders as an embedded interface.

Does it only work with Claude Code?

The /plugin install flow is documented for Claude Code, but any agent that supports the Agent Skills format can add them manually following the repository's guide.

Discussion

No questions or reviews yet.

Plugins

A plugin with skills for building TypeScript MCP servers and MCP apps: the agent scaffolds, edits, debugs and verifies them

PluginExtended access10.9K

A CLI compiler that reads app code, API specs and database schemas and generates a ready MCP server with tool permission checks.

CLIExtended access107

The openmcp CLI and a VS Code extension for debugging MCP servers: tools, prompts and resources, chat with a model, test cases

CLIExtended access750
Official

A command-line debugger for MCP servers from Giant Swarm: a REPL for tools, OAuth 2.1 and an MCP server mode for Cursor

CLIExtended access38

An extension for the Pi agent that connects MCP servers through one proxy tool without flooding the context with tool definitions

PluginExtended access1.6K

A terminal and browser client opens a chat between an Anthropic model and any MCP server so its tools can be tested.

CLIExtended access139

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.

README badge

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

Report a problem