Skills · SkillWeb & UIMobile & GamesReviewed

build-mcp-app

Guides adding interactive UI resources to an MCP server, so a tool can show a form, picker or dashboard inside the chat.

View on GitHub

Kind: Skill
Works with: Claude Code
Source: anthropics/claude-plugins-official @ 58267944f921
Path: plugins/mcp-server-dev/skills/build-mcp-app/SKILL.md
License: Apache-2.0
Jobs: UI/UX work, Implementation

InstallInstall it from a plugin marketplace.

/plugin install mcp-server-dev@claude-plugins-official

# 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). |
…