Add App To Server
Add sandboxed interactive UI (MCP Apps) to tools on an MCP server you already run, without breaking text-only clients.
Overview
add-app-to-server is an agent skill for the Build phase that adds MCP Apps interactive UI to tools on an existing MCP server using @modelcontextprotocol/ext-apps.
Install
npx skills add https://github.com/modelcontextprotocol/ext-apps --skill add-app-to-serverWhat is this skill?
- Pairs existing MCP tools with HTML resources rendered inline in the host
- Uses @modelcontextprotocol/ext-apps and _meta.ui.resourceUri linkage
- UI enhances tools for capable hosts while plain tool results still work elsewhere
- Guides cloning tagged ext-apps repo for /tmp/mcp-ext-apps reference and JSDoc API map
- Covers analyzing which tools benefit from interactive views versus text-only output
- Reference clone uses npm view @modelcontextprotocol/ext-apps version for matching git branch
- API map indexes src/app.ts for App class and lifecycle handlers
Adoption & trust: 649 installs on skills.sh; 2.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your MCP server exposes useful tools but users in rich hosts only see raw JSON or text with no inline interactive surface.
Who is it for?
Solo builders extending a working MCP server who need guided steps to attach UI resources without rewriting the whole server.
Skip if: Greenfield MCP server setup with no tools yet, or teams that only need CLI scripts with no host-rendered UI.
When should I use this skill?
User asks to add an app, UI, view, or MCP Apps to an existing MCP server that already has tools.
What do I get? / Deliverables
Selected tools gain linked HTML resources that hosts can render in sandboxed iframes while backward-compatible text behavior remains for other clients.
- Tool definitions updated with _meta.ui.resourceUri and paired HTML UI resources
- Documented mapping of which tools received interactive views
Recommended Skills
Journey fit
This skill extends an existing MCP server during product construction—primary value is integration work in the build phase. Integrations is the right shelf because it pairs HTML UI resources with existing MCP tools via ext-apps metadata.
How it compares
Use for enriching an existing MCP tool server—not the same job as picking a generic frontend component library without MCP resource wiring.
Common Questions / FAQ
Who is add-app-to-server for?
Indie and solo developers who maintain an MCP server with tools and want MCP Apps UIs for hosts like Claude Desktop-style clients that support ext-apps resources.
When should I use add-app-to-server?
Use it during Build integrations when you are asked to add an app, view, or interactive UI to existing MCP tools or to enrich tools that already return structured data.
Is add-app-to-server safe to install?
The skill instructs cloning the official SDK and editing your server—review the Security Audits panel on this page and sandbox iframe boundaries in your host before exposing sensitive data in UI.
SKILL.md
READMESKILL.md - Add App To Server
# 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: ```bash git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps ``` ### API Reference (Source Files) Read JSDoc documentation directly from `/tmp/mcp-ext-apps/src/`: | File | Contents | |------|----------| | `src/app.ts` | `App` class, handlers (`ontoolinput`, `ontoolresult`, `onhostcontextchanged`, `onteardown`), lifecycle | | `src/server/index.ts` | `registerAppTool`, `registerAppResource`, `getUiCapability`, tool visibility options | | `src/spec.types.ts` | All type definitions: `McpUiHostContext`, CSS variable keys, display modes | | `src/styles.ts` | `applyDocumentTheme`, `applyHostStyleVariables`, `applyHostFonts` | | `src/react/useApp.tsx` | `useApp` hook for React apps | | `src/react/useHostStyles.ts` | `useHostStyles`, `useHostStyleVariables`, `useHostFonts` hooks | ### Key Examples (Mixed Tool Patterns) These examples demonstrate servers with both App-enhanced and plain tools — the exact pattern you're adding: | Example | Pattern | |---------|---------| | `examples/map-server/` | `show-map` (App tool) + `geocode` (plain tool) | | `examples/pdf-server/` | `display_pdf` (App tool) + `list_pdfs` (plain tool) + `read_pdf_bytes` (app-only tool) | | `examples/system-monitor-server/` | `get-system-info` (App tool) + `poll-system-stats` (app-only polling tool) | ### Framework Templates Learn and adapt from `/tmp/mcp-ext-apps/examples/basic-server-{framework}/`: | Template | Key Files | |----------|-----------| | `basic-server-vanillajs/` | `server.ts`, `src/mcp-app.ts`, `mcp-app.html` | | `basic-server-react/` | `server.ts`, `src/mcp-app.tsx` (uses `useApp` hook) | | `basic-server-vue/` | `server.ts`, `src/App.vue` | | `basic-server-svelte/` | `server.ts`, `src/App.svelte` | | `basic-server-preact/` | `server.ts`, `src/mcp-app.tsx` | | `basic-server-solid/` | `server.ts`, `src/mcp-app.tsx` | ## Step 1: Analyze Existing Tools Before writing any code, analyze the server's existing tools and determine which ones benefit from UI. 1. Read the server source and list all registered tools 2. For each tool, assess whether it would benefit from UI (returns data that could be visualized, involves user interaction, etc.) vs. is fine as text-only (simple lookups, utility functions) 3. Identify tools that could become **app-only helpers** (data the UI needs to poll/fetch but the model doesn't need to call directly) 4. Present the analysis to the user and confirm which tools to enhance ### Decision Framework | Tool output type | UI benefit | Example | |---|---|---| | Structured data / lists / tables | High — interactive table, search, filtering | List of items, search results | | Metrics / numbers over time | High — charts, gauges, dashboards | System stats, analytics | | Media / rich content | High — viewer, player, renderer | Maps, PDFs, images, video | | Simple text / confirmations