skills.rest
GongXLiang
GongXLiangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-mcp-app

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

Updated Apr 26, 2026
Search Tags:#ui#mcp#widgets#picker#server-tools#inline-widget
One-click install
npx skills add https://github.com/GongXLiang/plot-study --skill build-mcp-app-gongxliang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/GongXLiang/plot-study/tree/main/.claude/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/GongXLiang/plot-study --skill build-mcp-app-gongxliang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables building MCP UI widgets and resources for an MCP server, allowing inline forms, pickers, dashboards, and confirmation dialogs to render directly within the chat surface while managing UI resources and deployment flow.

Core Features & Use Cases

  • UI widget scaffolding: register tools with UI resources and host inline widgets for MCP UI surfaces.
  • Widget types: provide forms, pickers, dashboards, and confirmation dialogs embedded in chat.
  • Resource hosting & bundling: inline ext-apps bundle and serve UI HTML resources via resource URIs to satisfy CSP constraints.

Quick Start

Register a tool with a UI resource URI and provide a picker widget by inlining the ext-apps bundle and registering the HTML resource.

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 MCP UI widgets that render directly in the chat surface?▼

MCP inline widgets operate by inlining an ext-apps bundle and serving the UI HTML through a resource URI. This mechanism satisfies CSP constraints while executing in-iframe widgets directly within the chat surface.

Can I embed forms and dashboards within an MCP server chat interface?▼

Yes, you can embed forms, dashboards, and confirmation dialogs within chat. This requires registering the UI resources as server-tools and inlining the ext-apps bundle to serve the HTML content.

What is the best way to serve UI HTML resources for MCP server tools without violating CSP constraints?▼

Serving UI HTML resources while satisfying CSP constraints requires inlining the ext-apps bundle and hosting the HTML via a resource URI. This allows the widget to execute safely in-iframe within the chat surface.

When should I use inline MCP widgets for my application deployment?▼

Use inline MCP widgets after your deployment model is established and you need interactive forms, pickers, dashboards, or confirmation dialogs embedded directly within chat surfaces during user conversations.

Why does my MCP UI widget resource not render inside the chat surface?▼

An MCP UI widget fails to render if the ext-apps bundle is not properly inlined or the HTML resource is not correctly served via a resource URI. Ensure proper server-tool registration and resource hosting to fix rendering.

Related Skills

Explore More Software Engineering Skills→
AeyeOpsAeyeOps
3

mcp-architect-designer

Design and deploy MCP servers with OAuth 2.1 and Docker.

Official
Advanced
xlelibertyxleliberty

build-mcp-app

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

Community
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced
Kingdaddy007Kingdaddy007
1

build-mcp-app

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

Community
Intermediate