How does the app receive data from Claude?

The skill implements handlers for 'ontoolinput' and 'ontoolresult', mapping AI-generated arguments or structured content directly into your application's state logic.

Can I still use my app as a regular website?

Yes, this skill uses a hybrid pattern that detects the environment at runtime, allowing your app to function as a standard web page and an MCP tool simultaneously from one codebase.

Which frontend frameworks are supported?

The conversion process is framework-agnostic and supports any modern stack including React, Vue, Svelte, Solid, Preact, and Vanilla JavaScript using Vite.

An MCP App is a web application that utilizes the Model Context Protocol to render interactively inside AI host environments like Claude Desktop, providing a rich UI for tool outputs.

How is security handled in the sandboxed iframe?

The skill provides a structured process for identifying and declaring all external origins (APIs, CDNs, fonts) in a Content Security Policy (CSP) to ensure secure network access.

Web App to MCP Converter

Name: Web App to MCP Converter
Author: AI-Riksarkivet

byAI-Riksarkivet

•

API開発

Transforms existing web applications into hybrid MCP Apps that render natively within Claude Desktop while maintaining standalone functionality.

This skill provides a comprehensive framework for converting standard single-page applications (SPAs) into Model Context Protocol (MCP) Apps. By implementing a thin initialization layer and a specialized build pipeline, it allows developers to reuse their existing UI codebases to create interactive, inline tools for Claude. The skill guides users through environment detection, data source mapping, and secure Content Security Policy (CSP) configuration, ensuring that the resulting application works seamlessly both in a browser and as a sandboxed iframe within an AI host.

主な機能

01Bidirectional data mapping between tool inputs and application state

028 GitHub stars

03Hybrid runtime detection for standalone and MCP-host environments

04Comprehensive CSP management for secure external API and asset access

05Automated Vite configuration for single-file HTML bundling

06Framework-specific guidance for React, Vue, Svelte, Solid, and Vanilla JS

ユースケース

01Converting legacy web utilities into portable AI-ready tools without code duplication

02Integrating existing internal dashboards directly into the Claude Desktop interface

03Wrapping data visualization tools to provide interactive charts within AI conversations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ai-riksarkivet/ra-mcp convert-web-app

For use in Claude.ai and ChatGPT

Download Skill