skills.rest
cjrfoto
cjrfotoCOMMUNITY
Explore all skills by this author →
GitHub

build-mcp-app

Build MCP servers that render UI widgets inside the chat surface.

Updated Apr 19, 2026
Search Tags:#mcp#interactive-ui#widget-development#mcp-app#ui-widgets#chat-widgets
One-click install
npx skills add https://github.com/cjrfoto/claude-config --skill build-mcp-app-cjrfoto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/cjrfoto/claude-config/tree/main/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/cjrfoto/claude-config --skill build-mcp-app-cjrfoto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MCP apps enable interactive UI widgets to render inside the chat surface, allowing tools to show forms, pickers, dashboards, and dialogs alongside text results.

Core Features & Use Cases

  • Create MCP servers that serve UI resources and render inline widgets
  • Attach widgets to tools for forms, pickers, confirmations, and visual previews
  • Test and iterate MCP UI components within Claude and host environments

Quick Start

Define a tool with a UI resource URI and run the MCP server to render the widget in the chat.

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 an MCP chat surface?▼

MCP apps render interactive UI widgets inside the chat surface by defining a tool with a UI resource URI and running an MCP server. This enables forms, pickers, dashboards, and confirmation dialogs alongside text results.

What do I need to build an MCP app with inline UI components?▼

Building MCP apps with inline UI components requires an existing MCP server, the apps SDK, and a defined UI resource URI. Optional scripts, references, and assets may also be included to supply widget functionality.

When should I add UI widgets to my MCP server?▼

Add UI widgets to an MCP server after deployment decisions are settled, or when you already know you want interactive components like forms, pickers, dashboards, and confirmation dialogs rendered in the chat surface.

Can I test and iterate MCP UI components within Claude?▼

Yes, you can test and iterate MCP UI components within Claude and host environments by running the MCP server to render the widget in the chat, allowing you to verify forms, pickers, and visual previews.

What types of interactive components can I attach to MCP tools?▼

You can attach widgets to MCP tools for forms, pickers, confirmations, and visual previews. These interactive components render inline within the chat surface alongside standard text results.

How do I create an MCP server that serves UI resources for inline widgets?▼

To create an MCP server that serves UI resources, define a tool with a UI resource URI and run the server. The apps SDK handles rendering the inline widget inside the chat surface.

Related Skills

Explore More Software Engineering Skills→
LAF-USLAF-US

build-mcp-app

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

Official
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced
fazxesfazxes
231

build-mcp-app

Build and deploy MCP apps with inline UI widgets for chat surfaces.

Community
Advanced
Kingdaddy007Kingdaddy007
1

build-mcp-app

Build MCP apps that render interactive UI widgets in chat surfaces.

Community
Intermediate