Add App To Server

When you have an existing MCP server with working tools and want to add interactive UIs without breaking text-only clients, this walks you through the entire process. It starts with analyzing which tools actually benefit from visualization (maps, charts, tables) versus those that are fine as plain text, then guides you through adding the MCP Apps SDK, setting up Vite with single-file bundling, and converting tools to app-enabled versions while keeping the original text fallback intact. The strength here is the decision framework and the emphasis on mixed servers where some tools get UIs and others stay plain, which is the realistic scenario when retrofitting an existing codebase rather than building from scratch.

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

View on GitHub

Install

$ npx -y skills add modelcontextprotocol/ext-apps --skill add-app-to-server --agent claude-code

Installs into .claude/skills of the current project.

Files

Add UI to MCP Server

Enrich an existing MCP server's tools with interactive UIs using the MCP Apps SDK (@modelcontextprotocol/ext-apps).

How It Works

Existing tools get paired with HTML resources that render inline in the host's conversation. The tool continues to work for text-only clients — UI is an enhancement, not a replacement. Each tool that benefits from UI gets linked to a resource via _meta.ui.resourceUri, and the host renders that resource in a sandboxed iframe when the tool is called.

Getting Reference Code

Clone the SDK repository for working examples and API documentation:

git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps