skills.rest
OptimusPi
OptimusPiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

convert-web-app

Convert existing web applications into hybrid MCP Apps with iframe embedding.

Updated May 13, 2026
Search Tags:#web app#csp#iframe#mcp app#resource registration#three.js preview#hybrid initialization
One-click install
npx skills add https://github.com/OptimusPi/OpenSCAD-MCP-App-Extension --skill convert-web-app-optimuspi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convert-web-app
Source: https://github.com/OptimusPi/OpenSCAD-MCP-App-Extension/tree/main/.agents/skills/convert-web-app
Command: npx skills add https://github.com/OptimusPi/OpenSCAD-MCP-App-Extension --skill convert-web-app-optimuspi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of making an existing web application usable inside MCP-enabled hosts (so it can render inline with tool-driven context) without breaking its current standalone web behavior.

Core Features & Use Cases

  • Hybrid web + MCP App initialization: Detect whether the app is running inside an MCP iframe host versus a normal browser load, then route inputs and lifecycle events appropriately.
  • Server-side MCP App wrapping: Register the web UI as an MCP App resource and expose a tool that passes parameters to the UI via structured content.
  • Host styling & CSP-safe rendering: Integrate host theming (CSS variables, fonts, safe-area insets) while enumerating CSP domains so all external origins load reliably in the sandboxed iframe.

Quick Start

Ask the AI to “Convert my existing web app into a hybrid MCP App by keeping it working standalone while adding an MCP server that registers the UI as a resource and a tool that provides the parameters the UI needs.”

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 my web app into an MCP App that renders inside an iframe host?▼

To convert a web app into an MCP App, you build a single-file HTML bundle that detects whether it is in an MCP iframe host versus a normal browser, then routes inputs and lifecycle events appropriately.

Can my web application still work standalone after adding MCP server resource registration?▼

Yes, your web application retains its standalone web behavior by using hybrid initialization to detect the environment and route lifecycle events appropriately whether running in a browser or an MCP host.

How do I configure CSP domains for a web app embedded in a sandboxed iframe?▼

You configure CSP domains for a sandboxed iframe by enumerating all external origins so they load reliably, while integrating host styling like CSS variables, fonts, and safe-area insets.

What's the best way to pass parameters to a web UI wrapped as an MCP resource?▼

The best way to pass parameters to a web UI wrapped as an MCP resource is by registering an MCP tool that passes the necessary parameters to the UI via structured content.

Does wrapping my SPA as an MCP App require building a separate bundle?▼

Yes, wrapping an SPA as an MCP App requires building a dedicated single-file MCP App HTML bundle that handles iframe-based embedding and MCP lifecycle routing.

Why does my web app fail to load external assets when running inside an MCP host?▼

A web app fails to load external assets inside an MCP host if CSP domains are not properly enumerated, preventing external origins from loading reliably within the sandboxed iframe.

Related Skills

Explore More Software Engineering Skills→
mrkhachaturovmrkhachaturov

convert-web-app

Convert standalone web apps into sandboxed-iframe MCP App resources.

Community
Advanced
mindmorassmindmorass
2

mcp-server-builder

Scaffold MCP servers with environment-based configuration and tool registration.

Community
Intermediate
Kirankumar2604Kirankumar2604

repl_setup

Configure web development servers for the Replit cloud proxy environment.

Community
Intermediate
soham2008xyzsoham2008xyz

Expo UI SwiftUI

Build SwiftUI-like React Native interfaces with Expo SDK 55.

Community
Basic