skills.rest
mrkhachaturov
mrkhachaturovCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-mcp-app

Guide development of interactive MCP Apps linking tool execution to host-rendered HTML resources.

Updated Apr 6, 2026
Search Tags:#interactive ui#html resource#sdk integration#mcp apps#tool-resource wiring#csp configuration#react useApp
One-click install
npx skills add https://github.com/mrkhachaturov/jira-mcp-plugin --skill create-mcp-app-mrkhachaturov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-mcp-app
Source: https://github.com/mrkhachaturov/jira-mcp-plugin/tree/main/.agents/skills/create-mcp-app
Command: npx skills add https://github.com/mrkhachaturov/jira-mcp-plugin --skill create-mcp-app-mrkhachaturov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of turning MCP tools into rich, interactive user experiences that hosts like Claude Desktop can render inside the client UI, while ensuring the tool and UI resource are correctly wired together.

Core Features & Use Cases

  • Tool + Resource wiring: Links an MCP tool to an HTML resource via _meta.ui.resourceUri so the host can display interactive UI for tool results.
  • Framework-flexible scaffolding guidance: Covers React (with useApp), Vanilla JS, and multiple framework options using a consistent SDK-driven lifecycle model.
  • Production-minded UI integration: Provides guidance on CSP/domain handling, host context-driven theming, safe handler registration order, streaming input patterns, and view-state strategies.

Quick Start

Ask your AI to create an MCP App that renders an interactive issue view by registering an app tool with _meta.ui.resourceUri and serving a bundled HTML resource from your MCP server.

Frequently Asked Questions about create-mcp-app

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

FAQPage Schema
How do I build interactive MCP Apps with UIs rendered inside the host client?▼

To build interactive MCP Apps, you connect MCP tool execution with a host-rendered HTML resource by registering app tools and setting `_meta.ui.resourceUri` so the host can display the interactive UI for tool results.

What's the best way to wire an MCP tool to an HTML resource for dashboard rendering?▼

The best way to wire an MCP tool to an HTML resource is by setting `_meta.ui.resourceUri` in the tool's metadata, which links the tool execution to the bundled HTML resource served from your MCP server for host rendering.

Does the MCP Apps SDK work with React and vanilla JavaScript for UI integration?▼

Yes, the MCP Apps SDK works with both React and vanilla JavaScript. It provides framework-flexible scaffolding guidance, including React with `useApp` and vanilla JS patterns, using a consistent SDK-driven lifecycle model.

Why do I need to configure CSP and host context when developing MCP Apps?▼

You need to configure CSP and host context when developing MCP Apps to ensure production-minded UI integration, enabling safe handler registration order, domain handling, context-driven theming, and secure resource rendering inside the host client.

Can I create app-only views and interactive issue cards using the MCP Apps SDK?▼

Yes, you can create app-only views, interactive issue cards, and UI-driven dashboards using the MCP Apps SDK by registering app tools with the correct lifecycle handler ordering and serving bundled HTML resources from your MCP server.

What are the limitations when streaming input patterns to MCP-enabled hosts?▼

Limitations when streaming input patterns to MCP-enabled hosts involve maintaining safe handler registration order and proper view-state strategies, as incorrect lifecycle handler ordering or host context misconfiguration can disrupt the interactive UI resource rendering.

Related Skills

Explore More Software Engineering Skills→
theswerdtheswerd

create-mcp-app

Guide developers in creating interactive MCP Apps with the MCP App SDK.

Community
Intermediate
OptimusPiOptimusPi

create-mcp-app

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

Community
Advanced
LinkedInLearningLinkedInLearning
2

create-mcp-app

Scaffold MCP applications integrating tools with HTML resources for interactive UIs.

Official
Advanced
awslabsawslabs
1.0k

create-mcp-app

Create interactive MCP Apps by linking MCP tools with HTML UI resources.

Official
Intermediate