skills.rest
goodnessibeh
goodnessibehCOMMUNITY
Explore all skills by this author →
GitHub

build-mcp-app

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

1|3|Updated Apr 9, 2026
Search Tags:#MCP#UI development#MCP server#chat interface#interactive components
One-click install
npx skills add https://github.com/goodnessibeh/ai-dev-boilerplate --skill build-mcp-app-goodnessibeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/goodnessibeh/ai-dev-boilerplate/tree/main/.claude/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/goodnessibeh/ai-dev-boilerplate --skill build-mcp-app-goodnessibeh

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of building interactive UI components for MCP servers, enabling developers to add features like forms, pickers, and dashboards directly into the chat interface.

Core Features & Use Cases

  • MCP App Construction: Dynamically build "MCP apps" that serve UI resources and interactive components inline in the chat.
  • Widget Development: Design widgets for forms, pickers, dashboards, and confirmation dialogs that integrate seamlessly with MCP servers.
  • Deployment Models: Supports both remote hosting and local deployment within an MCPB bundle.
  • Use Case: If you need a tool that allows users to select a contact from a list or fill out a form directly in the chat, this Skill is essential.

Quick Start

Use the build-mcp-app skill to create a new form widget for your 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 components to an MCP server chat interface?▼

You can add interactive UI components to an MCP server chat interface by declaring tools and registering resources using the @modelcontextprotocol/ext-apps SDK. This enables inline features like form inputs, pickers, and confirmation dialogs directly within the chat.

What types of interactive widgets can I build for Model Context Protocol servers?▼

For Model Context Protocol servers, you can build interactive widgets for forms, pickers, dashboards, and confirmation dialogs. These widgets integrate seamlessly into the chat interface to enable direct user interaction and data selection.

Can I deploy MCP apps locally or do they require remote hosting?▼

MCP apps support both remote hosting and local deployment within an MCPB bundle. This flexibility allows you to serve UI resources and interactive components inline in the chat across different server environments.

How do I create a form widget for user input directly in an MCP chat?▼

To create a form widget for user input in an MCP chat, you use the build-mcp-app capability to dynamically construct the UI resource. This requires tool declarations and resource registrations implemented via the @modelcontextprotocol/ext-apps SDK.

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

Yes, building interactive components for MCP servers typically requires Express and Zod alongside the @modelcontextprotocol/sdk and ext-apps packages. These dependencies handle client-server communication and schema validation for the interactive UI elements.

Why use the Model Context Protocol ext-apps SDK for chat interface development?▼

The Model Context Protocol ext-apps SDK is used for chat interface development because it handles client-server communication for inline user interaction. It automates the construction of UI resources, allowing forms and pickers to function directly within the chat.

Related Skills

Explore More Software Engineering Skills→
maxjuniorbrmaxjuniorbr
2

nodejs-backend-patterns

Enforce unified Node.js backend patterns across routes, controllers, and tests.

Community
Advanced
LAF-USLAF-US

build-mcp-app

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

Official
Advanced
jillescajillesca
13

build-mcp-app

Scaffold MCP apps with interactive widgets and UI resources for chat surfaces.

Community
Advanced
luiztrilhaluiztrilha

build-mcp-app

Develop interactive UI components for Model Context Protocol servers.

Community
Intermediate