A Claude Code plugin for building complete ChatGPT Apps with MCP servers, React widgets, and cloud deployment.
This plugin helps you build ChatGPT Apps from concept to deployment:
- Conceptualize - Define value proposition, use cases, and tool topology
- Design - Create MCP tools and React widgets following best practices
- Implement - Generate complete TypeScript code
- Test - Validate with golden prompts and MCP Inspector
- Deploy - Ship to Render with PostgreSQL via Supabase
# Add to your Claude Code plugins
claude plugin add chatgpt-apps-builder# Start building a new ChatGPT App
/chatgpt-app:new
# Resume an in-progress app
/chatgpt-app:resume| Skill | Description |
|---|---|
/chatgpt-app:new |
Create a new ChatGPT App from concept |
/chatgpt-app:resume |
Resume building an in-progress app |
/chatgpt-app:add-tool |
Add an MCP tool |
/chatgpt-app:add-widget |
Add a React widget |
/chatgpt-app:add-auth |
Configure Auth0 or Supabase Auth |
/chatgpt-app:add-database |
Configure Supabase PostgreSQL |
/chatgpt-app:golden-prompts |
Generate test prompts |
/chatgpt-app:validate |
Run validation suite |
/chatgpt-app:test |
Run MCP Inspector tests |
/chatgpt-app:deploy |
Deploy to Render |
| Agent | Purpose |
|---|---|
chatgpt-app-architect |
Conceptualizes apps with UX principles |
chatgpt-mcp-generator |
Generates TypeScript MCP server code |
chatgpt-widget-builder |
Creates React widgets with Apps SDK |
chatgpt-schema-designer |
Designs PostgreSQL schemas |
chatgpt-auth-configurator |
Configures OAuth authentication |
chatgpt-deploy-orchestrator |
Orchestrates Render deployment |
chatgpt-test-runner |
Runs automated MCP tests |
Database management for your ChatGPT App:
- Create and manage tables
- Run migrations
- Test queries
claude mcp add supabase https://mcp.supabase.com/mcpDeployment automation:
- Create web services
- Provision PostgreSQL
- Manage environment variables
claude mcp add --transport http render https://mcp.render.com/mcp --header "Authorization: Bearer $RENDER_API_KEY"my-chatgpt-app/
├── package.json
├── tsconfig.json
├── setup.sh # One-command setup script
├── START.sh # Start server script
├── server/
│ ├── index.ts # MCP server entry
│ ├── tools/ # Tool handlers
│ ├── resources/ # Widget resources
│ ├── auth/ # Authentication (optional)
│ └── db/ # Database pool (optional)
├── web/
│ ├── src/
│ │ ├── hooks.ts # Apps SDK hooks
│ │ ├── theme.ts # Theming utilities
│ │ └── ui/ # React components
│ └── package.json
├── supabase/ # Database migrations (optional)
│ └── migrations/
├── .env.example
├── .chatgpt-app/
│ └── state.json # Build progress
├── Dockerfile
└── render.yaml
Generated apps include foolproof setup scripts:
One-command setup that:
- Checks prerequisites (Node.js, npm, Supabase CLI, Docker)
- Installs dependencies
- Builds web assets (widgets)
- Builds server
- Starts local Supabase (if database enabled)
- Applies database migrations
- Auto-generates
.envwith correct credentials
./setup.shStart the server in different modes:
./START.sh # HTTP mode (for ChatGPT connector)
./START.sh --stdio # Stdio mode (for MCP Inspector)
./START.sh --dev # Development mode with hot reloadThis plugin enforces ChatGPT Apps best practices:
- Design for conversational entry
- Create atomic, composable tools
- Use UI to enhance, not decorate
- Keep responses concise
- Display static website content
- Require complex multi-step workflows
- Duplicate ChatGPT's native features
- Include ads or upsells
/chatgpt-app:validateChecks:
- MCP schema validity
- Tool annotations
- Widget CSP configuration
- Database migrations
- UX principles compliance
/chatgpt-app:golden-promptsGenerates:
- Direct prompts (5+ per tool)
- Indirect prompts (5+ per tool)
- Negative prompts (3+ per category)
/chatgpt-app:testTests:
- Tool discovery
- Tool execution
- Error handling
- Widget rendering
/chatgpt-app:deployThis will:
- Run validation and tests
- Generate
render.yamlandDockerfile - Create PostgreSQL database
- Deploy web service
- Configure environment variables
- Verify health checks
- Provide ChatGPT connector URL
Your build progress is saved to .chatgpt-app/state.json:
{
"appName": "my-app",
"phase": "implementation",
"tools": [...],
"widgets": [...],
"auth": { "enabled": true, "provider": "auth0" },
"database": { "enabled": true, "provider": "supabase" },
"validation": { "passed": true },
"deployment": { "status": "deployed" }
}Resume anytime with /chatgpt-app:resume.
The plugin includes templates for:
- Base: Package config, TypeScript setup, server entry
- Tools: CRUD, query, widget, external API patterns
- Widgets: List, detail, form, carousel patterns
- Auth: Auth0 and Supabase configurations
- Database: Supabase migrations and connection pool
- Deploy: Dockerfile and Render configuration
- Fork the repository
- Create a feature branch
- Submit a pull request
MIT