build-mcp-app — Skills — getagentictools

What it does

hostContext.safeAreaInsets: {top, right, bottom, left} (px) — honor these for notches and the composer overlay.

Access the host page's DOM, cookies, or storage

Make network calls to arbitrary origins (CSP-restricted — route through callServerTool)

Open popups or navigate directly — use app.openLink({url})

Load remote images reliably — inline as data: URLs server-side

references/iframe-sandbox.md — CSP/sandbox constraints, the bundle-inlining pattern, image handling, host theming

references/widget-templates.md — reusable HTML scaffolds for picker / confirm / progress / display

Requirements & configuration

| Tool needs structured input Claude can't reliably infer | Form |

| Destructive or billable action needs explicit confirmation | Confirm dialog |

| Need | Elicitation | Widget |

const require = createRequire(import.meta.url);

Configuration: RESOURCE_MIME_TYPE

build mcp app

Source

Repository: https://github.com/anthropics/claude-plugins-official

build-mcp-app FAQ

What does the build-mcp-app skill do?

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. hostContext.safeAreaInsets: {top, right, bottom, left} (px) — honor these for notches and the composer overlay. Access the host page's DOM, cookies, or storage

What does build-mcp-app require?

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. | Tool needs structured input Claude can't reliably infer | Form | | Destructive or billable action needs explicit confirmation | Confirm dialog | | Need | Elicitation | Widget | const require = createRequire(import.meta.url); Configuration keys: RESOURCE_MIME_TYPE.

How do I install build-mcp-app?

Run: npx -y skills add https://github.com/anthropics/claude-plugins-official --skill build-mcp-app --agent claude-code — the source lives at github.com/anthropics/claude-plugins-official.

Maintain build-mcp-app?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![build-mcp-app on getagentictools](https://getagentictools.com/badge/skills/anthropics-claude-plugins-official-build-mcp-app.svg)](https://getagentictools.com/skills/anthropics-claude-plugins-official-build-mcp-app?ref=badge)

npx agentictools info skills/anthropics-claude-plugins-official-build-mcp-app

The second line is the CLI lookup for this page — handy in READMEs and docs.