This skill provides comprehensive documentation for building ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. It guides developers through architecture, setup, implementation, and advanced patterns for creating rich, interactive ChatGPT experiences.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "chatgpt-app-builder". How do I create a widget that displays search results?
Expected outcome:
- Use the widget() helper in your server.tool() handler
- Return widget({ props: searchResults, output: text('Found X results') })
- Create a React component in resources/ that receives props via useWidget()
Using "chatgpt-app-builder". What's the difference between props and output?
Expected outcome:
- output: What the LLM sees in the conversation (text, object, markdown)
- props: Data sent to the widget UI (hidden from LLM)
Security Audit
SafeThis skill is documentation/reference material for building ChatGPT apps with mcp-use. All static analyzer findings are false positives: (1) 'Weak cryptographic algorithm' triggers on 'sha' substring in words like 'shape' - no actual crypto usage; (2) 'Ruby/shell backtick execution' detects markdown code fences, not shell commands; (3) 'System reconnaissance' and 'Hardcoded URL' are documentation patterns; (4) The critical heuristic 'Code execution + Network + Credential access' is triggered by documentation showing code examples with URLs and environment variables - standard documentation practice, not malicious behavior. This skill contains no executable code.
Low Risk Issues (2)
Quality Score
What You Can Build
Building ChatGPT Apps with Interactive Widgets
Developer learning to create ChatGPT apps with rich interactive UI components using mcp-use framework
MCP Server Development
Developer creating MCP (Model Context Protocol) servers with custom React widgets for AI assistants
ChatGPT Plugin Architecture
Engineer designing widget-based interactions for ChatGPT or Claude conversations
Try These Prompts
I want to build a ChatGPT app with interactive widgets using mcp-use. How do I set up the project and create my first widget?
Should I use a tool or a widget for a restaurant search feature that shows results in a list and allows users to click for details?
How do I persist widget state across conversations and trigger the LLM from widget interactions?
Create a multi-step widget with form input, API calls, and conditional rendering based on user selection.
Best Practices
- Start with tools-only, upgrade to widgets only when visual interaction is needed
- Keep widgets focused on a single purpose - multiple simple widgets scale better than one complex widget
- Use props for sensitive data the LLM should not see, output for conversational context
Avoid
- Lazy-loading data that should be returned upfront - tool calls are expensive
- Using tools for widget-internal state management - keep flight selection, form data in widget state
- Creating widgets for purely conversational features that don't need visual representation