Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the M
Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the MCP SDK. Use when asked to scaffold or implement MCP App servers, add UI-rendering tools/resources, or migrate a standard MCP server to an MCP App with Vite single-file UI bundles.
Grab the skill package ZIP file using the button above.
Extract and move the folder into your AI agent's skills directory.
Your agent now knows the skill. Just ask it to perform the task!
This is the raw instruction document consumed by your AI agent.
Create MCP Apps that expose tools with visual React UIs for ChatGPT or Claude. Follow the exact dependency versions and server/UI patterns in references/mcp-app-spec.md.
ui://.../app.html). Map each tool to one React entrypoint and one HTML file.assets/mcp-app-template/ when possible, then customize tool names, schemas, and UI. Ensure package.json uses the exact versions, plus tsconfig.json, vite.config.ts, Tailwind + PostCSS, and per-tool build scripts.registerAppTool/registerAppResource, zod schemas directly, createServer() factory per request, and createMcpExpressApp with app.all("/mcp", ...).useApp + useHostStyles, parse tool results, handle loading/error/empty states, and apply safe-area insets.npm run build, then npm run serve, then verify via a tunnel if needed.references/mcp-app-spec.md.registerAppTool/registerAppResource and zod schemas directly (not JSON Schema objects).McpServer instance per request via createServer().createMcpExpressApp and app.all("/mcp", ...).vite-plugin-singlefile.references/mcp-app-spec.md (authoritative spec, patterns, code templates, gotchas)assets/mcp-app-template/ (ready-to-copy MCP App skeleton with one tool + UI)Browse additional components, config blocks, and reference sheets included in the ZIP.
mcp-app-builder/SKILL.md
mcp-app-builder/agents/openai.yaml
mcp-app-builder/assets/mcp-app-template/.gitignore
mcp-app-builder/assets/mcp-app-template/package.json
mcp-app-builder/assets/mcp-app-template/postcss.config.js
mcp-app-builder/assets/mcp-app-template/server.ts
mcp-app-builder/assets/mcp-app-template/src/components/Card.tsx
mcp-app-builder/assets/mcp-app-template/src/index.css
mcp-app-builder/assets/mcp-app-template/src/tool-name.tsx
mcp-app-builder/assets/mcp-app-template/tailwind.config.js
mcp-app-builder/assets/mcp-app-template/tool-name.html
mcp-app-builder/assets/mcp-app-template/tsconfig.json
mcp-app-builder/assets/mcp-app-template/vite.config.ts
mcp-app-builder/references/mcp-app-spec.md
skills/mcp-app-builder/agents/openai.yaml
interface:
display_name: "MCP App Builder"
short_description: "Create MCP apps with React UIs and tools"
default_prompt: "Use $mcp-app-builder to scaffold a new MCP App with UI tools."