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

개발자 도구

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.

주요 기능

Dual-protocol support for ChatGPT Apps SDK and the universal MCP Apps standard
Built-in Inspector for real-time testing and debugging of interactive components
Zero-config widget development with automatic registration from the resources folder
Simplified React integration with the built-in useWidget hook for state and tool management
9,036 GitHub stars
Automatic bundling, hot reloading, and automated CSP configuration for security

사용 사례

Rapidly prototyping production-grade AI tools with persistent state and custom React hooks
Creating interactive data visualizations and dashboards directly within ChatGPT conversations
Building cross-platform UI components that work in both ChatGPT and local MCP clients

소개

주요 기능

Dual-protocol support for ChatGPT Apps SDK and the universal MCP Apps standard
Built-in Inspector for real-time testing and debugging of interactive components
Zero-config widget development with automatic registration from the resources folder
Simplified React integration with the built-in useWidget hook for state and tool management
9,036 GitHub stars
Automatic bundling, hot reloading, and automated CSP configuration for security

사용 사례

Rapidly prototyping production-grade AI tools with persistent state and custom React hooks
Creating interactive data visualizations and dashboards directly within ChatGPT conversations
Building cross-platform UI components that work in both ChatGPT and local MCP clients