Guide for implementing ChatGPT Apps using OpenAI Apps SDK. Use when building MCP servers with interactive UI components that integrate with ChatGPT, including widget runtime, authentication, state management, and deployment to the ChatGPT platform.
Comprehensive guide for implementing ChatGPT Apps using the OpenAI Apps SDK.
This skill provides detailed, actionable guidance for building MCP (Model Context Protocol) servers that integrate with ChatGPT's widget runtime, enabling rich interactive UI experiences within ChatGPT conversations.
SKILL.md - The primary skill document containing:
references/window-openai-api.md
window.openai runtimereferences/oauth-authentication.md
This skill covers OpenAI Apps SDK for ChatGPT, which differs from the general MCP Apps (SEP-1865) covered in the mcp-mcp-apps-kit skill:
| Feature | ChatGPT Apps SDK | MCP Apps (SEP-1865) |
|---------|------------------|---------------------|
| MIME Type | text/html+skybridge | text/html;profile=mcp-app |
| Widget Runtime | window.openai | window.app (PostMessage transport) |
| Host | ChatGPT only | Claude Desktop, ChatGPT, others |
| Template Format | Inline HTML in MCP resource | Single HTML file with bundled assets |
| Metadata Keys | openai/* prefix | Generic MCP metadata |
| CSP Config | openai/widgetCSP | Standard _meta.ui.csp |
| Authentication | OAuth 2.1 with DCR | OAuth 2.1 with DCR |
| State Management | window.openai.setWidgetState | App-managed via PostMessage |
Use this skill (chatgpt-mcp-apps-kit) when:
Use mcp-mcp-apps-kit when:
@modelcontextprotocol/ext-apps package1. Set up project structure (server/ + web/)
2. Install dependencies (@modelcontextprotocol/sdk, React)
3. Build widget (React component using window.openai)
4. Bundle widget (Vite/esbuild → single HTML)
5. Register widget as MCP resource (text/html+skybridge)
6. Define tools pointing to widget
7. Implement tool handlers (return structuredContent + _meta)
8. Configure CSP (openai/widgetCSP)
9. Add authentication if needed (OAuth 2.1)
10. Test with MCP Inspector
11. Deploy to HTTPS endpoint
12. Submit to ChatGPT
Official Documentation:
Examples:
Tools:
Maintained by: thefork-app-mcp project
Last Updated: December 2024
npx skills add AndurilCode/chatgpt-mcp-apps-kit下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer