skills.rest
xleliberty
xlelibertyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-mcp-app

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

Updated Nov 3, 2016
Search Tags:#ui#sdk#mcp#interactive#widgets#iframe
One-click install
npx skills add https://github.com/xleliberty/mydotfiles --skill build-mcp-app-xleliberty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/xleliberty/mydotfiles/tree/main/.config/.claude/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/xleliberty/mydotfiles --skill build-mcp-app-xleliberty

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @modelcontextprotocol/sdk, @modelcontextprotocol/ext-apps, zod, express, and includes references (resource) components.

What problem does it solve?

This skill solves the limitation of plain-text MCP responses by enabling the creation of interactive, rich-UI components like forms, pickers, and dashboards that render directly within the chat interface.

Core Features & Use Cases

  • Interactive UI Widgets: Build and serve HTML/JS components that function as native chat elements.
  • Bidirectional Communication: Use the App class to send user actions back to the server and update conversation context silently.
  • Use Case: Create a custom contact picker widget that allows users to search and select records from a database visually, rather than typing IDs or parsing long text lists.

Quick Start

Use the build-mcp-app skill to generate a new interactive picker widget for my existing contact management tool.

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 serve HTML resources and manage bidirectional communication using the ext-apps SDK, enabling components like forms and pickers to render inline within chat surfaces.

How does bidirectional communication work for MCP interactive widgets?▼

Bidirectional communication for MCP interactive widgets works through the App class in the ext-apps SDK, which sends user actions back to the server and silently updates the conversation context within the chat interface.

How to build a custom picker widget that renders inside a chat interface?▼

Build a custom picker widget by implementing tool-resource pairs and bundling the ext-apps browser library. This serves HTML components that function as native chat elements for visual data selection.

Do I need Express and Zod to build interactive MCP server components?▼

You need Express and Zod as dependencies alongside the Model Context Protocol SDK and ext-apps package to build interactive MCP server components. These provide server routing and schema validation for the tool-resource pairs.

Why do MCP interactive widgets require bundling the ext-apps browser library?▼

MCP interactive widgets require bundling the ext-apps browser library to ensure compatibility with iframe sandbox constraints. This allows the HTML resources to function securely within the chat surface.

What are the limitations of using iframe sandboxes for MCP chat widgets?▼

The limitation of using iframe sandboxes for MCP chat widgets is the strict security context, which requires bundling the ext-apps browser library to ensure compatibility and proper rendering within the chat surface.

Related Skills

Explore More Software Engineering Skills→
pingqLINpingqLIN

typescript-mcp-server

Build Model Context Protocol servers with the TypeScript SDK.

Community
Intermediate
thevibeworksthevibeworks
28

build-mcp-app

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

Official
Advanced
goodnessibehgoodnessibeh
1

build-mcp-app

Construct interactive UI components for Model Context Protocol servers using the @modelcontextprotocol/ext-apps SDK.

Community
Advanced
LinkedInLearningLinkedInLearning
2

add-app-to-server

Integrate interactive UI elements into existing MCP server tools using the MCP Apps SDK.

Official
Advanced