build-mcp-app

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

28|5|Updated Jun 24, 2025
One-click install
npx skills add https://github.com/thevibeworks/claude-code-docs --skill build-mcp-app-thevibeworks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/thevibeworks/claude-code-docs/tree/main/content/github/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/thevibeworks/claude-code-docs --skill build-mcp-app-thevibeworks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you turn a standard Model Context Protocol (MCP) server into an MCP app that can render interactive UI widgets (like pickers, forms, confirmation dialogs, and dashboards) inline in the chat experience.

Core Features & Use Cases

  • Widget-enabled tool UX: Create tools that return structured data while separately serving UI resources the host can render as iframes.
  • Interactive app surfaces: Support picker/table style selection, confirmation for destructive actions, inline displays for visual outputs, and progress-style status widgets.
  • Host-aware sandbox runtime: Use the ext-apps App connection pattern so widget code can receive tool results, send user-driven messages, and comply with CSP/sandbox constraints.
  • Two deployment shapes: Build remote MCP app servers (resources over HTTP) or package local MCPB apps that include the UI layer.

Quick Start

Use the build-mcp-app skill to design an MCP tool whose results render an interactive widget by defining a _meta.ui.resourceUri, serving the corresponding HTML resource, and sending the user’s selection back into the conversation.

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 register UI metadata on tools using a _meta.ui.resourceUri, serve the corresponding HTML resource with the correct apps MIME type, and use the ext-apps runtime to handle ontoolresult events and user actions.

Can I render interactive forms and dashboards inline with MCP tool results?

Yes, you can render interactive forms and dashboards inline with MCP tool results by building widget-enabled MCP apps that serve separate UI resources, which the chat host renders as interactive iframes within the conversation.

What is the ext-apps App runtime used for in MCP apps?

The ext-apps App runtime provides a host-aware sandbox connection pattern that allows widget code to receive tool results, send user-driven messages back into the conversation, and comply with CSP and iframe sandbox constraints.

Does the build-mcp-app approach support both remote and local MCP deployments?

Yes, the build-mcp-app approach supports two deployment shapes: building remote MCP app servers that serve UI resources over HTTP, and packaging local MCPB apps that bundle the UI layer directly within the deployment.

When should I add UI components to an MCP server deployment?

You should add UI components to an MCP server deployment when you need interactive app surfaces like picker or table style selections, confirmation dialogs for destructive actions, inline visual output displays, or progress-style status widgets.

How do I send a user's widget selection back into the MCP conversation?

To send a user's widget selection back into the MCP conversation, you use the ext-apps App runtime to handle user actions and send user-driven messages from the rendered iframe directly into the host chat experience.