build-mcp-app

Create MCP apps that render interactive widgets inline in chat.

Updated May 1, 2026
One-click install
npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill build-mcp-app-oguzhanguvenkaya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations/tree/main/plugins/marketplaces/claude-plugins-official/plugins/mcp-server-dev/skills/build-mcp-app
Command: npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill build-mcp-app-oguzhanguvenkaya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables developers to create MCP apps that render interactive widgets—such as forms, pickers, dashboards, and dialogs—inline in chat surfaces, allowing UI to accompany tool results and enhance user interactions.

Core Features & Use Cases

  • Create widget-enabled tools that attach to MCP tooling and serve HTML UI resources.
  • Support common widget types (Form, Picker, Confirm dialog, Progress, Display) to collect input, confirm actions, or present results inline.
  • Architect the tool/resource pairing so UI resources are loaded via _meta.ui.resourceUri and displayed in a hosted iframe, enabling rich interactions in Claude, Claude Desktop, and other compliant hosts.

Quick Start

Build a minimal MCP app with a single picker widget to select an item and return the choice to Claude.

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 response?

You can render interactive MCP widgets by wiring tools to UI resources and serving them via the _meta.ui.resourceUri property. This connects tool outputs to hosted HTML UI assets like forms and pickers displayed inline.

Can I display a form or picker dialog inline with MCP tool results?

Yes, MCP apps can display forms, pickers, and confirm dialogs inline with tool results. The UI resources are loaded via _meta.ui.resourceUri and rendered inside a hosted iframe within the chat surface.

How does the ext-apps SDK connect MCP tools to interactive chat widgets?

The ext-apps SDK connects MCP tools, UI resources, and host communications. It links your tool logic to interactive HTML assets, enabling widgets to appear inline and communicate user inputs back to the host.

Do interactive MCP widgets work across both remote servers and local UI assets?

Yes, interactive MCP widgets work across remote MCP servers and local UI assets. The architecture pairs tools with UI resources loaded via _meta.ui.resourceUri, ensuring compatibility across compliant chat hosts.

What types of inline widgets can I build for an MCP app?

You can build interactive widgets such as forms, pickers, confirm dialogs, progress bars, and displays. These widgets collect user input, confirm actions, or present results directly inline within the chat surface.

How do I architect a tool and resource pairing for an MCP app with inline UI?

Architect the MCP app by wiring tools to UI resources served via _meta.ui.resourceUri. This configuration loads the interactive HTML assets into a hosted iframe, connecting tool execution to the displayed widget.