skills.rest
AvaTar-ArTs
AvaTar-ArTsCOMMUNITY
Explore all skills by this author →
GitHub

build-mcp-app

Build MCP servers that serve interactive UI widgets rendered inline in chat hosts.

Updated Jul 10, 2026
Search Tags:#typescript#mcp#chatgpt#widgets#interactive ui#iframe#apps sdk
One-click install
npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill build-mcp-app-avatar-arts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-mcp-app
Source: https://github.com/AvaTar-ArTs/.Agent-skills/tree/main/skills/build-mcp-app
Command: npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill build-mcp-app-avatar-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Plain MCP tools return only text or JSON, which falls short when a tool needs structured input, visual output, or explicit user confirmation. This Skill guides you through adding interactive UI widgets (pickers, forms, charts, confirm dialogs) to an MCP server so they render inline in hosts like Codex and ChatGPT. ## Core Features & Use Cases - Widget-enabled tools: Register tools that declare a UI resource via _meta.ui.resourceUri while returning plain data, with the HTML served as a separate resource using the text/html;profile=mcp-app MIME type. - Bidirectional widget runtime: Use the App class from @modelcontextprotocol/ext-apps inside the iframe to receive tool results, send messages back to the conversation, call server tools, and follow host theme. - Decision guidance: Route correctly between spec-native elicitation and full widgets, and choose between remote streamable-HTTP deployment and local MCPB-packaged apps. - Use Case: Build a contact picker tool where Codex calls pick_contact, the host renders a searchable list widget in an iframe, and the user's click sends the selected contact back into the conversation. ## Quick Start Ask the AI to scaffold an MCP app with an interactive picker widget using the ext-apps SDK, including the tool registration, HTML resource, and bundle inlining.

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 an interactive UI widget to an MCP server tool?▼

Register the tool with registerAppTool and set _meta.ui.resourceUri to a ui:// URI, then register that URI separately with registerAppResource serving HTML with the text/html;profile=mcp-app MIME type. The host fetches the resource and renders it in an iframe when the tool is called.

When should I use a widget instead of MCP elicitation?▼

Use elicitation for yes/no confirmations, short enum picks, and flat forms since it is spec-native with zero UI code. Use a widget for large searchable lists, visual previews, charts or maps, and live-updating progress, which elicitation cannot handle.

Why does my MCP widget render blank in the iframe?▼

Blank widgets are usually caused by CSP violations, most often from importing the App class from a CDN like esm.sh whose transitive fetches the sandbox blocks. Inline the @modelcontextprotocol/ext-apps/app-with-deps bundle into the HTML at server startup instead.

Can MCP app widgets open links or make network requests?▼

Widgets cannot navigate directly or open popups because the iframe sandbox blocks window.open and target=_blank links; use app.openLink({url}) instead. Arbitrary network calls are CSP-restricted, so route them through app.callServerTool on your server.

Do MCP widgets work in hosts without apps surface support?▼

Yes, degradation is automatic. Hosts without the apps surface ignore _meta.ui and render the tool's plain text or JSON content normally, so the tool handler should always return meaningful data alongside the widget.

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
anthropicsanthropics
35.8k

build-mcpb

Package local MCP servers with bundled runtimes into installable .mcpb archives.

Official
Advanced
bmad-code-orgbmad-code-org
52.5k

bmad-ux

Elicit UX decisions and produce DESIGN.md and EXPERIENCE.md specification documents.

Official
Advanced
Leap0920Leap0920
1

build-mcp-app

Build MCP apps by adding interactive widget UI resources to server tools.

Community
Advanced