Build Mcp App

anthropics/claude-plugins-officialOfficial

Adds interactive UI widgets to MCP servers so tools can render forms, pickers, confirmation dialogs, and dashboards inline in chat instead of returning plain text. Works in both Claude and ChatGPT. The skill covers when to actually use a widget versus just returning text (spoiler: most tools don't need one), how widgets attach to tools via resource URIs, and the iframe runtime mechanics with the App class. Also explains when elicitation covers your use case and you don't need to write any UI code at all. If you're building something where Claude can't reliably infer structured input or the output is inherently visual, this is the path. Otherwise stick with text.

skills.sh installs: 7.1K
GitHub stars: 46.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add anthropics/claude-plugins-official --skill build-mcp-app --agent claude-code

Installs into .claude/skills of the current project.

Files

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.