Sign in
Explore
Skills · SkillWeb & UIMobile & GamesCross-platform appsUI/UXReviewed

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
Jobs
UI/UX work, Implementation
Topics
Cross-platform apps, UI/UX

Credit

Made by
anthropics
Original
github.com/anthropics/claude-plugins-official/blob/58267944f9…
License
Apache-2.0

Listed by Skill Manifest; not made by us.

InstallInstall it from a plugin marketplace.
/plugin install mcp-server-dev@claude-plugins-official
Install factsScanned 2 Nov 2026
Adds
  • .claude/skills/build-mcp-app/ (the skill folder)
  • 6 file(s) the skill refers to
Runs scripts
Yes
  • shell block in the text
Uses the network
Yes
  • downloads npm packages
Needs secrets
None found
Reads environment variables
  • PORT
Source revision
58267944f921
Licence
Apache-2.0
Last activity
1 Nov 2026
Review
Reviewed

Found by a static scan of the stored text; nothing is run. “None found” is not a guarantee, so read what you install before you run it.

  • Only the main file is read; other files in the folder are not scanned
# 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). |
…