MCP App Builder

Overview

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.

Workflow

1. Clarify requirements: what data to visualize, UI pattern (card, table, chart, dashboard, form), data source, and how many tools (start with 1-2).
2. Design tools and UI mapping: define tool names, zod input schemas, output shape, and UI resource URIs (ui://.../app.html). Map each tool to one React entrypoint and one HTML file.
3. Scaffold the project: start from 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.
4. Implement the server: use registerAppTool/registerAppResource, zod schemas directly, createServer() factory per request, and createMcpExpressApp with app.all("/mcp", ...).
5. Implement the UI: use useApp + useHostStyles, parse tool results, handle loading/error/empty states, and apply safe-area insets.
6. Build and test: run npm run build, then npm run serve, then verify via a tunnel if needed.