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

create-mcp-app

Scaffold MCP apps with tool-to-HTML resource wiring and lifecycle handlers.

Updated May 13, 2026
Search Tags:#three.js#interactive ui#mcp apps#sdk scaffolding#tool-resource wiring#csp configuration#host integration
One-click install
npx skills add https://github.com/OptimusPi/OpenSCAD-MCP-App-Extension --skill create-mcp-app-optimuspi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-mcp-app
Source: https://github.com/OptimusPi/OpenSCAD-MCP-App-Extension/tree/main/.agents/skills/create-mcp-app
Command: npx skills add https://github.com/OptimusPi/OpenSCAD-MCP-App-Extension --skill create-mcp-app-optimuspi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building an MCP App (a tool plus an interactive UI resource) is hard to get right because you must correctly wire tool output to a bundled, host-renderable HTML resource and follow the SDK’s lifecycle and security constraints.

Core Features & Use Cases

  • Tool + Resource pairing: Guides you to link a tool’s _meta.ui.resourceUri to a registered UI resource so hosts can render rich interactive content.
  • Framework-aware scaffolding: Shows how to structure implementations for React (via useApp) and common vanilla or framework-based alternatives.
  • Correct lifecycle and host integration: Explains handler registration order, app lifecycle events, host context/style handling, and UI behavior patterns for robust, host-compatible apps.
  • Practical patterns and testing: Covers advanced App patterns (visibility, streaming input, view state, fullscreen mode, error handling) and how to test locally using a basic MCP Apps host.

Quick Start

Ask the AI to create an MCP App for my existing MCP tool, using the MCP Apps SDK, register the UI resource, and provide a React or vanilla template with the required lifecycle handlers and CSP configuration.

Frequently Asked Questions about create-mcp-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I link an MCP tool to an interactive HTML resource?▼

You link an MCP tool to an interactive UI by wiring the tool's `_meta.ui.resourceUri` to a registered UI resource, allowing MCP-enabled hosts to render rich interactive content.

How do I scaffold an MCP App using React?▼

You can scaffold an MCP App using React by utilizing framework-aware templates that implement the `useApp` hook, ensuring proper structure for interactive UIs within MCP-enabled hosts.

Why does my MCP App UI fail to load in the host environment?▼

An MCP App UI may fail to load if handler registration order is incorrect before connection, or if the Content Security Policy (CSP) and resource metadata are not properly configured for secure UI serving.

What lifecycle events do I need to handle when building MCP Apps?▼

When building MCP Apps, you must handle app lifecycle events, host context and style handling, and correct handler registration order before connection to ensure robust and host-compatible behavior.

Can I test MCP Apps locally before host integration?▼

Yes, you can test MCP Apps locally by using a basic MCP Apps host to validate advanced patterns like visibility, streaming input, view state, fullscreen mode, and error handling.

Do I need specific Content Security Policy configuration for MCP Apps?▼

Yes, secure UI serving in MCP Apps requires correct Content Security Policy (CSP) configuration alongside proper resource metadata to ensure the interactive HTML renders safely within host environments.

Related Skills

Explore More Software Engineering Skills→
jbandijbandi

create-mcp-app

Scaffold MCP Apps by pairing tools with UI resources and registering them on servers.

Community
Intermediate
mrkhachaturovmrkhachaturov

convert-web-app

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

Community
Advanced
inpinitiinpiniti

mcp

Render json-render UIs inside MCP-enabled clients via Node.js server.

Community
Advanced
OptimusPiOptimusPi

migrate-oai-app

Migrate OpenAI Apps SDK applications to MCP Apps SDK with API mapping.

Community
Advanced