chatgpt-apps-sdk-developer
Assists in developing ChatGPT Apps using the Apps SDK and Model Context Protocol (MCP). Invoke when the user wants to create, debug, or understand ChatGPT Apps, MCP servers, or their UI integration.
Best use case
chatgpt-apps-sdk-developer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Assists in developing ChatGPT Apps using the Apps SDK and Model Context Protocol (MCP). Invoke when the user wants to create, debug, or understand ChatGPT Apps, MCP servers, or their UI integration.
Teams using chatgpt-apps-sdk-developer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/chatgpt-apps-sdk-developer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How chatgpt-apps-sdk-developer Compares
| Feature / Agent | chatgpt-apps-sdk-developer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Assists in developing ChatGPT Apps using the Apps SDK and Model Context Protocol (MCP). Invoke when the user wants to create, debug, or understand ChatGPT Apps, MCP servers, or their UI integration.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# ChatGPT Apps SDK Developer
This skill assists in developing applications for ChatGPT using the Apps SDK. ChatGPT Apps combine a UI (running in an iframe) with an MCP (Model Context Protocol) server to provide rich, interactive experiences within ChatGPT.
## Core Concepts
- **MCP (Model Context Protocol)**: The backend logic. It exposes "tools" and "resources" to ChatGPT.
- **Apps SDK**: The bridge between ChatGPT and your application. It allows the UI to communicate with ChatGPT and the MCP server.
- **UI**: A web application (HTML/JS/React, etc.) displayed in an iframe. It communicates with ChatGPT via `postMessage`.
## Capabilities
1. **Project Scaffolding**: Create starter templates for ChatGPT Apps.
- **Simple HTML/JS**: A single-file approach for simple tools (like the To-Do list quickstart).
- **Hono + MCP**: A TypeScript-based MCP server using Hono and `@hono/mcp`.
- **React/Next.js**: For more complex UIs.
2. **MCP Server Implementation**:
- Define tools using `@modelcontextprotocol/sdk` or `@hono/mcp`.
- Connect to external APIs (e.g., microCMS, databases).
- Handle tool calls and return structured data.
3. **UI Implementation**:
- Setup the `postMessage` bridge.
- Render data returned from MCP tool calls.
- Send actions back to ChatGPT/MCP.
## Quickstart Templates
### 1. Simple HTML/JS (No Build Step)
Use this for quick prototypes or simple widgets.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My App</title>
<script type="module">
// Initialize the bridge
// postMessage format: { type: 'mcp:...', ... }
</script>
</head>
<body>
<!-- UI Elements -->
</body>
</html>
```
### 2. Hono MCP Server
Use this for robust backend logic.
```typescript
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { Hono } from "hono";
const server = new McpServer({
name: "my-app",
version: "1.0.0",
});
// Define tools
server.tool("get_data", {}, async () => {
return { content: [{ type: "text", text: "Hello" }] };
});
// ... serve with Hono
```
## Development Workflow
1. **Develop MCP Server**: Implement the backend logic and tools.
2. **Develop UI**: Create the frontend that visualizes the tool outputs.
3. **Test**: Use the ChatGPT Apps environment (currently in preview/beta) or an MCP client debugger.
4. **Deploy**: Host the UI and MCP server (they can be on the same domain or different ones, subject to CORS/iframe policies).
## Reference Implementation (Z Coffee Example)
Based on the "Z Coffee" example:
- **Data Source**: microCMS (headless CMS).
- **Backend**: Node.js/Hono with MCP SDK.
- **Frontend**: React (or simple HTML) displaying coffee shop locations and details.
## Troubleshooting
- **CORS**: Ensure your server allows requests from ChatGPT's origin.
- **Iframe**: The UI must be embeddable in an iframe (`X-Frame-Options` headers).
- **Manifest**: Ensure the `openai.json` or equivalent manifest (if applicable for the specific deployment method) is correctly configured.
## Resources
- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
- [Quickstart](https://developers.openai.com/apps-sdk/quickstart)Related Skills
chatgpt-project-architect
Use cuando necesites crear o mejorar instrucciones de proyecto ChatGPT, diseñar system prompts, definir agentes conversacionales, estructurar modos y comandos, implementar anti-injection, o validar calidad de project instructions. Keywords: chatgpt project, system prompt, project instructions, agent design, prompt engineering, anti-injection, command shortcuts, agent modes.
chatgpt-mcp-apps-kit
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.
chatgpt-deep-research
DEPRECATED - Use gpt-researcher skill instead. This browser automation approach has been replaced with the local GPT-Researcher framework using OpenAI o1.
chatgpt-archive-topic-background-report
Build a topic-focused research collection from ChatGPT archive viewer conversations (latest archive or all archives), run a background Responses API consolidation job with web search, and save markdown plus raw response artifacts. Use when the user asks to find archive threads by topic, reconcile repetition/contradictions, and generate a saved report with minimal polling noise.
chatgpt-apps-production-checklist
Turn ChatGPT Apps implementation work into a production-ready checklist with concrete tasks, tests, widget changes, and tool-result patterns mapped by priority (P0/P1/P2). Use when designing or hardening Apps SDK products for shipping; do not use for generic web-only apps, static code review, or non-ChatGPT integration planning.
chatgpt-apps-developer
Build production-grade ChatGPT Apps (GPTs, Actions, Plugins, Assistants API) end-to-end — from architecture design through implementation, testing, and deployment.
chatgpt-app-sdk
WHEN building ChatGPT apps using the OpenAI Apps SDK and MCP; create conversational, composable experiences with proper UX, UI, state management, and server patterns.
chatgpt-app-builder
Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.
chatgpt-app:add-widget
Add a new inline widget to your ChatGPT App with Tailwind CSS and Apps SDK integration.
building-chatgpt-apps
Guides creation of ChatGPT Apps with interactive widgets using the 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).
blockchain-developer
Build production-ready Web3 applications, smart contracts, and decentralized systems. Implements DeFi protocols, NFT platforms, DAOs, and enterprise blockchain integrations. Use PROACTIVELY for smart contracts, Web3 apps, DeFi protocols, or blockchain infrastructure.
backend-python-developer
Use this agent when you need expert backend development work with Python, including API design, database integration, authentication, testing, or any Python backend-focused development tasks.