skills.rest
Leap0920
Leap0920COMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-mcp-app

Build MCP apps by adding interactive widget UI resources to server tools.

1|Updated Mar 30, 2026
Search Tags:#mcp#widgets#ext-apps#iframe sandbox#ui resources#tool-to-ui binding#interactive pickers
One-click install
npx skills add https://github.com/Leap0920/Clean-Portfolio --skill build-mcp-app-leap0920
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/Leap0920/Clean-Portfolio/tree/main/%25USERPROFILE%25/.openclaude/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/Leap0920/Clean-Portfolio --skill build-mcp-app-leap0920

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you turn a plain MCP server into an MCP app that can render interactive UI widgets (forms, pickers, dialogs, dashboards) inline during a chat, so users can complete complex actions without relying on fragile free-text input.

Core Features & Use Cases

  • Interactive widget UI on top of existing MCP tools: Attach a _meta.ui.resourceUri to a tool and serve the corresponding HTML resource so the host renders an iframe widget.
  • Use the right widget when it matters: Prefer forms for structured inputs, pickers/tables for selecting from lists, confirm dialogs for destructive actions, and display widgets for spatial/visual outputs.
  • Two deployment shapes supported: Remote MCP app (widgets served as resources) and MCPB-packaged local MCP app (for local-disk or desktop-app driving widgets).
  • Widget runtime guidance for reliable rendering: Use the App class from @modelcontextprotocol/ext-apps, set handlers before connect(), and keep widgets self-contained for CSP/sandbox constraints.

Quick Start

Use the build-mcp-app skill to add an interactive picker UI to a tool by defining the tool’s _meta.ui.resourceUri, registering the matching app resource HTML, and making the widget render the tool’s returned JSON via app.ontoolresult.

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 for inline chat rendering?▼

To add interactive MCP widgets, you attach a _meta.ui.resourceUri to a tool, register the matching HTML resource with the correct MIME type, and use the App class from @modelcontextprotocol/ext-apps for host messaging. This renders an iframe widget inline during a chat.

Can I use forms and pickers instead of plain text output in MCP tools?▼

Yes, you can use interactive widget UI resources like forms for structured inputs, pickers for selecting from lists, and confirm dialogs for destructive actions. These widgets replace plain text output by rendering visual interfaces inside compatible MCP hosts.

What is the best way to bind an MCP tool to a UI resource?▼

The best way to bind an MCP tool to a UI resource is by defining the tool's _meta.ui.resourceUri and registering the corresponding ui:// resource HTML on the server side. The widget then renders the tool's returned JSON via the app.ontoolresult handler.

Does the MCP widget runtime require any specific setup for iframe sandbox security?▼

Yes, MCP widget runtime requires keeping widgets self-contained for CSP and sandbox constraints. You must use the App class from @modelcontextprotocol/ext-apps with the ext-apps bundle inlined, and set all handlers before calling connect() to ensure safe sandboxed behavior.

How do MCP apps support remote versus local widget deployment?▼

MCP apps support two deployment shapes: remote MCP apps where widgets are served as resources, and MCPB-packaged local MCP apps for driving widgets from local-disk or desktop applications. Both require server-side registration of ui:// resources with the correct MIME type.

When should I use interactive MCP widgets instead of standard text responses?▼

You should use interactive MCP widgets when users need structured input, selection from lists, confirmation dialogs, or visual/spatial displays instead of plain text output. They prevent fragile free-text input by providing forms, pickers, and dashboards for complex actions.

Related Skills

Explore More Software Engineering Skills→
fazxesfazxes
231

build-mcp-app

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

Community
Advanced
SOLEROMSOLEROM

build-mcp-app

Define MCP tools with inline UI widgets and register UI resources.

Community
Advanced
hasanraiyanhasanraiyan
12

build-mcp-app

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

Community
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced