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.

build-mcp-app

Build an MCP App (Interactive UI Widgets)

Claude host specifics