skills.rest
AI-Riksarkivet
AI-RiksarkivetOFFICIAL
Explore all skills by this author →
WebsiteGitHub

convert-web-app

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

17|2|Updated Jun 5, 2025
Search Tags:#integration#sdk#web app#developer guide#mcp app#hybrid app
One-click install
npx skills add https://github.com/AI-Riksarkivet/ra-mcp --skill convert-web-app
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convert-web-app
Source: https://github.com/AI-Riksarkivet/ra-mcp/tree/main/packages/viewer-mcp/.claude/skills/convert-web-app
Command: npx skills add https://github.com/AI-Riksarkivet/ra-mcp --skill convert-web-app

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @modelcontextprotocol/ext-apps, @modelcontextprotocol/sdk, zod, tsx, vite, vite-plugin-singlefile, and includes references (resource) components.

What problem does it solve?

This Skill enables developers to integrate their existing web applications with the Model Context Protocol (MCP), allowing them to function as MCP Apps within MCP-enabled hosts like Claude Desktop, while retaining their standalone web functionality.

Core Features & Use Cases

  • Hybrid App Support: Adapt existing web applications to work both standalone and as an MCP App from a single codebase.
  • Server-Side Registration: Provides guidance on setting up an MCP server to wrap the web app as a resource and register tools for its display.
  • Use Case: You have a complex data visualization dashboard built as a React web app. You want to make it accessible within an AI assistant's interface. This Skill guides you through modifying your app to detect the MCP environment and register it as a tool.

Quick Start

Follow the steps in this guide to add MCP App support to your existing web application.

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 React web app into an MCP App?▼

To convert a web app into an MCP App, you set up an MCP server to wrap the UI as a resource and register tools for its display, adapting your build pipeline to support hybrid initialization patterns within a single codebase.

Can my web app still work standalone after adding MCP integration?▼

Yes, hybrid app support allows your application to function both standalone and within MCP hosts. You achieve this by detecting the MCP environment and registering the app UI as a server-side resource and tool.

How do I register web app UIs as MCP resources and tools?▼

You register web app UIs as MCP resources and tools by setting up an MCP server that wraps the application, enabling MCP-enabled hosts to detect the environment and display the registered UI components.

What build pipeline changes are needed for a hybrid MCP app?▼

Adapting the build pipeline for a hybrid MCP app involves using Vite and vite-plugin-singlefile to bundle the application, ensuring it meets CSP requirements and supports hybrid initialization patterns.

Does integrating an existing web app with MCP require changing its codebase?▼

Integrating an existing web app with MCP does not require a separate codebase; the Skill guides you in analyzing your app and modifying it to support hybrid initialization within a single codebase.

Related Skills

Explore More Software Engineering Skills→
s1366560s1366560
5

convert-web-app

Convert existing web apps into hybrid MCP Apps with Vite.

Community
Intermediate
modelcontextprotocolmodelcontextprotocol
2.7k

convert-web-app

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

Official
Intermediate
hollaugohollaugo

mcp-app-builder

Scaffold MCP Apps with React UIs and Vite bundling.

Community
Advanced
mrkhachaturovmrkhachaturov

convert-web-app

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

Community
Advanced