build-mcp-app
Skill OfficialThis 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 "app
Install
git clone https://github.com/anthropics/claude-plugins-public.git ~/.claude/skills/build-mcp-appWhat is 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.
What this can do
Capabilities declared in this component's own frontmatter — not inferred.
Inherit all session tools
Declares no tool restrictions — inherits every session tool
~113 tokens of context used while enabled, before you invoke anything
Trust
94/100 · Excellent1 factor scored below maximum
Documentation
README · ~11 min readBuild 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). |
Reviews
Log in to leave a review.
No reviews yet — be the first.
Explore related
Other things in this space — across every part of the ecosystem, not just skills.
Skillssimilar to this one
All skills →ui-ux-pro-max-skill
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
111.3K stars
impeccable
The design language that makes your AI harness better at design.
52.5K stars
plugin-structure
This skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plugin.json", "use ${CLAUDE_PLUGIN_ROOT}", "add commands/agents/skills/hooks", "configure auto-discovery", or needs guidance on plugin director
32.8K stars
Subagents
All subagents →code-architect
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences
32.8K stars
plugin-validator
Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f
32.8K stars
scan-inventory
Restricted read-only repository cartographer dispatched by the Claude Security scan workflow to partition the tree into components and account for every top-level directory; not for direct invocation or vulnerability research.
32.8K stars
Plugins
All plugins →mcp-tunnels
Connect Claude to a private MCP server through an Anthropic MCP tunnel. The /create-docker-mcp-tunnel command drives the Docker Compose quickstart end to end: certificates, proxy config, cloudflared, and a verifiable sample server.
32.9K stars
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
32.9K stars
mcp-server-dev
Skills for designing and building MCP servers that work seamlessly with Claude. Guides you through deployment models (remote HTTP, MCPB, local), tool design patterns, auth, and interactive MCP apps.
32.9K stars
MCP Servers
All mcp servers →Commands
All commands →create-docker-mcp-tunnel
Stand up an Anthropic MCP tunnel locally with Docker Compose so Claude can call a private MCP server (manual-credentials quickstart).
32.8K stars
create-plugin
Guided end-to-end plugin creation workflow with component design, implementation, and validation
32.8K stars
release-testing
Run automated UAT tests (UI or API) using a test profile on the AWS DevOps Agent
2.2K stars