build-mcp-app

Name: build-mcp-app
Author: anthropics

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.

星标

★ 32,159

来源

GitHub

更新于

2026-07-15

// 安全评估低风险

仅提示词，不执行代码
开源可审计
社区验证· 32.2k

正在进行安全审计…

凭证密钥
网络外发
代码执行
数据访问
来源供应链

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "build-mcp-app" 技能：
1. 下载 https://raw.githubusercontent.com/anthropics/claude-plugins-official/main/plugins/mcp-server-dev/skills/build-mcp-app/SKILL.md
2. 保存为 ~/.claude/skills/build-mcp-app/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 文档

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. Add a widget when one of these is true:

Signal	Widget type
Tool needs structured input Claude can't reliably infer	Form
User must pick from a list Claude can't rank (files, contacts, records)	Picker / table
Destructive or billable action needs explicit confirmation	Confirm dialog
Output is spatial or visual (charts, maps, diffs, previews)	Display widget
Long-running job the user wants to watch	Progress / live status

If none apply, skip the widget. Text is faster to build and faster for the user.

Widgets vs Elicitation — route correctly

Before building a widget, check if elicitation covers it. Elicitation is spec-native, zero UI code, works in any compliant host.

Need	Elicitation	Widget
Confirm yes/no	✅	overkill
Pick from short enum	✅	overkill
Fill a flat form (name, email, date)	✅	overkill
Pick from a large/searchable list	❌ (no scroll/search)	✅
Visual preview before choosing	❌	✅
Chart / map / diff view	❌	✅
Live-updating progress	❌	✅

If elicitation covers it, use it. See ../build-mcp-server/references/elicitation.md.

Architecture: two deployment shapes

Remote MCP app (most common)

Hosted streamable-HTTP server. Widget templates are served as resources; tool results reference them. The host fetches the resource, renders it in an iframe sandbox, and brokers messages between the widget and Claude.

┌──────────┐  tools/call   ┌────────────┐
│  Claude  │─────────────> │ MCP server │
│   host   │<── result ────│  (remote)  │
│          │  + widget ref │            │
│          │               │            │
│          │ resources/read│            │
│          │─────────────> │  widget    │
│ ┌──────┐ │<── template ──│  HTML/JS   │
│ │iframe│ │               └────────────┘
│ │widget│ │
│ └──────┘ │
└──────────┘

MCPB-packaged MCP app (local + UI)

Same widget mechanism, but the server runs locally inside an MCPB bundle. Use this when the widget needs to drive a local application — e.g., a file picker that browses the actual local disk, a dialog that controls a desktop app.

…

查看完整文档 ↗

anthropics装→

$ loading_