skills.rest
lucasfth
lucasfthCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-mcp-app

Build MCP apps with interactive UI widgets and inline resources.

1|Updated Apr 30, 2025
Search Tags:#integration#tooling#mcp#server#widgets#ui-resources
One-click install
npx skills add https://github.com/lucasfth/config --skill build-mcp-app-lucasfth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/lucasfth/config/tree/main/.claude/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/lucasfth/config --skill build-mcp-app-lucasfth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building MCP apps that both run a server and serve UI resources lets you render interactive widgets directly inside the chat surface, unifying backend logic with frontend components.

Core Features & Use Cases

  • Remote MCP app architecture with widget templates and resources served to the host.
  • Widgets attach to tools via _meta.ui.resourceUri, allowing inputs, previews, and confirmations inside Claude's interface.
  • Supports both remote MCP apps and MCPB-packaged local apps for scenarios requiring local UI control.

Quick Start

Set up an MCP server that also serves UI resources and register a widget tool that references a UI resource URI.

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 that render inside the chat surface?▼

To build an MCP app with interactive UI widgets, you set up an MCP server that also serves UI resources, then register a widget tool that references a UI resource URI. This unifies backend logic with frontend components rendered inline in chat surfaces.

What are UI resources in MCP apps and how do they attach to tools?▼

UI resources in MCP apps are widget templates served to the host that render directly in the chat interface. They attach to server tools via the _meta.ui.resourceUri field, enabling inputs, previews, and confirmations without leaving the conversation.

Does the MCP widget architecture support both remote servers and local packaged apps?▼

Yes, the MCP widget architecture supports both remote MCP apps and MCPB-packaged local apps. Remote apps serve widget templates and resources to the host, while MCPB packages provide local UI control for scenarios requiring localized execution.

How do I register UI resources when building an MCP server for widget rendering?▼

You register UI resources when building an MCP server by defining them via the _meta.ui field and hosting those resources alongside the MCP server tooling. This links the widget templates to your tools through a resource URI.

Can I create interactive previews and confirmations for MCP tools without leaving Claude's interface?▼

Yes, you can create interactive previews and confirmations for MCP tools by attaching widgets via _meta.ui.resourceUri. This renders inputs and previews inline within Claude's chat interface, keeping users in the conversation.

When should I use a remote MCP app versus an MCPB-packaged local app for UI widgets?▼

Use a remote MCP app to serve widget templates and resources to the host over a network. Choose an MCPB-packaged local app when you need direct local UI control and want to keep the server and UI resources bundled together.

Related Skills

Explore More Software Engineering Skills→
SOLEROMSOLEROM

build-mcp-app

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

Community
Advanced
jillescajillesca
13

build-mcp-app

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

Community
Advanced
angrybeaglesangrybeagles

build-mcp-app

Scaffold an MCP server extension that serves UI resources and renders interactive widgets.

Community
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced