Convert Web App

What it does

This skill enables you to transform existing web application code into a format compatible with Model Context Protocol (MCP). It allows your web app to function both as a standalone webpage and as an MCP App that can be rendered inline within MCP-enabled hosts like Claude Desktop, all from a single codebase. The core of the functionality involves adding a thin initialization layer to detect the environment and fetch parameters accordingly, while preserving the original application's rendering logic.

When to use it

• You want to integrate an existing web application into an MCP ecosystem.
• You need your web app to be accessible both as a standalone webpage and within an AI agent workflow.
• You are using a framework like React, Vue, Svelte, Preact or SolidJS and want to leverage the benefits of MCP integration.
• You have an existing web application that relies on external data sources (URL parameters, APIs) and need to adapt it for use within an MCP environment.

Key capabilities

• Dual Functionality: Supports both standalone web app operation and MCP App rendering.
• Parameter Handling: Detects the execution environment and fetches parameters from appropriate sources.
• Resource Wrapping: Wraps the application's HTML as a resource for display within an MCP host.
• Framework Templates: Provides example code for common frameworks (VanillaJS, React, Vue, Svelte, Preact, Solid).
• API Documentation: Includes JSDoc documentation for key components and types.

Example prompts

While this skill doesn't directly respond to user prompts, it enables the AI agent to use your web application within an MCP environment. Examples of how a user might interact with an agent using your converted app include:

• "Can you show me my dashboard?" (The agent would launch the web app as an MCP App)
• "Display the results from [web app URL] in a new window." (Similar to above, but specifying a particular view within the application).

Tips & gotchas

• SDK Repository: You'll need to clone the SDK repository (git clone --branch "v $( npm view @modelcontextprotocol/ext-apps version ) " --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps) to access reference code and API documentation.
• Data Source Analysis: Carefully analyze your existing web app's data sources before implementing MCP support, as these will need adaptation.
• CSP Configuration: If your application uses external APIs or resources, you may need to configure Content Security Policy (CSP) settings.