mcp-apps-builder

Run npx create-mcp-use-app my-server, then cd into the directory and run npm run dev. The CLI sets up TypeScript config, dev scripts, inspector integration, hot reload, and widget compilation, so you should never manually create the boilerplate.

Define a tool with a widget config referencing a component in the resources directory, then return widget({ props, output }) from the handler. The widget component must export widgetMetadata with a Zod props schema, wrap its root in McpUseProvider with autoSize, and check isPending before accessing props.

Yes, mcp-use supports OAuth through WorkOS AuthKit, Supabase, or custom identity providers like GitHub, Okta, and Google. When configured, unauthenticated requests receive a 401 with a WWW-Authenticate header, and user context is available via ctx.auth.

This happens when you infer types from widgetMetadata.props with an inline Zod schema. Define the schema in a separate constant, reference it in widgetMetadata, then use z.infer on that constant and pass the type to useWidget<Props>().

Use tools for backend actions with simple text or structured output, and widgets when users benefit from browsing, comparing, or interactively selecting data visually. Widgets manage their own UI state with useState rather than separate state-management tools.

The skill's deployment reference covers deploying to Manufact Cloud, self-hosting, and Docker-based deployments. For production, configure CORS, use environment variables for secrets instead of hardcoded keys, and add error handling in tool handlers.