skills.rest
modelcontextprotocol
modelcontextprotocolOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/modelcontextprotocol/ext-apps --skill convert-web-app-modelcontextprotocol
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
AI-RiksarkivetAI-Riksarkivet
17

convert-web-app

Convert existing web applications into hybrid MCP Apps with server-side registration.

Official
Advanced
SOLEROMSOLEROM

build-mcp-app

Define MCP tools with inline UI widgets and register UI resources.

Community
Advanced
theswerdtheswerd

create-mcp-app

Guide developers in creating interactive MCP Apps with the MCP App SDK.

Community
Intermediate
theswerdtheswerd

convert-web-app

Add MCP App support to existing web applications with runtime detection.

Community
Advanced