build-mcp-app

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

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/SOLEROM/cldlab --skill build-mcp-app-solerom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/SOLEROM/cldlab/tree/main/login/tildaClaude_cleanAfterAcceptKey/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/SOLEROM/cldlab --skill build-mcp-app-solerom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables building MCP apps that render interactive UI widgets inside chat surfaces, allowing forms, pickers, dialogs, dashboards, and other inline UI alongside standard tool results.

Core Features & Use Cases

  • Integrates UI widgets with MCP tools by pairing tool registrations with a UI resource, enabling a two-part deployment: remote MCP server and MCPB-packaged local UI.
  • Supports interactive elements such as forms, pickers, and confirm dialogs to collect input or present decisions within conversations, including display widgets and progress indicators.
  • Typical use case: create a contact picker widget that renders from an _meta.ui.resourceUri and returns results via the conversation.

Quick Start

Create a new MCP app by registering a tool with a UI resource and embedding the Ext Apps bundle in the widget HTML.

Frequently Asked Questions about build-mcp-app

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

FAQPage Schema
How do I render interactive UI widgets inside MCP tool results?

To render interactive UI widgets inside MCP tool results, you pair a tool registration with a UI resource and embed the Ext Apps bundle directly in the widget HTML. This allows hosts to fetch and display inline forms or pickers within chat surfaces.

What is the difference between a remote MCP server and an MCPB-packaged UI for widget deployment?

A remote MCP server handles tool registration and logic, while an MCPB-packaged UI provides the local interface assets. Applying both deployment shapes together attaches widgets to tools and renders UI resources efficiently within Claude conversations.

How do I register an MCP tool that returns a contact picker widget in a conversation?

You register an MCP tool that exposes a UI resource using the _meta.ui.resourceUri property. Embed the Ext Apps bundle in the HTML to render the contact picker widget and return collected input results via the conversation.

Can I use interactive forms and confirm dialogs within MCP apps?

Yes, you can use interactive forms, pickers, and confirm dialogs within MCP apps. These elements collect input or present decisions directly inside chat surfaces, alongside standard tool results, by leveraging UI resource registration.

How does a host fetch and display an inline widget from an MCP app?

A host fetches and displays an inline widget by reading the _meta.ui.resourceUri specified during tool registration. The host then renders the associated UI resource, which contains the Ext Apps bundle, directly within the conversation interface.

Do I need the Ext Apps bundle to build MCP apps with inline UI?

Yes, implementing the Ext Apps bundle inline in the widget HTML is required. This bundle allows the host to efficiently render the UI resources and display interactive elements like dashboards and progress indicators within conversations.