/mcp-apps-builder

name: mcp-apps-builder
description: Load the official MCP Apps builder skills (create-mcp-app, migrate-oai-app, add-app-to-server, convert-web-app) from github.com/modelcontextprotocol/ext-apps. Use when the user says "build an MCP App", "add a ui:// view to my MCP server", "create an interactive MCP App from scratch", "migrate from OpenAI Apps SDK to MCP", or "turn my web app into a hybrid MCP App". Targets the MCP Apps SDK (SEP-1865 ui:// resources) specifically. Not for regular web frontends, REST APIs, CAO provider adapters, SKILL.md authoring, or plugins.
compatibility: Requires Node.js for ext-apps skill installation. For CAO views, also requires CAO_MCP_APPS_ENABLED=true.

MCP Apps Builder (ext-apps Agent Skills bridge)

The Model Context Protocol [ext-apps](https://github.com/modelcontextprotocol/ext-apps) repo ships **four official Agent Skills** that teach an AI coding agent how to build [MCP Apps](https://modelcontextprotocol.io/extensions/apps/overview) (SEP-1865 — interactive `ui://` UIs that render inside a chat host). This skill tells you when to reach for them and how to install them, so MCP App work is done with the canonical, up-to-date guidance instead of guesswork.

The four builder skills

| Skill | Use it when… | |---|---| | [`create-mcp-app`](https://github.com/modelcontextprotocol/ext-apps) | Scaffolding a **new** MCP App (server + interactive UI) from scratch. | | [`add-app-to-server`](https://github.com/modelcontextprotocol/ext-apps) | Adding an interactive `ui://` view to an **existing** MCP server's tools. | | [`migrate-oai-app`](https://github.com/modelcontextprotocol/ext-apps) | Converting an existing **OpenAI Apps SDK** app to MCP Apps. | | [`convert-web-app`](https://github.com/modelcontextprotocol/ext-apps) | Turning an existing **web app** into a hybrid web + MCP App. |

Install / load them

Pick whichever matches the agent you're driving (skills live in the agent's skills directory — install once, then ask the agent to build):

• **Claude Code** (plugin marketplace):

  /plugin marketplace add modelcontextprotocol/ext-apps
  /plugin install mcp-apps@modelcontextprotocol-ext-apps

• **Any agent** (Vercel Skills CLI):

  npx skills add modelcontextprotocol/ext-apps

• **Manual** (clone + copy into the agent's skills dir):

  git clone https://github.com/modelcontextprotocol/ext-apps.git
  cp -r ext-apps/plugins/mcp-apps/skills/create-mcp-app ~/.kiro/skills/create-mcp-app
  # …repeat for add-app-to-server / migrate-oai-app / convert-web-app

Skills dirs by agent: Kiro CLI `~/.kiro/skills/`, Claude Code `~/.claude/skills/`, VS Code/Copilot `~/.copilot/skills/`, Gemini CLI `~/.gemini/skills/`, Codex `~/.codex/skills/`, Cursor `~/.cursor/skills/`, Goose `~/.config/goose/skills/`. Verify with: ask the agent "what skills do you have?"

For complete per-agent installation instructions and troubleshooting, see [references/installation-per-agent.md](references/installation-per-agent.md).

Building inside CAO (read this for `ui://cao/*` work)

CAO's own views (`ui://cao/dashboard` / `agent` / `event-stream`) are hand-rolled single-file React bundles — **not** generated by `create-mcp-app` — because CAO enforces stricter invariants than the starter templates. When you add a new CAO view, use `add-app-to-server`'s checklist for the spec-correct shape, but keep CAO's guardrails:

• **Default-off** behind `CAO_MCP_APPS_ENABLED` (end to end).
• **JIT-free** bundles (no `eval` / `new Function`; the host CSP forbids it; the

`scan:jit` gate fails otherwise).

• **HTTP-only boundary**: `mcp_server/*` reaches state only over HTTP (AST guard

`test/test_http_only_boundary.py`).

• Stay within the **bundle-size budget** (`check:size`) and the **coverage

ratchet** (`coverage:ratchet`).

• Tag tools with `ui_meta(...)` (resource `_meta.ui`: `csp` / `permissions` /

`domain` / `prefersBorder`; tool `_meta.ui`: `resourceUri` / `visibility`).

For the full guardrail checklist and how to run each CI gate locally, see [references/cao-view-guardrails.md](references/cao-view-guardrails.md).

For the operator/extend playbook (turn it on, troubleshoot, the `submit_command` choke point, host-delegated actions), load the **`cao-mcp-apps`** skill.

Sources of truth

• [MCP Apps Overview](https://modelcontextprotocol.io/extensions/apps/overview) ·

[Build an MCP App](https://modelcontextprotocol.io/extensions/apps/build)

• Stable spec [`2026-01-26/apps.mdx`](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx) ·

SDK [`@modelcontextprotocol/ext-apps`](https://www.npmjs.com/package/@modelcontextprotocol/ext-apps) (v1.7.4) · [API reference](https://apps.extensions.modelcontextprotocol.io/api/index.html)

• [ext-apps repo](https://github.com/modelcontextprotocol/ext-apps) ·

[client matrix](https://modelcontextprotocol.io/extensions/client-matrix)

Gotchas

• **CAO views are NOT generated by create-mcp-app:** CAO's own `ui://cao/*` views are hand-rolled single-file React bundles with stricter invariants than the starter templates. Use `add-app-to-server` for the spec-correct shape, but enforce CAO's guardrails (JIT-free, bundle-size budget, HTTP-only boundary).
• **JIT-free is non-negotiable for CAO:** Host CSP forbids `eval` / `new Function`. The CI `scan:jit` gate will fail the build if any JIT constructs are present.
• **HTTP-only boundary:** `mcp_server/*` must reach state only over HTTP to the Backplane. The AST guard test (`test/test_http_only_boundary.py`) enforces this — direct state access bypasses governance.

Build → Test → Record Workflow

When building or extending CAO MCP Apps views, always follow this complete cycle:

cd cao_mcp_apps
npm run build:all         # Build all view bundles (single-file HTML)
npm test                  # Unit tests (vitest)
npm run test:e2e          # Playwright E2E against built bundles
npm run demo              # Record demo video +