Convert Web App
Turns your existing web application into a hybrid that works both standalone and as an MCP App inside Claude Desktop, from a single codebase. The skill walks through analyzing your current data sources (URL params, API calls, props), mapping them to MCP equivalents like ontoolinput arguments and server-side tools, and wrapping everything with a thin detection layer that switches between contexts. Heavy focus on CSP investigation since the sandboxed iframe fails silently on missing domain declarations. You get framework-specific templates for React, Vue, Svelte, and others, plus patterns for handling external APIs and binary content. Best when you already have a working web UI and want to embed it inline in chat without rebuilding from scratch.
- skills.sh installs
- 1K
- GitHub stars
- 3.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add modelcontextprotocol/ext-apps --skill convert-web-app --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Standalone: Browser loads page → App reads URL params / APIs → renders
MCP App: Host calls tool → Server returns result → Host renders app in iframe → App reads MCP lifecycle → renders
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:
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/:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/modelcontextprotocol/ext-apps
- Categories
- Backend & APIs, AI & Agent Building
- First seen
- Jun 3, 2026
More from modelcontextprotocol/ext-apps
All 4Recommended
More Backend & APIs
nemo-evaluator-sdkorchestra-research/ai-research-skillsEvaluates LLMs across 100+ benchmarks from 18+ harnesses (MMLU, HumanEval, GSM8K, safety, VLM) with multi-backend execution. Use when needing scalable evaluatio1Kskills.sh installs
react-selective-hydrationpatternsdev/skillsTeaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating interactive components while streaming the rest 1Kskills.sh installs
sap-btp-connectivitysecondsky/sap-skillsSAP BTP Connectivity skill covering Destination Service, Connectivity Service, Cloud Connector, Connectivity Proxy, and Transparent Proxy for Kubernetes. Use wh1Kskills.sh installs
use-modular-walletscirclefin/skillsBuild crypto wallets using Circle Modular Wallets SDK with passkey authentication, gasless transactions, and extensible module architecture. Use when: creating 998skills.sh installsuse-user-controlled-walletscirclefin/skillsBuild non-custodial wallets where end users retain control of their private keys via Circle's user-controlled wallets SDK. Supports Google, Apple, Facebook soci996skills.sh installs
avatar-videoheygen-com/skillsCreate AI avatar videos with precise control over avatars, voices, scripts, and backgrounds using HeyGen's v3 API (POST /v3/videos). Two modes: type="avatar" wi994skills.sh installs