skills.rest
MinhThang1009
MinhThang1009COMMUNITY
Explore all skills by this author →
GitHub

build-mcp-app

Create and deploy interactive MCP UI widgets for Claude chat surfaces.

15|6|Updated May 7, 2026
Search Tags:#ui#integration#claude#mcp#widgets#apps#ext-apps
One-click install
npx skills add https://github.com/MinhThang1009/dotclaude --skill build-mcp-app-minhthang1009
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/MinhThang1009/dotclaude/tree/main/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/MinhThang1009/dotclaude --skill build-mcp-app-minhthang1009

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables developers to create and deploy interactive UI widgets for MCP servers, allowing inline components such as forms, pickers, and dashboards to render inside chat surfaces.

Core Features & Use Cases

  • Declarative tool UI: tools declare a UI resource via _meta.ui.resourceUri and return data that the host renders in an embedded iframe.
  • Deployment flexibility: supports remote MCP apps and locally packaged MCPB widgets, with inline bundling of ext-apps to satisfy CSP.
  • End-to-end guidance: covers widget lifecycles, theming, host context integration, and testing workflows to deliver production-ready UI components.

Quick Start

Create a basic MCP widget by defining a tool with _meta.ui.resourceUri and serving a bundled widget HTML via the inline ext-apps runtime.

Frequently Asked Questions about build-mcp-app

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

FAQPage Schema
How do I build interactive UI widgets for an MCP server?▼

You build MCP UI widgets by defining a tool with _meta.ui.resourceUri and serving bundled widget HTML via the inline ext-apps runtime, enabling interactive components like forms to render directly inside Claude chat surfaces.

How does an MCP UI widget render inline in Claude chat surfaces?▼

An MCP UI widget renders inline when a tool declares a UI resource via _meta.ui.resourceUri and returns data that the host renders inside an embedded iframe within the Claude chat surface.

Can I deploy MCP apps as locally packaged widgets?▼

Yes, you can deploy MCP apps as locally packaged MCPB widgets or as remote MCP apps, with both deployment paths supporting inline bundling of the ext-apps runtime to satisfy Content Security Policy requirements.

Do I need to bundle the ext-apps runtime to satisfy CSP for MCP widgets?▼

Yes, you need to inline bundle the ext-apps runtime to satisfy Content Security Policy restrictions when deploying both remote MCP apps and locally packaged MCPB widgets within chat surfaces.

What is the standard skill structure required for building MCP apps?▼

Building MCP apps enforces a standard skill structure with a SKILL.md file at the root directory, alongside utilizing provided server and widget templates plus testing guidance to deliver production-ready UI components.

What are the limitations when integrating MCP widgets with host context?▼

Limitations when integrating MCP widgets include navigating widget lifecycles, managing host context integration, and ensuring the ext-apps runtime is properly inline bundled to meet strict Content Security Policy compliance.

Related Skills

Explore More Software Engineering Skills→
idontcarlidontcarl

chatgpt-apps

Scaffold ChatGPT Apps SDK projects for MCP server and widget integration.

Community
Intermediate
fazxesfazxes
231

build-mcp-app

Build and deploy MCP apps with inline UI widgets for chat surfaces.

Community
Advanced
goodnessibehgoodnessibeh
1

build-mcp-app

Construct interactive UI components for Model Context Protocol servers using the @modelcontextprotocol/ext-apps SDK.

Community
Advanced
Kingdaddy007Kingdaddy007
1

build-mcp-app

Build MCP apps that render interactive UI widgets in chat surfaces.

Community
Intermediate