chatgpt-app-builder

Scaffold a project with npx create-mcp-use-app using the mcp-apps template, define server tools with a widget config, and create React widget files in the resources folder. Widgets use the useWidget hook from mcp-use/react to access props, state, and tool calls.

Use a widget when users browse or compare multiple items, when visual data like maps or charts improves understanding, or when selections benefit from a visual layout. Use a plain tool when inputs are conversational and outputs are simple text like confirmation IDs.

Use the state and setState values from the useWidget hook, which persist across widget reopens and are visible to the LLM. React useState is ephemeral and resets on reopen, so reserve it for hover effects and transient UI only.

Widgets render before the tool finishes executing, so props are empty or partial initially. Always check the isPending flag from useWidget and render a loading state before accessing props.

Yes, this Skill is deprecated and replaced by mcp-app-builder. If mcp-app-builder is not installed, run npx skills install mcp-use/mcp-use --skill mcp-app-builder and use that Skill instead.

Add a metadata.csp object in the exported widgetMetadata with connectDomains for fetch or WebSocket endpoints, resourceDomains for images and fonts, and frameDomains for embedded iframes. Use exact HTTPS domains rather than wildcards.