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

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, so widgets and tools are structured correctly from the start. Note: this Skill is deprecated and directs users to the mcp-app-builder skill when available. ## Core Features & Use Cases - Discovery and Architecture Guidance: Step-by-step workflows for validating app ideas, deciding between tools and widgets, and designing API shapes that avoid anti-patterns like lazy-loading or widget-state-as-tools. - Widget Implementation References: Detailed docs for server handlers, the widget() helper, useWidget hook, persistent vs ephemeral state, theming, display modes (inline, fullscreen, PiP), and CSP metadata. - Use Case: A developer wants to build a restaurant reservation ChatGPT app. The Skill walks them through scoping the idea, designing a search-restaurants widget plus a make-reservation tool, scaffolding with create-mcp-use-app, and connecting 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.

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 widget files in the resources folder. Widgets use the useWidget hook from mcp-use/react to access props, state, and tool calls.

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 sessions in ChatGPT?▼

Use the state and setState values 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.

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

No, this skill is deprecated and replaced by mcp-app-builder. If mcp-app-builder is not installed, you can add it with npx skills install mcp-use/mcp-use --skill mcp-app-builder and use it instead.

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 the widget's widgetMetadata export with connectDomains for API endpoints and resourceDomains for static assets. Use exact HTTPS domains rather than wildcards for security.

Related Skills

Explore More Software Engineering Skills→
pramodthepramodthe

chatgpt-app-builder

Build ChatGPT applications with React widgets and backend tool integration.

Community
Advanced
hgonzalezstahl-bliphgonzalezstahl-blip

build-mcp-app

Build interactive MCP apps with UI widgets for inline chat experiences.

Community
Advanced
ovachieverovachiever
52

cloudflare-turnstile

Integrate Cloudflare Turnstile bot protection with server-side siteverify validation.

Community
Advanced
runablehqrunablehq

app

Plan and scaffold cross-platform web, mobile, and desktop app development.

Official
Advanced