skills.rest
julianobarbosa
julianobarbosaCOMMUNITY
Explore all skills by this author →
Website𝕏@julianobarbosaGitHub

build-mcp-app

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

Updated Aug 23, 2026
Search Tags:#resources#mcp#widgets#interactive ui#apps-surface#iframe csp#claude connectors
One-click install
npx skills add https://github.com/julianobarbosa/.claude --skill build-mcp-app-julianobarbosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/julianobarbosa/.claude/tree/main/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/julianobarbosa/.claude --skill build-mcp-app-julianobarbosa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you turn a plain MCP server into an MCP app that can render interactive UI widgets (forms, pickers, dashboards, confirmation dialogs) inline during chat.

Core Features & Use Cases

  • Interactive UI widgets for MCP tools: Adds a UI resource layer so tool results can be rendered as embedded interactive components.
  • Correct widget routing and lifecycle: Ensures _meta.ui.resourceUri wiring, iframe sandbox behavior, and host-specific theming are handled properly.
  • Widget vs. elicitation guidance: Chooses the right approach depending on whether the host can support structured elicitation without custom UI.

Quick Start

Tell your AI to build an interactive MCP app that includes a picker widget for selecting items and show it inline after the related MCP server tool is selected.

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?▼

To add interactive UI widgets to an MCP server, you register UI tools with `_meta.ui.resourceUri` and serve HTML resources using the `text/html;profile=mcp-app` mime type to render forms and dashboards inline.

What are MCP apps and how do they differ from plain MCP servers?▼

MCP apps are MCP servers enhanced with a UI resource layer, enabling them to render interactive components like pickers and confirmation dialogs inline during chat, going beyond plain text and JSON outputs.

How do I handle iframe CSP and sandbox constraints when building MCP apps?▼

To handle iframe CSP and sandbox constraints when building MCP apps, you must inline the ext-apps bundle directly and utilize host-mediated APIs for secure communication and rendering.

When should I use MCP UI widgets instead of structured elicitation?▼

You should use MCP UI widgets instead of structured elicitation when the host environment cannot support structured elicitation without custom UI, requiring interactive forms or dashboards for user input.

Can I render dashboards and confirmation dialogs inline during a Claude chat?▼

Yes, you can render dashboards and confirmation dialogs inline during chat by turning a plain MCP server into an MCP app that serves interactive UI widget resources via the correct apps-surface profile.

Related Skills

Explore More Software Engineering Skills→
mrkhachaturovmrkhachaturov

convert-web-app

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

Community
Advanced
mrkhachaturovmrkhachaturov

add-app-to-server

Add interactive MCP Apps UI to existing MCP server tools with text fallback.

Community
Advanced
SOLEROMSOLEROM

build-mcp-app

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

Community
Advanced
xlelibertyxleliberty

build-mcp-app

Build interactive UI widgets for MCP servers using the ext-apps SDK.

Community
Advanced