skills.rest
dobrinz123
dobrinz123COMMUNITY
Explore all skills by this author →
GitHub

build-mcp-app

Register MCP UI resources and tools for inline widget rendering.

Updated Apr 9, 2026
Search Tags:#mcp#widgets#iframe#interactive-ui#apps-sdk#picker
One-click install
npx skills add https://github.com/dobrinz123/claude-skills-share --skill build-mcp-app-dobrinz123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/dobrinz123/claude-skills-share/tree/main/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/dobrinz123/claude-skills-share --skill build-mcp-app-dobrinz123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables MCP servers to provide interactive, inline UI widgets in conversation hosts so users can fill structured forms, pick items, confirm destructive actions, view visual previews, and monitor long-running jobs without leaving the chat. It bridges server-side tools and client-side UI resources while ensuring graceful degradation when hosts lack an apps surface.

Core Features & Use Cases

  • Widget-enabled tools: Register tools that return plain JSON/text and declare a UI resource URI so hosts can render a focused widget (picker, confirm dialog, chart) alongside the tool result.
  • Resource registration & delivery: Serve HTML widget templates as registered resources with the required RESOURCE_MIME_TYPE so hosts render them in a sandboxed iframe.
  • App messaging & lifecycle: Use the App class API for ontoolresult, ontoolinput, sendMessage, updateModelContext, callServerTool, and openLink to handle bidirectional widget ↔ host ↔ server communication.
  • CSP and bundling guidance: Inline the ext-apps/app-with-deps bundle into widget HTML and inline images as data: URLs to avoid sandbox/CSP failures and ensure reliable rendering.
  • Deployment shapes & testing: Support remote HTTP servers or MCPB-packaged local servers; include testing patterns for headless JSON-RPC and Desktop hosts, and guidance for caching and dev iteration.

Quick Start

Create an MCP app that registers a pick_contact tool with _meta.ui.resourceUri pointing to ui://widgets/picker.html and serve a picker HTML resource that inlines the ext-apps bundle so the host can render an interactive contact picker.

Frequently Asked Questions about build-mcp-app

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

FAQPage Schema
How do I add interactive UI widgets to an MCP server?▼

MCP servers provide interactive UI widgets by registering tools alongside HTML resources served with RESOURCE_MIME_TYPE, enabling hosts to render inline widgets like pickers, confirmation dialogs, and charts directly within the conversation.

How do I render an MCP widget inside a CSP-constrained iframe?▼

To render MCP widgets inside CSP-constrained iframes, inline the ext-apps/app-with-deps bundle directly into the widget HTML and inline images as data: URLs to prevent sandbox and Content Security Policy failures.

What is the App class used for in MCP apps?▼

The App class in MCP apps manages bidirectional widget, host, and server communication using APIs like ontoolresult, ontoolinput, sendMessage, updateModelContext, callServerTool, and openLink to handle widget lifecycle and messaging.

Can I use MCP apps to confirm destructive actions in a chat interface?▼

Yes, MCP apps support confirming destructive actions by registering widget-enabled tools that render confirmation dialogs inline, allowing users to approve or cancel actions directly within the conversation host without leaving the chat.

Do MCP widgets degrade gracefully when the host lacks an apps surface?▼

MCP widgets degrade gracefully when a host lacks an apps surface by returning standard plain JSON or text tool results, ensuring baseline functionality remains intact even without interactive UI rendering capabilities.

What deployment shapes are supported for MCP widget apps?▼

MCP widget apps support remote HTTP servers or MCPB-packaged local servers, with testing patterns covering headless JSON-RPC and Desktop hosts, plus guidance for caching and development iteration.

Related Skills

Explore More Software Engineering Skills→
GongXLiangGongXLiang

build-mcp-app

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

Community
Advanced
hasanraiyanhasanraiyan
12

build-mcp-app

Build MCP apps serving interactive UI widget resources alongside tool results.

Community
Advanced
onelee85onelee85

build-mcp-app

Automate MCP app creation with interactive UI widgets for remote servers and local MCPB bundles.

Community
Advanced
Kingdaddy007Kingdaddy007
1

build-mcp-app

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

Community
Intermediate