chatgpt-app-builder
ChatGPT App Builder streamlines development of ChatGPT applications featuring interactive React widgets through the mcp-use framework and OpenAI Apps SDK. It eliminates manual configuration by auto-registering widgets, providing built-in React hooks, and handling bundling and CSP setup automatically. The skill supports both MCP Apps and ChatGPT Apps SDK protocols, enabling widgets to work across multiple clients while maintaining compatibility.
ChatGPT App Builder lets you create production ChatGPT apps with interactive React widgets using mcp-use and OpenAI Apps SDK.
AI-generated summary based on this skill's SKILL.md
Install
mcp-use/skills/chatgpt-app-builder
git clone https://github.com/mcp-use/skills
cp -r skills/skills/chatgpt-app-builder ~/.claude/skills/chatgpt-app-buildernpx skillfed install mcp-use/skills/chatgpt-app-builderFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I build a ChatGPT app with interactive widgets?
ChatGPT App Builder streamlines creating ChatGPT applications with interactive React widgets through the mcp-use framework. You define React components, and the framework auto-registers them as widgets, handles bundling, and manages CSP policies automatically. Built-in React hooks simplify state management and ChatGPT integration, letting you focus on UI logic rather than configuration.
What is the mcp-use framework for apps?
ChatGPT App Builder's mcp-use framework enables zero-config widget development by auto-registering React components and handling protocol details. It supports both MCP Apps and ChatGPT Apps SDK protocols, allowing your widgets to work across multiple clients. The framework provides built-in hooks and automatic bundling, eliminating manual setup.
Can ChatGPT App Builder widgets work with both MCP and ChatGPT protocols?
Yes, ChatGPT App Builder supports dual-protocol widget deployment. Widgets created with the mcp-use framework automatically work with both MCP Apps and ChatGPT Apps SDK protocols, enabling compatibility across different clients without requiring separate implementations or configuration changes.
How does ChatGPT App Builder handle widget metadata and CSP setup?
ChatGPT App Builder automates widget metadata configuration and Content Security Policy setup. You define widget props and metadata declaratively, and the framework handles CSP policy generation and bundling automatically. This eliminates manual security configuration while ensuring your production apps meet ChatGPT's requirements.
What makes ChatGPT App Builder production-ready?
ChatGPT App Builder includes built-in Inspector for testing and debugging, automatic CSP policy handling, and support for production deployment across both MCP and ChatGPT protocols. The framework manages bundling, widget registration, and security configuration automatically, reducing deployment complexity.
Does ChatGPT App Builder require manual configuration?
No, ChatGPT App Builder provides zero-config widget development. It auto-registers React components, handles bundling, manages CSP policies, and configures metadata automatically. You write React code and the framework handles the rest, significantly reducing setup overhead for production ChatGPT applications.
SKILL.md
rendered from the published skill — quoted content, verbatim
ChatGPT App Builder
Build production-ready ChatGPT apps with interactive widgets using the mcp-use framework and OpenAI Apps SDK. This skill provides zero-config widget development with automatic registration and built-in React hooks.
Quick Start
Always bootstrap with the MCP Apps template:
npx create-mcp-use-app my-chatgpt-app --template mcp-apps
cd my-chatgpt-app
yarn install
yarn dev
This creates a project structure:
my-chatgpt-app/
├── resources/ # React widgets (auto-registered!)
│ ├── display-weather.tsx # Example widget
│ └── product-card.tsx # Another widget
├── public/ # Static assets
│ └── images/
├── index.ts # MCP server entry
├── package.json
├── tsconfig.json
└── README.md
Why mcp-use for ChatGPT Apps?
Traditional OpenAI Apps SDK requires significant manual
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/chatgpt-app-builder/LICENSE.txt
skills/chatgpt-app-builder/SKILL.md