Agent skill · software engineering · aiskillstore
building-chatgpt-apps
Guides creation of ChatGPT Apps with interactive widgets using OpenAI Apps SDK and MCP servers. Use when building ChatGPT custom apps with visual UI components, embedded widgets, or rich interactive experiences. Covers widget architecture, MCP server setup with FastMCP, response metadata, and Developer Mode configuration. NOT when building standard MCP servers without widgets (use building-mcp-servers skill instead).
Why this skill is useful
Provides specific patterns and commands for building interactive widgets in ChatGPT Apps that the AI wouldn't reliably generate on its own.
What it needs
Requires openai account access. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
ChatGPT Apps SDK Development Guide Overview Create ChatGPT Apps with interactive widgets that render rich UI inside ChatGPT conversations. Apps combine MCP servers (providing tools) with embedded HTML widgets that communicate via the window.openai API. --- window.openai API Reference Widgets communicate with ChatGPT through these APIs: sendFollowUpMessage (Recommended for Actions) Send a follow-up prompt to ChatGPT on behalf of the user: Use for: Action buttons that suggest next steps (summarize, explain, etc.) toolOutput Send structured data back from widget interactions: Use for: Selections, form submissions, user choices that feed into tool responses. callTool Call another MCP tool from within a widget: Use for: Navigation between content, chaining tool calls. --- Critical: Button Interactivity Limitations Important Discovery: Widget buttons may render as static UI elements rather than interactive JavaScript buttons. ChatGPT renders widgets in a sandboxed iframe where some click handlers don't fire reliably. What Works sendFollowUpMessage - Reliably triggers follow-up prompts Simple onclick handlers for toolOutput calls CSS hover effects and visual feedback What May Not Work Complex interactive JavaScript (selection APIs, etc.) Multiple chained tool calls from buttons window.getSelection() for text selection features Recommended Pattern: Suggestion Buttons Instead of complex interactions, use simple buttons that suggest prompts: --- Architecture Summary --- Quick Start 1. Create MCP server with FastMCP and widget resources 2. Define widget HTML that uses window.openai.toolOutput 3. Add response metadata with meta["openai.com/widget"] 4. Expose via ngrok for ChatGPT access 5. Register in ChatGPT Developer Mode settings --- Widget HTML Requirements Basic Widget Template Key Widget Rules 1. Always check window.openai.toolOutput before calling 2. Use inline styles - external CSS may not load reliably 3. Keep widgets self-contained - all HTML/CSS/JS in one file 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/building-chatgpt-apps