Keyflow

Search Keyflow

Find a shortcut, workflow, MCP server or skill

build-mcp-app

Official · Anthropic

Installation

Terminal

git clone --depth 1 https://github.com/anthropics/claude-plugins-official.git /tmp/build-mcp-app-src
cp -r /tmp/build-mcp-app-src/plugins/mcp-server-dev/skills/build-mcp-app ~/.claude/skills/build-mcp-app

Or .claude/skills/build-mcp-app to scope it to one repo.

Summary

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.

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…

Questions

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.

Claude Code: ~/.claude/skills/build-mcp-app. Codex: ~/.agents/skills/build-mcp-app. Antigravity: ~/.gemini/config/skills/build-mcp-app. Use .claude/skills or .agents/skills inside a repo to scope it to one project.

More from anthropics/claude-plugins-official

Name
  1. access
  2. configure
  3. access
  4. configure
  5. claude-automation-recommender
  6. claude-md-improver
  7. claude-security
  8. cardputer-buddy
Buy me a coffee