Agent skill · software engineering · modelcontextprotocol
add-app-to-server
This skill should be used when the user asks to "add an app to my MCP server", "add UI to my MCP server", "add a view to my MCP tool", "enrich MCP tools with UI", "add interactive UI to existing server", "add MCP Apps to my server", or needs to add interactive UI capabilities to an existing MCP server that already has tools. Provides guidance for analyzing existing tools and adding MCP Apps UI resources.
Why this skill is useful
Provides specific patterns and templates for integrating interactive UIs into MCP servers that the AI wouldn't reliably generate on its own.
What it needs
Requires git, npm installed locally. About 8k tokens when loaded. Last updated 2026-07-23. 2,691 stars on the source repository.
What this skill does
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: 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/ displaypdf (App tool) + listpdfs (plain tool) + readpdfbytes (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, …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills modelcontextprotocol/add-app-to-server