skills.rest
diegoc1005
diegoc1005COMMUNITY
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#chatgpt#widgets#mcp-use#generative ui#apps sdk
One-click install
npx skills add https://github.com/diegoc1005/hackAI --skill chatgpt-app-builder-diegoc1005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chatgpt-app-builder
Source: https://github.com/diegoc1005/hackAI/tree/main/.cursor/skills/chatgpt-app-builder
Command: npx skills add https://github.com/diegoc1005/hackAI --skill chatgpt-app-builder-diegoc1005

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building ChatGPT apps with interactive widgets requires coordinating MCP server tools, React widget components, state persistence, CSP configuration, and display modes. This Skill guides the entire workflow from idea discovery through architecture design to implementation, preventing common mistakes like duplicate tool registration, lazy-loading patterns, and lost widget state. ## Core Features & Use Cases - Guided Discovery and Architecture: Walks through phased idea validation (value proposition, LLM fit, UI overview) and API design rules such as one widget per flow and no lazy-loading tools. - Widget Implementation Patterns: Provides reference docs for server handlers, the widget() response helper, useWidget hook, persistent state vs React useState, theming, display modes, and CSP metadata. - Use Case: A developer wants to build a restaurant reservation ChatGPT app. The Skill helps scope the spec, design a search-restaurants widget plus a make-reservation tool, scaffold the project with create-mcp-use-app, and connect it to ChatGPT via a tunnel. ## Quick Start Ask the assistant to help you design and scaffold a ChatGPT app with an interactive widget using mcp-use, starting from your app idea. Note: This Skill is deprecated in favor of mcp-app-builder; install it with npx skills install mcp-use/mcp-use --skill mcp-app-builder if available.

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 using the mcp-apps template, define server tools with the widget config, and create React widgets in the resources folder. Each widget exports widgetMetadata with a Zod props schema and a default component using McpUseProvider and useWidget.

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 outputs are simple text like confirmation IDs.

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?▼

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.

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.

Is chatgpt-app-builder deprecated?▼

Yes, this Skill is deprecated and replaced by mcp-app-builder. Install the replacement with npx skills install mcp-use/mcp-use --skill mcp-app-builder and use it instead for new ChatGPT app development.

Related Skills

Explore More Software Engineering Skills→
maigenticmaigentic
37

value-proposition-crafter

Analyze customer jobs, pains, and gains to craft structured value propositions.

Community
Advanced
PlayableIntelligencePlayableIntelligence
307

monetize-game

Register a game on Play.fun and integrate the browser SDK for monetization.

Official
Advanced
CopilotKitCopilotKit
7

chatgpt-app-builder

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

Official
Advanced
AbsolutelySkilledAbsolutelySkilled
207

a2ui

Generate and render declarative UIs using the A2UI protocol.

Official
Advanced