What does this skill do, and when should you use it?
This Agent Skill guides developers in extending a standard MCP server with UI resources rendered inline in a chat surface. It covers remote Streamable HTTP deployments and MCPB-packaged local applications, including the relationship between tools, resources, and iframe widgets. It also documents the `App` runtime, host messaging, theming, CSP constraints, and testing workflows. It is a good fit when an MCP tool genuinely needs interaction; ordinary text or JSON output is usually simpler.
It explains how to register an MCP tool with _meta.ui.resourceUri, register a separate HTML UI resource, and serve it with RESOURCE_MIME_TYPE. Inside the iframe, the examples use the App class to receive tool results, send messages, update model context, call server tools, open links, download files, and request display modes. The skill provides TypeScript/Express scaffolding, dependency commands, remote and local deployment patterns, widget templates, and testing procedures for Claude, Claude Desktop, JSON-RPC, browser previews, and hosts without the apps surface.
- An MCP developer needs a searchable picker for files, contacts, or records that Claude cannot reliably rank or select.
- A tool performs a destructive or billable action and needs explicit inline confirmation.
- A server returns charts, maps, diffs, previews, or other spatial or visual output.
- A tool needs structured input and a widget is more suitable than model-inferred arguments or elicitation.
- A user needs to watch a long-running operation through progress or live-status UI.
How do you install this skill?
- Do not use the examples directly in production; add authentication or tightly define the authless data scope, isolate upstream secrets, minimize sensitive data, and implement confirmation and rollback for writes.
- Pin and audit versions of @modelcontextprotocol/sdk, @modelcontextprotocol/ext-apps, express, zod, mcp-remote, and related dependencies, then verify the target hosts and network environment.
- Add explicit error feedback and tests for oversized payloads, invalid JSON, network timeouts, unsupported host capabilities, and stale widget instances.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Node.jsnpm@modelcontextprotocol/sdk@modelcontextprotocol/ext-appsZodExpressmcp-remote
The skill is located at plugins/mcp-server-dev/skills/build-mcp-app/SKILL.md and is installed through the anthropics/claude-plugins-official marketplace collection. In Claude Code, run /plugin install mcp-server-dev@claude-plugins-official, or browse it through /plugin > Discover. The example project dependencies can be installed with npm install @modelcontextprotocol/sdk @modelcontextprotocol/ext-apps zod express.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/anthropics/claude-plugins-official.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/mcp-server-dev/skills/build-mcp-app" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
After the MCP server deployment model is settled, use a prompt such as: Add an interactive contact picker to my MCP server that renders in chat, and show the remote Streamable HTTP registration and iframe messaging implementation. If the requirement is only yes/no confirmation, a short enum, or a flat form, check whether MCP elicitation is sufficient before building a widget.
What are this skill's strengths and limitations?
- Covers the full path from tool and resource registration to iframe messaging, CSP, theming, and display modes.
- Addresses both remote MCP apps and MCPB-packaged local apps.
- Includes copyable TypeScript, HTML, npm, and testing examples.
- Defines graceful degradation for hosts that do not support the apps surface.
- It focuses on interactive MCP UI and does not replace the base `build-mcp-server` or MCPB packaging skills.
- Iframe sandboxing imposes CSP, networking, image, navigation, and host-access restrictions.
- The current Claude Desktop workflow still requires `command`/`args` with `mcp-remote`, and aggressive UI-resource caching can slow iteration.
- The source provides testing procedures but no automated test suite.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| MCP Interactive App Builder this page ✓ Anthropic · Official | 59 · Recommended | ★ 38k | 11d ago | Apache-2.0 |
| MCP Server Builder ✓ Anthropic · Official | 54 · Use with care | ★ 38k | 11d ago | Apache-2.0 |
| Azure AI Projects for TypeScript ✓ Microsoft · Official | 49 · Use with care | ★ 2.7k | 3mo ago | MIT |
| MCP Server Development Guide ✓ Microsoft · Official | 49 · Use with care | ★ 2.7k | 3mo ago | MIT |
| Copilot MCP Widget Builder ✓ Microsoft · Official | 49 · Use with care | ★ 2.7k | 3mo ago | MIT |
Compared with plain text or JSON tool output, this skill is intended for selection, confirmation, visualization, and live-status scenarios. If MCP elicitation covers the interaction, the source recommends using elicitation instead of a widget.
How did FollowSkills review this skill?
The document explicitly covers iframe sandboxing, CSP restrictions, host-mediated external links, and rate limiting, proxy trust, caching, and authless exposure. Confirmation dialogs and destructive-tool annotations are also addressed. Points are deducted because examples rely on unspecified databases and upstream APIs, while sensitive-data handling, least privilege, confirmation boundaries, rollback, and end-to-end data-flow auditing are not systematically specified; dependencies are unpinned.
The tool/resource registration model, widget messaging, CSP pitfalls, payload limits, and debugging paths are mostly consistent, with some abnormal-case guidance. Points are deducted because there is no committed test suite or verifiable execution result, examples contain an undefined db and unspecified data source, and JSON parsing, network failure, missing host capabilities, and other key errors lack unified handling; static calibration caps this below 10.
Triggers, use cases, boundaries against plain text and elicitation, remote versus MCPB deployment, and fallback behavior for hosts without the apps surface are clearly described. Points are deducted because Chinese-language UX and mainland-China network reachability are not assessed, and some functionality depends on host-specific Claude/ChatGPT app-surface support.
The skill has a version, clear information architecture, progressive reference documents, installation guidance, templates, limitations, FAQ-like troubleshooting tables, and Anthropic attribution; repository context supplies Apache-2.0 licensing. Points are deducted because the skill lacks a changelog, compatibility matrix, pinned dependency versions, and an explicit maintenance/update path, and some guidance depends on external links and another skill.
It supplies architecture guidance, server and iframe examples, reusable templates, testing loops, and abuse protections, making the core implementation approachable and explaining when widgets add value over text or elicitation. Points are deducted because database, deployment, authentication, and host configuration remain to be supplied, and key code paths are not execution-verified; static calibration caps this at 7.
The material includes substantial code, protocol fields, symptom-to-fix tables, test commands, and named references, giving the claims reasonable source-level auditability. Points are deducted because no committed CI, test suite, or third-party execution evidence is provided, and claims described as observed cannot be independently reproduced from static files alone; static calibration caps this below 5.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →