skills.rest
franciscogar94
franciscogar94COMMUNITY
Explore all skills by this author →
GitHub

chatgpt-app-builder

Build ChatGPT apps with interactive React widgets using mcp-use and the OpenAI Apps SDK.

Updated May 9, 2026
Search Tags:#react#mcp#tool design#chatgpt apps#openai apps sdk#widgets#mcp-use
One-click install
npx skills add https://github.com/franciscogar94/CrisisOS --skill chatgpt-app-builder-franciscogar94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chatgpt-app-builder
Source: https://github.com/franciscogar94/CrisisOS/tree/main/.cursor/skills/chatgpt-app-builder
Command: npx skills add https://github.com/franciscogar94/CrisisOS --skill chatgpt-app-builder-franciscogar94

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp-use, zod, and includes references (resource) components.

What problem does it solve? Building ChatGPT apps requires coordinating MCP server tools, React widget components, widget state, and host display constraints, and this Skill guides that entire workflow from idea discovery through deployment. Note: this Skill is deprecated and directs users to the mcp-app-builder skill when available. ## Core Features & Use Cases - Discovery and Architecture Guidance: Structured phases to validate an app idea, decide which flows need widgets versus plain tools, and avoid anti-patterns like lazy-loading tools or widget-state-as-tools. - Server and Widget Implementation: Reference docs covering server.tool() handlers, the widget() response helper, useWidget hook, persistent state, theming, display modes, and CSP metadata. - Use Case: A developer wants a restaurant reservation ChatGPT app. The Skill walks them through scoping the spec, scaffolding with create-mcp-use-app, building a search-restaurants widget, and wiring a make-reservation tool the widget calls via callTool. ## Quick Start Ask the assistant to help design and scaffold a ChatGPT app with an interactive widget using mcp-use, starting from your app idea or spec.

Frequently Asked Questions about chatgpt-app-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a ChatGPT app with interactive widgets?▼

Scaffold a project with `npx create-mcp-use-app my-app --template mcp-apps`, define server tools with `server.tool()` and a `widget` config, and create React components in `resources/` exporting `widgetMetadata` and a default component. Run `npm run dev` and connect via a tunnel URL.

When should I use a widget versus a plain tool in a ChatGPT app?▼

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 output is simple text like a confirmation ID.

How do I persist widget state across reopens in ChatGPT?▼

Use `state` and `setState` from the `useWidget` hook, which persist across widget reopens and are visible to the LLM. React `useState` is only for ephemeral UI state like hover effects that should reset on reopen.

Why does my ChatGPT widget show undefined props on first load?▼

The widget renders before the tool finishes executing, so props are empty or partial. Always check `isPending` from `useWidget` first and render a loading state before accessing props.

Is the chatgpt-app-builder skill still maintained?▼

No, it is deprecated and replaced by `mcp-app-builder`. The Skill instructs you to check for `mcp-app-builder` in the skills folder or install it with `npx skills install mcp-use/mcp-use --skill mcp-app-builder`.

How do I configure CSP for a widget calling external APIs?▼

Add a `metadata.csp` object in `widgetMetadata` with `connectDomains` for API endpoints, `resourceDomains` for static assets, and `frameDomains` for embedded iframes. Use exact HTTPS domains rather than wildcards for security.

Related Skills

Explore More Software Engineering Skills→
mcp-usemcp-use
10.5k

chatgpt-app-builder

Build ChatGPT apps with interactive React widgets using mcp-use and OpenAI Apps SDK.

Official
Intermediate
23wj1a054123wj1a0541

chatgpt-app-builder

Build ChatGPT apps with interactive React widgets using mcp-use and the OpenAI Apps SDK.

Community
Advanced
CopilotKitCopilotKit
7

chatgpt-app-builder

Build ChatGPT apps with interactive React widgets using mcp-use and the OpenAI Apps SDK.

Official
Advanced
fazxesfazxes
231

build-mcp-app

Build and deploy MCP apps with inline UI widgets for chat surfaces.

Community
Advanced