How do I handle loading states in widgets?

The useWidget hook provides an isPending boolean. You should always check this first to show a loading state before the tool execution completes and props are available.

Do I need to manually register my widgets?

No, with this skill and mcp-use, any React component placed in your project's 'resources' folder is automatically registered as an MCP tool and resource.

What is the benefit of the MCP Apps protocol?

The MCP Apps protocol is a universal standard. Using it ensures your widgets work not just in ChatGPT, but also in Claude Desktop and other AI clients that support MCP.

What is mcp-use and why should I use it?

mcp-use is a framework that simplifies interacting with MCP servers and building widgets. It handles the difficult parts of the OpenAI Apps SDK, like manual bundling and CSP configuration, automatically.

Does this support custom security policies?

Yes, you can define specific domains for APIs, images, and frames within the widgetMetadata object to maintain strict Content Security Policy (CSP) control.

ChatGPT App Builder

Name: ChatGPT App Builder
Author: mcp-use

bymcp-use

•

9,036

•

Developer Tools

Builds production-ready ChatGPT applications and interactive widgets using the mcp-use framework and OpenAI Apps SDK.

ChatGPT App Builder streamlines the development of interactive AI interfaces by providing a zero-config environment for building MCP-compliant widgets. It eliminates the manual complexity of setting up bundling, registration, and Content Security Policies, allowing developers to focus on creating React-based components. By supporting both the OpenAI Apps SDK and the universal MCP Apps standard (SEP-1865), it ensures that your widgets work seamlessly across ChatGPT, Claude Desktop, and other MCP-compatible clients with a single codebase.

Key Features

01Dual-protocol support for ChatGPT Apps SDK and the universal MCP Apps standard

02Built-in Inspector for real-time testing and debugging of interactive components

03Zero-config widget development with automatic registration from the resources folder

04Simplified React integration with the built-in useWidget hook for state and tool management

059,036 GitHub stars

06Automatic bundling, hot reloading, and automated CSP configuration for security

Use Cases

01Rapidly prototyping production-grade AI tools with persistent state and custom React hooks

02Creating interactive data visualizations and dashboards directly within ChatGPT conversations

03Building cross-platform UI components that work in both ChatGPT and local MCP clients

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mcp-use/mcp-use chatgpt-app-builder

For use in Claude.ai and ChatGPT

Download Skill