Agent skill · software engineering · anthropics
build-mcp-app
This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the context of MCP. Use AFTER the build-mcp-server skill has settled the deployment model, or when the user already knows they want UI widgets.
Why this skill is useful
Adds specific patterns and commands for building interactive UI widgets in MCP apps that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2026-08-07. 33,212 stars on the source repository.
What this skill does
Build an MCP App (Interactive UI Widgets) An MCP app is a standard MCP server that also serves UI resources — interactive components rendered inline in the chat surface. Build once, runs in Claude and ChatGPT and any other host that implements the apps surface. The UI layer is additive. Under the hood it's still tools, resources, and the same wire protocol. If you haven't built a plain MCP server before, the build-mcp-server skill covers the base layer. This skill adds widgets on top. Testing in Claude: Add the server as a custom connector in claude.ai (via a Cloudflare tunnel for local dev) — this exercises the real iframe sandbox and hostContext. See https://claude.com/docs/connectors/building/testing. Claude host specifics meta.ui. key Where Effect --- --- --- resourceUri tool Which ui:// resource the host renders for this tool's results. visibility: ["app"] tool Hide a widget-only helper tool (e.g. geometry/image fetcher called via callServerTool) from Claude's tool list. prefersBorder: false resource Drop the host's outer card border (mobile). csp.{connectDomains, resourceDomains, baseUriDomains} resource Declare external origins; default is block-all. frameDomains is currently restricted in Claude. hostContext.safeAreaInsets: {top, right, bottom, left} (px) — honor these for notches and the composer overlay. Directory submission requires OAuth or authless (none) — static bearer is private-deploy only and blocks listing — plus tool annotations and 3–5 PNG screenshots; see references/directory-checklist.md. --- When a widget beats plain text Don't add UI for its own sake — most tools are fine returning text or JSON. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills anthropics/build-mcp-app