skills.rest
jbandi
jbandiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-mcp-app

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

Updated Mar 18, 2026
Search Tags:#ui#sdk#scaffold#framework#host-integration#mcp-app#tool-resource
One-click install
npx skills add https://github.com/jbandi/mcp-apps-demo --skill create-mcp-app-jbandi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-mcp-app
Source: https://github.com/jbandi/mcp-apps-demo/tree/main/.agents/skills/create-mcp-app
Command: npx skills add https://github.com/jbandi/mcp-apps-demo --skill create-mcp-app-jbandi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers scaffold and implement MCP Apps, including UI resources, tool lifecycles, host integration, and SDK patterns.

Core Features & Use Cases

  • Tool + Resource architecture: MCP Apps pair a Tool (data provider) with a Resource (HTML UI) to render results inside MCP hosts.
  • Framework templates and host integration: Guidance and templates for Vanilla JS, React, Vue, Svelte, and other frameworks to accelerate development.
  • Server/tool registration guidance: Instructions to register tools and resources on an MCP server, including _meta.ui.resourceUri linking rules and CSP considerations.

Quick Start

Scaffold an MCP App by pairing a tool with a UI resource and register them on your MCP server, then start the example template.

Frequently Asked Questions about create-mcp-app

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

FAQPage Schema
How do I create an MCP app with a custom UI resource?▼

To create an MCP app, you pair a tool acting as a data provider with an HTML UI resource, register them on your MCP server using _meta.ui.resourceUri linking rules, and render the results inside MCP hosts.

Can I scaffold MCP apps using React or Vue frameworks?▼

Yes, you can scaffold MCP apps using React, Vue, Svelte, or Vanilla JS. The skill provides framework templates and host integration guidance to accelerate UI development and server wiring.

What is the tool and resource architecture in MCP apps?▼

MCP app architecture pairs a Tool that supplies data with a Resource containing an HTML UI to render that data directly inside MCP hosts, enforcing specific API patterns for both tool and resource registration.

How do I register tools and resources on an MCP server?▼

You register tools and resources on an MCP server by following SDK guidance for API patterns, applying _meta.ui.resourceUri linking rules to connect the pair, and configuring basic lifecycle handlers.

What CSP considerations exist when adding UIs to existing MCP tools?▼

When adding UIs to existing tools, you must address Content Security Policy (CSP) considerations to ensure the HTML UI resource renders securely within the MCP host environment during the wiring process.

Does scaffolding an MCP app require specific lifecycle handlers?▼

Yes, scaffolding an MCP app requires implementing basic lifecycle handlers as described by the SDK guidance to properly manage the tool and resource integration within the host environment.

Related Skills

Explore More Software Engineering Skills→
ojrojasojrojas

mcp-csharp-create

Create MCP server projects with the .NET SDK and C# SDK.

Community
Advanced
mrkhachaturovmrkhachaturov

convert-web-app

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

Community
Advanced
GongXLiangGongXLiang

build-mcp-app

Register MCP server tools with UI resources and serve HTML widgets via resource URIs.

Community
Advanced
jscraikjscraik
8

chatgpt-apps

Scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications with MCP servers and widget UIs.

Community
Advanced