convert-web-app

Add MCP App support to existing web applications with hybrid initialization and resource registration.

2.7k|363|Updated Nov 21, 2025

Search Tags:#mcp #csp #web-app #resource-registration #ext-apps #hybrid-app #server-tool

Ready to run

npx skills add https://github.com/modelcontextprotocol/ext-apps --skill convert-web-app-modelcontextprotocol

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: convert-web-app
Source: https://github.com/modelcontextprotocol/ext-apps/tree/main/plugins/mcp-apps/skills/convert-web-app
Command: npx skills add https://github.com/modelcontextprotocol/ext-apps --skill convert-web-app-modelcontextprotocol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables you to transform an existing web application into an MCP App that can render inline in MCP hosts, while preserving standalone functionality.

Core Features & Use Cases

Hybrid initialization detects host context and routes data between web and MCP lifecycles.
Server-side tool & resource registration wraps the app as an MCP resource and exposes a tool for lifecycle communication.
Real-world use: convert an existing SPA into an MCP App with minimal code changes for hosting in Claude or similar clients.

Quick Start

Wrap your web app with a thin MCP initialization layer and register an MCP tool and resource so the app can render inline in MCP hosts.

Frequently Asked Questions about convert-web-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert an existing web app into an MCP App?▼

To convert a web app into an MCP App, add a thin MCP initialization layer for hybrid initialization and register server-side tools and resources so the app can render inline within MCP hosts.

What is hybrid initialization for an MCP App?▼

Hybrid initialization is a pattern that detects the host context and routes data between web and MCP lifecycles, allowing your application to preserve standalone functionality while enabling MCP mode.

Can I turn my SPA into an MCP App without breaking standalone functionality?▼

Yes, converting an SPA into an MCP App preserves standalone functionality by using hybrid initialization, server-side wrapping, and a two-phase build process to enable MCP mode.

How does CSP analysis work when preparing a web app for MCP hosts?▼

CSP analysis evaluates Content Security Policy requirements during the two-phase build process to ensure the wrapped web application can safely render inline within MCP host environments.

What is the best way to expose a web app as an MCP resource?▼

The best way to expose a web app as an MCP resource is through server-side tool and resource registration, which wraps the app and exposes a tool for lifecycle communication with the MCP host.

Do I need server-side wrapping to render a hybrid app inline in Claude?▼

Yes, server-side wrapping is required to register the MCP tool and resource needed for lifecycle communication, allowing your hybrid app to render inline in Claude or similar MCP clients.