Agent skill · software engineering · modelcontextprotocol
convert-web-app
This skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP App", "convert iframe embed to MCP App", "turn my SPA into an MCP App", or needs to add MCP App support to an existing web application while keeping it working standalone. Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration.
Why this skill is useful
Provides specific guidance and reference code for integrating MCP App support into existing web applications, which the AI wouldn't reliably generate on its own.
What it needs
Requires git, npm installed locally. About 10k tokens when loaded. Last updated 2026-07-23. 2,691 stars on the source repository.
What this skill does
Add MCP App Support to a Web App Add MCP App support to an existing web application so it works both as a standalone web app and as an MCP App that renders inline in MCP-enabled hosts like Claude Desktop — from a single codebase. How It Works The existing web app stays intact. A thin initialization layer detects whether the app is running inside an MCP host or as a regular web page, and fetches parameters from the appropriate source. A new MCP server wraps the app's bundled HTML as a resource and registers a tool to display it. The app's rendering logic is shared — only the data source changes. 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, 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 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 Reference Examples Example Relevant Pattern --------- ----------------- examples/map-server/ External API integration + CSP (connectDomains, resourceDomains) examples/sheet-music-server/ Library that loads external assets (soundfonts) examples/pdf-s …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills modelcontextprotocol/convert-web-app