skills.rest
LAF-US
LAF-USOFFICIAL
Explore all skills by this author →
GitHub

build-mcp-app

Build MCP apps with inline UI widgets using the ext-apps SDK.

Updated Dec 17, 2024
Search Tags:#mcp#server#widgets#interactive-ui#ext-apps#widget-architecture
One-click install
npx skills add https://github.com/LAF-US/IDAHO-VAULT --skill build-mcp-app-laf-us
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/LAF-US/IDAHO-VAULT/tree/main/.claude/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/LAF-US/IDAHO-VAULT --skill build-mcp-app-laf-us

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MCP apps often need to extend a standard server with interactive UI widgets (forms, pickers, dashboards, dialogs) that render inline in the chat surface. This skill provides a principled way to build and host those widgets alongside your MCP server.

Core Features & Use Cases

  • Two deployment shapes: remote MCP apps and MCPB-packaged local apps, both supporting widget-enabled tools and hosted UI resources.
  • Widget lifecycle and messaging: register tools with _meta.ui.resourceUri and serve HTML widgets via registered resources; hosts render the interactive iframe and pass tool results back into the conversation.
  • Guided best practices: one widget per tool, inline ext-apps bundle, and CSP-safe iframe usage to enable interactive components.

Quick Start

Install the sample MCP app scaffold, register a tool with a UI resource, and run the server to see an inline widget appear in the chat.

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 an MCP app with interactive UI widgets inline in chat?▼

Remote MCP apps and MCPB-packaged local apps are two deployment shapes supporting widget-enabled tools. Remote apps host tools and UI resources on a server, while MCPB-packaged apps bundle locally, both serving interactive UI widgets inline in chat surfaces.

How do I register a UI resource URI for an MCP server tool?▼

You register a UI resource URI by assigning `_meta.ui.resourceUri` to your tool within the ext-apps SDK. The server then serves the corresponding HTML widget through this registered resource, allowing the chat host to render the interactive iframe.

Does the ext-apps SDK support serving widgets via StreamableHTTPServerTransport?▼

Yes, the ext-apps SDK supports CSP-safe iframe usage to enable interactive components. You must bundle the ext-apps client inline and follow best practices like one widget per tool to ensure interactive UI widgets render securely in the chat surface.

What are the best practices for MCP widget lifecycle and messaging?▼

Best practices for MCP widget lifecycle include maintaining one widget per tool, bundling the ext-apps client inline, and using CSP-safe iframe usage. This ensures interactive components render correctly and pass tool results back into the conversation securely.

Related Skills

Explore More Software Engineering Skills→
Haohao-endHaohao-end
779

chatgpt-apps

Scaffold ChatGPT Apps SDK projects with MCP server and widget UI.

Community
Advanced
fazxesfazxes
231

build-mcp-app

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

Community
Advanced
Kingdaddy007Kingdaddy007
1

build-mcp-app

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

Community
Intermediate
thevibeworksthevibeworks
28

build-mcp-app

Build widget-enabled MCP apps that render interactive UI components inline with tool results.

Official
Advanced