{
  "schemaVersion": "1.0",
  "item": {
    "slug": "chatgpt-apps",
    "name": "Chatgpt Apps",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/hollaugo/chatgpt-apps",
    "canonicalUrl": "https://clawhub.ai/hollaugo/chatgpt-apps",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/chatgpt-apps",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=chatgpt-apps",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/chatgpt-apps"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/chatgpt-apps",
    "agentPageUrl": "https://openagent3.xyz/skills/chatgpt-apps/agent",
    "manifestUrl": "https://openagent3.xyz/skills/chatgpt-apps/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/chatgpt-apps/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "ChatGPT Apps Builder",
        "body": "Complete workflow for building, testing, and deploying ChatGPT Apps from concept to production."
      },
      {
        "title": "Commands",
        "body": "/chatgpt-apps new - Create a new ChatGPT App\n/chatgpt-apps add-tool - Add an MCP tool to your app\n/chatgpt-apps add-widget - Add a widget to your app\n/chatgpt-apps add-auth - Configure authentication\n/chatgpt-apps add-database - Set up database\n/chatgpt-apps validate - Validate your app\n/chatgpt-apps test - Run tests\n/chatgpt-apps deploy - Deploy to production\n/chatgpt-apps resume - Resume working on an app"
      },
      {
        "title": "Table of Contents",
        "body": "Create New App\nAdd MCP Tool\nAdd Widget\nAdd Authentication\nAdd Database\nGenerate Golden Prompts\nValidate App\nTest App\nDeploy App\nResume App"
      },
      {
        "title": "1. Create New App",
        "body": "Purpose: Create a new ChatGPT App from concept to working code."
      },
      {
        "title": "Workflow",
        "body": "Phase 1: Conceptualization\n\nAsk for the app idea\n\"What ChatGPT App would you like to build? Describe what it does and the problem it solves.\"\n\n\nAnalyze against UX Principles\n\nConversational Leverage: What can users accomplish through natural language?\nNative Fit: How does this integrate with ChatGPT's conversational flow?\nComposability: Can tools work independently and combine with other apps?\n\n\n\nCheck for Anti-Patterns\n\nStatic website content display\nComplex multi-step workflows requiring external tabs\nDuplicating ChatGPT's native capabilities\nAds or upsells\n\n\n\nDefine Use Cases\nCreate 3-5 primary use cases with user stories.\n\nPhase 2: Design\n\nTool Topology\n\nQuery tools (readOnlyHint: true)\nMutation tools (destructiveHint: false)\nDestructive tools (destructiveHint: true)\nWidget tools (return UI with _meta)\nExternal API tools (openWorldHint: true)\n\n\n\nWidget Design\nFor each widget:\n\nid - unique identifier (kebab-case)\nname - display name\ndescription - what it shows\nmockData - sample data for preview\n\n\n\nData Model\nDesign entities and relationships.\n\n\nAuth Requirements\n\nSingle-user (no auth needed)\nMulti-user (Auth0 or Supabase Auth)\n\nPhase 3: Implementation\n\nGenerate complete application with this structure:\n\n{app-name}/\n├── package.json\n├── tsconfig.server.json\n├── setup.sh\n├── START.sh\n├── .env.example\n├── .gitignore\n└── server/\n    └── index.ts\n\nCritical Requirements:\n\nServer class from @modelcontextprotocol/sdk/server/index.js\nStreamableHTTPServerTransport for session management\nWidget URIs: ui://widget/{widget-id}.html\nWidget MIME type: text/html+skybridge\nstructuredContent in tool responses\n_meta with openai/outputTemplate on tools\n\nPhase 4: Testing\n\nRun setup: ./setup.sh\nStart dev: ./START.sh --dev\nPreview widgets: http://localhost:3000/preview\nTest MCP connection\n\nPhase 5: Deployment\n\nGenerate Dockerfile and render.yaml\nDeploy to Render\nConfigure ChatGPT connector"
      },
      {
        "title": "2. Add MCP Tool",
        "body": "Purpose: Add a new MCP tool to your ChatGPT App."
      },
      {
        "title": "Workflow",
        "body": "Gather Information\n\nWhat does this tool do?\nWhat inputs does it need?\nWhat does it return?\n\n\n\nClassify Tool Type\n\nQuery (readOnlyHint: true) - Fetches data\nMutation (destructiveHint: false) - Creates/updates data\nDestructive (destructiveHint: true) - Deletes data\nWidget - Returns UI content\nExternal (openWorldHint: true) - Calls external APIs\n\n\n\nDesign Input Schema\nCreate Zod schema with appropriate types and descriptions.\n\n\nGenerate Tool Handler\nUse chatgpt-mcp-generator agent to create:\n\nTool handler in server/tools/\nZod schema export\nType exports\nDatabase queries (if needed)\n\n\n\nRegister Tool\nUpdate server/index.ts with metadata:\n{\n  name: \"my-tool\",\n  _meta: {\n    \"openai/toolInvocation/invoking\": \"Loading...\",\n    \"openai/toolInvocation/invoked\": \"Done\",\n    \"openai/outputTemplate\": \"ui://widget/my-widget.html\", // if widget\n  }\n}\n\n\n\nUpdate State\nAdd tool to .chatgpt-app/state.json."
      },
      {
        "title": "Tool Naming",
        "body": "Use kebab-case: list-items, create-task, show-recipe-detail"
      },
      {
        "title": "Annotations Guide",
        "body": "ScenarioreadOnlyHintdestructiveHintopenWorldHintList/GettruefalsefalseCreate/UpdatefalsefalsefalseDeletefalsetruefalseExternal APIvariesvariestrue"
      },
      {
        "title": "3. Add Widget",
        "body": "Purpose: Add inline HTML widgets with HTML/CSS/JS and Apps SDK integration."
      },
      {
        "title": "5 Widget Patterns",
        "body": "Card Grid - Multiple items in grid\nStats Dashboard - Key metrics display\nTable - Tabular data\nBar Chart - Simple visualizations\nDetail Widget - Single item details"
      },
      {
        "title": "Workflow",
        "body": "Gather Information\n\nWidget purpose and data\nVisual design (cards, table, chart, etc.)\nInteractivity needs\n\n\n\nDefine Data Shape\nDocument expected structure with TypeScript interface.\n\n\nAdd Widget Config\nconst widgets: WidgetConfig[] = [\n  {\n    id: \"my-widget\",\n    name: \"My Widget\",\n    description: \"Displays data\",\n    templateUri: \"ui://widget/my-widget.html\",\n    invoking: \"Loading...\",\n    invoked: \"Ready\",\n    mockData: { /* sample */ },\n  },\n];\n\n\n\nAdd Widget HTML\nGenerate HTML with:\n\nPreview mode support (window.PREVIEW_DATA)\nOpenAI Apps SDK integration (window.openai.toolOutput)\nEvent listeners (openai:set_globals)\nPolling fallback (100ms, 10s timeout)\n\n\n\nCreate/Update Tool\nLink tool to widget via widgetId.\n\n\nTest Widget\nPreview at /preview/{widget-id} with mock data."
      },
      {
        "title": "Widget HTML Structure",
        "body": "(function() {\n  let rendered = false;\n\n  function render(data) {\n    if (rendered || !data) return;\n    rendered = true;\n    // Render logic\n  }\n\n  function tryRender() {\n    if (window.PREVIEW_DATA) { render(window.PREVIEW_DATA); return; }\n    if (window.openai?.toolOutput) { render(window.openai.toolOutput); }\n  }\n\n  window.addEventListener('openai:set_globals', tryRender);\n\n  const poll = setInterval(() => {\n    if (window.openai?.toolOutput || window.PREVIEW_DATA) {\n      tryRender();\n      clearInterval(poll);\n    }\n  }, 100);\n  setTimeout(() => clearInterval(poll), 10000);\n\n  tryRender();\n})();"
      },
      {
        "title": "4. Add Authentication",
        "body": "Purpose: Configure authentication using Auth0 or Supabase Auth."
      },
      {
        "title": "When to Add",
        "body": "Multiple users\nPersistent private data per user\nUser-specific API credentials"
      },
      {
        "title": "Providers",
        "body": "Auth0:\n\nEnterprise-grade\nOAuth 2.1, PKCE flow\nSocial logins (Google, GitHub, etc.)\n\nSupabase Auth:\n\nSimpler setup\nEmail/password default\nIntegrates with Supabase database"
      },
      {
        "title": "Workflow",
        "body": "Choose Provider\nAsk user preference based on needs.\n\n\nGuide Setup\n\nAuth0: Create application, configure callback URLs, get credentials\nSupabase: Already configured with database setup\n\n\n\nGenerate Auth Code\nUse chatgpt-auth-generator agent to create:\n\nSession management middleware\nUser subject extraction\nToken validation\n\n\n\nUpdate Server\nAdd auth middleware to protect routes.\n\n\nUpdate Environment\n# Auth0\nAUTH0_DOMAIN=your-tenant.auth0.com\nAUTH0_CLIENT_ID=...\nAUTH0_CLIENT_SECRET=...\n\n# Supabase (from database setup)\nSUPABASE_URL=...\nSUPABASE_ANON_KEY=...\n\n\n\nTest\nVerify login flow and user isolation."
      },
      {
        "title": "5. Add Database",
        "body": "Purpose: Configure PostgreSQL database using Supabase."
      },
      {
        "title": "When to Add",
        "body": "Persistent user data\nMulti-entity relationships\nQuery/filter capabilities"
      },
      {
        "title": "Workflow",
        "body": "Check Supabase Setup\nVerify account and project exist.\n\n\nGather Credentials\n\nProject URL\nAnon key (public)\nService role key (server-side)\n\n\n\nDefine Entities\nFor each entity, specify:\n\nFields and types\nRelationships\nIndexes\n\n\n\nGenerate Schema\nUse chatgpt-database-generator agent to create SQL with:\n\nid (UUID primary key)\nuser_subject (varchar, indexed)\ncreated_at (timestamptz)\nupdated_at (timestamptz)\nRLS policies for user isolation\n\n\n\nSetup Connection Pool\nimport { createClient } from '@supabase/supabase-js';\n\nconst supabase = createClient(\n  process.env.SUPABASE_URL!,\n  process.env.SUPABASE_SERVICE_ROLE_KEY!\n);\n\n\n\nApply Migrations\nRun SQL in Supabase dashboard or via migration tool."
      },
      {
        "title": "Query Pattern",
        "body": "Always filter by user_subject:\n\nconst { data } = await supabase\n  .from('tasks')\n  .select('*')\n  .eq('user_subject', userSubject);"
      },
      {
        "title": "6. Generate Golden Prompts",
        "body": "Purpose: Generate test prompts to validate ChatGPT correctly invokes tools."
      },
      {
        "title": "Why Important",
        "body": "Measure precision/recall\nEnable iteration\nPost-launch monitoring"
      },
      {
        "title": "3 Categories",
        "body": "Direct Prompts - Explicit tool invocation\n\n\"Show me my task list\"\n\"Create a new task called...\"\n\n\n\nIndirect Prompts - Outcome-based, ChatGPT should infer tool\n\n\"What do I need to do today?\"\n\"Help me organize my work\"\n\n\n\nNegative Prompts - Should NOT trigger tool\n\n\"What is a task?\"\n\"Tell me about project management\""
      },
      {
        "title": "Workflow",
        "body": "Analyze Tools\nReview each tool's purpose and inputs.\n\n\nGenerate Prompts\nFor each tool, create:\n\n5+ direct prompts\n5+ indirect prompts\n3+ negative prompts\n2+ edge case prompts\n\n\n\nBest Practices\n\nTool descriptions start with \"Use this when...\"\nState limitations clearly\nInclude examples in descriptions\n\n\n\nSave Output\nWrite to .chatgpt-app/golden-prompts.json:\n{\n  \"toolName\": {\n    \"direct\": [\"prompt1\", \"prompt2\"],\n    \"indirect\": [\"prompt1\", \"prompt2\"],\n    \"negative\": [\"prompt1\", \"prompt2\"],\n    \"edge\": [\"prompt1\", \"prompt2\"]\n  }\n}"
      },
      {
        "title": "7. Validate App",
        "body": "Purpose: Validation suite before deployment."
      },
      {
        "title": "10 Validation Checks",
        "body": "Required Files\n\npackage.json\ntsconfig.server.json\nsetup.sh (executable)\nSTART.sh (executable)\nserver/index.ts\n.env.example\n\n\n\nServer Implementation\n\nUses Server from MCP SDK\nHas StreamableHTTPServerTransport\nSession management with Map\nCorrect request handlers\n\n\n\nWidget Configuration\n\nwidgets array exists\nEach has id, name, description, templateUri, mockData\nURIs match pattern ui://widget/{id}.html\n\n\n\nTool Response Format\n\nReturns structuredContent (not just content)\nWidget tools have _meta with openai/outputTemplate\n\n\n\nResource Handler Format\n\nMIME type: text/html+skybridge\nReturns _meta with serialization and CSP\n\n\n\nWidget HTML Structure\n\nPreview mode support\nEvent listeners for Apps SDK\nPolling fallback\nRender guard\n\n\n\nEndpoint Existence\n\n/health - Health check\n/preview - Widget index\n/preview/:widgetId - Widget preview\n/mcp - MCP endpoint\n\n\n\nPackage.json Scripts\n\nHas build:server\nHas start with HTTP_MODE=true\nHas dev with watch mode\nNO web build scripts (web/, ui/, client/)\n\n\n\nAnnotation Validation\n\nreadOnlyHint set correctly\ndestructiveHint for delete operations\nopenWorldHint for external APIs\n\n\n\nDatabase Validation (if enabled)\n\nTables have required fields\nuser_subject indexed\nRLS policies enabled"
      },
      {
        "title": "Common Errors",
        "body": "ErrorFixMissing structuredContentAdd to tool responseWrong widget URIUse ui://widget/{id}.htmlNo session managementAdd Map<string, Transport>Missing _metaAdd to tool definition and responseWrong MIME typeUse text/html+skybridge\n\nCritical: Check file existence FIRST before other validations!"
      },
      {
        "title": "8. Test App",
        "body": "Purpose: Run automated tests using MCP Inspector and golden prompts."
      },
      {
        "title": "4 Test Categories",
        "body": "MCP Protocol\n\nServer starts without errors\nHandles initialize\nLists tools correctly\nLists resources correctly\n\n\n\nSchema Validation\n\nTool schemas are valid Zod\nRequired fields marked\nTypes match implementation\n\n\n\nWidget Tests\n\nAll widgets render in preview mode\nMock data loads correctly\nNo console errors\n\n\n\nGolden Prompt Tests\n\nDirect prompts trigger correct tools\nIndirect prompts work as expected\nNegative prompts don't trigger tools"
      },
      {
        "title": "Workflow",
        "body": "Start Server in Test Mode\nHTTP_MODE=true NODE_ENV=test npm run dev\n\n\n\nRun MCP Inspector\nTest protocol compliance:\n\nInitialize connection\nList tools\nCall each tool with valid inputs\nCheck responses\n\n\n\nSchema Validation\nVerify schemas compile and match implementation.\n\n\nGolden Prompt Tests\nUse ChatGPT to test prompts:\n\nRecord which tool was called\nCompare to expected tool\nCalculate precision/recall\n\n\n\nGenerate Report\n{\n  \"passed\": 42,\n  \"failed\": 3,\n  \"categories\": {\n    \"mcp\": \"✅\",\n    \"schema\": \"✅\",\n    \"widgets\": \"✅\",\n    \"prompts\": \"⚠️ 3 failures\"\n  },\n  \"timing\": \"2.3s\"\n}"
      },
      {
        "title": "Fixing Failures",
        "body": "For each failure, explain:\n\nWhat failed\nWhy it failed\nHow to fix (with code example)"
      },
      {
        "title": "9. Deploy App",
        "body": "Purpose: Deploy ChatGPT App to Render with PostgreSQL and health checks."
      },
      {
        "title": "Prerequisites",
        "body": "✅ Validation passed\n✅ Tests passed\n✅ Git repository clean\n✅ Environment variables ready"
      },
      {
        "title": "Workflow",
        "body": "Pre-flight Check\n\nRun validation\nRun tests\nCheck database connection (if enabled)\n\n\n\nGenerate render.yaml\nservices:\n  - type: web\n    name: {app-name}\n    runtime: docker\n    plan: free\n    healthCheckPath: /health\n    envVars:\n      - key: PORT\n        value: 3000\n      - key: HTTP_MODE\n        value: true\n      - key: NODE_ENV\n        value: production\n      - key: WIDGET_DOMAIN\n        generateValue: true\n      # Add auth/database vars if needed\n\n\n\nGenerate Dockerfile\nFROM node:20-slim\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY dist ./dist\nEXPOSE 3000\nCMD [\"node\", \"dist/server/index.js\"]\n\n\n\nDeploy\nOption A: Automated (if Render MCP available)\nUse Render MCP agent to deploy.\nOption B: Manual\n\nPush to GitHub\nConnect repo in Render dashboard\nSet environment variables\nDeploy\n\n\n\nVerify Deployment\n\nHealth check: https://{app}.onrender.com/health\nMCP endpoint: https://{app}.onrender.com/mcp\nTool discovery works\nWidgets render\n\n\n\nConfigure ChatGPT Connector\n\nURL: https://{app}.onrender.com/mcp\nTest in ChatGPT"
      },
      {
        "title": "10. Resume App",
        "body": "Purpose: Resume building an in-progress ChatGPT App."
      },
      {
        "title": "Workflow",
        "body": "Load State\nRead .chatgpt-app/state.json:\n{\n  \"appName\": \"My Task Manager\",\n  \"phase\": \"Implementation\",\n  \"tools\": [\"list-tasks\", \"create-task\"],\n  \"widgets\": [\"task-list\"],\n  \"auth\": false,\n  \"database\": true,\n  \"validated\": false,\n  \"deployed\": false\n}\n\n\n\nDisplay Progress\nShow current status:\n\nApp name\nCurrent phase\nCompleted items (tools, widgets)\nPending items (auth, validation, deployment)\n\n\n\nOffer Next Steps\nBased on phase:\nConcept Phase:\n\n\"Let's design the tools and widgets\"\n\"Shall we start implementation?\"\n\nImplementation Phase:\n\n\"Add another tool?\"\n\"Add a widget?\"\n\"Set up authentication?\"\n\"Set up database?\"\n\nTesting Phase:\n\n\"Generate golden prompts?\"\n\"Run validation?\"\n\"Run tests?\"\n\nDeployment Phase:\n\n\"Deploy to Render?\"\n\"Configure ChatGPT connector?\"\n\n\n\nContinue Work\nBased on user's choice, invoke the appropriate workflow section."
      },
      {
        "title": "Best Practices",
        "body": "Always save state after each major step\nValidate before moving forward (especially before deployment)\nUse agents for code generation (chatgpt-mcp-generator, chatgpt-auth-generator, etc.)\nTest at every phase (preview widgets, test tools, run golden prompts)\nKeep it conversational - guide the user naturally through the workflow\nExplain trade-offs when offering choices (Auth0 vs Supabase, etc.)\nShow examples when introducing new concepts"
      },
      {
        "title": "State Management",
        "body": "The .chatgpt-app/state.json file tracks progress:\n\n{\n  \"appName\": \"string\",\n  \"description\": \"string\",\n  \"phase\": \"Concept\" | \"Implementation\" | \"Testing\" | \"Deployment\",\n  \"tools\": [\"tool-name\"],\n  \"widgets\": [\"widget-id\"],\n  \"auth\": {\n    \"enabled\": boolean,\n    \"provider\": \"auth0\" | \"supabase\" | null\n  },\n  \"database\": {\n    \"enabled\": boolean,\n    \"entities\": [\"entity-name\"]\n  },\n  \"validated\": boolean,\n  \"tested\": boolean,\n  \"deployed\": boolean,\n  \"deploymentUrl\": \"string | null\",\n  \"goldenPromptsGenerated\": boolean,\n  \"lastUpdated\": \"ISO timestamp\"\n}"
      },
      {
        "title": "Command Reference",
        "body": "# Setup\n./setup.sh\n\n# Development\n./START.sh --dev          # Dev mode with watch\n./START.sh --preview      # Open preview in browser\n./START.sh --stdio        # STDIO mode (testing)\n./START.sh                # Production mode\n\n# Testing\nnpm run validate          # Type checking\ncurl http://localhost:3000/health\n\n# Deployment\ngit push origin main      # Trigger Render deploy"
      },
      {
        "title": "Getting Started",
        "body": "When the user invokes any chatgpt-app command:\n\nCheck if .chatgpt-app/state.json exists\nIf yes → use Resume App workflow\nIf no → use Create New App workflow\n\nAlways guide users through the natural progression:\nConcept → Implementation → Testing → Deployment"
      }
    ],
    "body": "ChatGPT Apps Builder\n\nComplete workflow for building, testing, and deploying ChatGPT Apps from concept to production.\n\nCommands\n/chatgpt-apps new - Create a new ChatGPT App\n/chatgpt-apps add-tool - Add an MCP tool to your app\n/chatgpt-apps add-widget - Add a widget to your app\n/chatgpt-apps add-auth - Configure authentication\n/chatgpt-apps add-database - Set up database\n/chatgpt-apps validate - Validate your app\n/chatgpt-apps test - Run tests\n/chatgpt-apps deploy - Deploy to production\n/chatgpt-apps resume - Resume working on an app\nTable of Contents\nCreate New App\nAdd MCP Tool\nAdd Widget\nAdd Authentication\nAdd Database\nGenerate Golden Prompts\nValidate App\nTest App\nDeploy App\nResume App\n1. Create New App\n\nPurpose: Create a new ChatGPT App from concept to working code.\n\nWorkflow\nPhase 1: Conceptualization\n\nAsk for the app idea \"What ChatGPT App would you like to build? Describe what it does and the problem it solves.\"\n\nAnalyze against UX Principles\n\nConversational Leverage: What can users accomplish through natural language?\nNative Fit: How does this integrate with ChatGPT's conversational flow?\nComposability: Can tools work independently and combine with other apps?\n\nCheck for Anti-Patterns\n\nStatic website content display\nComplex multi-step workflows requiring external tabs\nDuplicating ChatGPT's native capabilities\nAds or upsells\n\nDefine Use Cases Create 3-5 primary use cases with user stories.\n\nPhase 2: Design\n\nTool Topology\n\nQuery tools (readOnlyHint: true)\nMutation tools (destructiveHint: false)\nDestructive tools (destructiveHint: true)\nWidget tools (return UI with _meta)\nExternal API tools (openWorldHint: true)\n\nWidget Design For each widget:\n\nid - unique identifier (kebab-case)\nname - display name\ndescription - what it shows\nmockData - sample data for preview\n\nData Model Design entities and relationships.\n\nAuth Requirements\n\nSingle-user (no auth needed)\nMulti-user (Auth0 or Supabase Auth)\nPhase 3: Implementation\n\nGenerate complete application with this structure:\n\n{app-name}/\n├── package.json\n├── tsconfig.server.json\n├── setup.sh\n├── START.sh\n├── .env.example\n├── .gitignore\n└── server/\n    └── index.ts\n\n\nCritical Requirements:\n\nServer class from @modelcontextprotocol/sdk/server/index.js\nStreamableHTTPServerTransport for session management\nWidget URIs: ui://widget/{widget-id}.html\nWidget MIME type: text/html+skybridge\nstructuredContent in tool responses\n_meta with openai/outputTemplate on tools\nPhase 4: Testing\nRun setup: ./setup.sh\nStart dev: ./START.sh --dev\nPreview widgets: http://localhost:3000/preview\nTest MCP connection\nPhase 5: Deployment\nGenerate Dockerfile and render.yaml\nDeploy to Render\nConfigure ChatGPT connector\n2. Add MCP Tool\n\nPurpose: Add a new MCP tool to your ChatGPT App.\n\nWorkflow\n\nGather Information\n\nWhat does this tool do?\nWhat inputs does it need?\nWhat does it return?\n\nClassify Tool Type\n\nQuery (readOnlyHint: true) - Fetches data\nMutation (destructiveHint: false) - Creates/updates data\nDestructive (destructiveHint: true) - Deletes data\nWidget - Returns UI content\nExternal (openWorldHint: true) - Calls external APIs\n\nDesign Input Schema Create Zod schema with appropriate types and descriptions.\n\nGenerate Tool Handler Use chatgpt-mcp-generator agent to create:\n\nTool handler in server/tools/\nZod schema export\nType exports\nDatabase queries (if needed)\n\nRegister Tool Update server/index.ts with metadata:\n\n{\n  name: \"my-tool\",\n  _meta: {\n    \"openai/toolInvocation/invoking\": \"Loading...\",\n    \"openai/toolInvocation/invoked\": \"Done\",\n    \"openai/outputTemplate\": \"ui://widget/my-widget.html\", // if widget\n  }\n}\n\n\nUpdate State Add tool to .chatgpt-app/state.json.\n\nTool Naming\n\nUse kebab-case: list-items, create-task, show-recipe-detail\n\nAnnotations Guide\nScenario\treadOnlyHint\tdestructiveHint\topenWorldHint\nList/Get\ttrue\tfalse\tfalse\nCreate/Update\tfalse\tfalse\tfalse\nDelete\tfalse\ttrue\tfalse\nExternal API\tvaries\tvaries\ttrue\n3. Add Widget\n\nPurpose: Add inline HTML widgets with HTML/CSS/JS and Apps SDK integration.\n\n5 Widget Patterns\nCard Grid - Multiple items in grid\nStats Dashboard - Key metrics display\nTable - Tabular data\nBar Chart - Simple visualizations\nDetail Widget - Single item details\nWorkflow\n\nGather Information\n\nWidget purpose and data\nVisual design (cards, table, chart, etc.)\nInteractivity needs\n\nDefine Data Shape Document expected structure with TypeScript interface.\n\nAdd Widget Config\n\nconst widgets: WidgetConfig[] = [\n  {\n    id: \"my-widget\",\n    name: \"My Widget\",\n    description: \"Displays data\",\n    templateUri: \"ui://widget/my-widget.html\",\n    invoking: \"Loading...\",\n    invoked: \"Ready\",\n    mockData: { /* sample */ },\n  },\n];\n\n\nAdd Widget HTML Generate HTML with:\n\nPreview mode support (window.PREVIEW_DATA)\nOpenAI Apps SDK integration (window.openai.toolOutput)\nEvent listeners (openai:set_globals)\nPolling fallback (100ms, 10s timeout)\n\nCreate/Update Tool Link tool to widget via widgetId.\n\nTest Widget Preview at /preview/{widget-id} with mock data.\n\nWidget HTML Structure\n(function() {\n  let rendered = false;\n\n  function render(data) {\n    if (rendered || !data) return;\n    rendered = true;\n    // Render logic\n  }\n\n  function tryRender() {\n    if (window.PREVIEW_DATA) { render(window.PREVIEW_DATA); return; }\n    if (window.openai?.toolOutput) { render(window.openai.toolOutput); }\n  }\n\n  window.addEventListener('openai:set_globals', tryRender);\n\n  const poll = setInterval(() => {\n    if (window.openai?.toolOutput || window.PREVIEW_DATA) {\n      tryRender();\n      clearInterval(poll);\n    }\n  }, 100);\n  setTimeout(() => clearInterval(poll), 10000);\n\n  tryRender();\n})();\n\n4. Add Authentication\n\nPurpose: Configure authentication using Auth0 or Supabase Auth.\n\nWhen to Add\nMultiple users\nPersistent private data per user\nUser-specific API credentials\nProviders\n\nAuth0:\n\nEnterprise-grade\nOAuth 2.1, PKCE flow\nSocial logins (Google, GitHub, etc.)\n\nSupabase Auth:\n\nSimpler setup\nEmail/password default\nIntegrates with Supabase database\nWorkflow\n\nChoose Provider Ask user preference based on needs.\n\nGuide Setup\n\nAuth0: Create application, configure callback URLs, get credentials\nSupabase: Already configured with database setup\n\nGenerate Auth Code Use chatgpt-auth-generator agent to create:\n\nSession management middleware\nUser subject extraction\nToken validation\n\nUpdate Server Add auth middleware to protect routes.\n\nUpdate Environment\n\n# Auth0\nAUTH0_DOMAIN=your-tenant.auth0.com\nAUTH0_CLIENT_ID=...\nAUTH0_CLIENT_SECRET=...\n\n# Supabase (from database setup)\nSUPABASE_URL=...\nSUPABASE_ANON_KEY=...\n\n\nTest Verify login flow and user isolation.\n\n5. Add Database\n\nPurpose: Configure PostgreSQL database using Supabase.\n\nWhen to Add\nPersistent user data\nMulti-entity relationships\nQuery/filter capabilities\nWorkflow\n\nCheck Supabase Setup Verify account and project exist.\n\nGather Credentials\n\nProject URL\nAnon key (public)\nService role key (server-side)\n\nDefine Entities For each entity, specify:\n\nFields and types\nRelationships\nIndexes\n\nGenerate Schema Use chatgpt-database-generator agent to create SQL with:\n\nid (UUID primary key)\nuser_subject (varchar, indexed)\ncreated_at (timestamptz)\nupdated_at (timestamptz)\nRLS policies for user isolation\n\nSetup Connection Pool\n\nimport { createClient } from '@supabase/supabase-js';\n\nconst supabase = createClient(\n  process.env.SUPABASE_URL!,\n  process.env.SUPABASE_SERVICE_ROLE_KEY!\n);\n\n\nApply Migrations Run SQL in Supabase dashboard or via migration tool.\n\nQuery Pattern\n\nAlways filter by user_subject:\n\nconst { data } = await supabase\n  .from('tasks')\n  .select('*')\n  .eq('user_subject', userSubject);\n\n6. Generate Golden Prompts\n\nPurpose: Generate test prompts to validate ChatGPT correctly invokes tools.\n\nWhy Important\nMeasure precision/recall\nEnable iteration\nPost-launch monitoring\n3 Categories\n\nDirect Prompts - Explicit tool invocation\n\n\"Show me my task list\"\n\"Create a new task called...\"\n\nIndirect Prompts - Outcome-based, ChatGPT should infer tool\n\n\"What do I need to do today?\"\n\"Help me organize my work\"\n\nNegative Prompts - Should NOT trigger tool\n\n\"What is a task?\"\n\"Tell me about project management\"\nWorkflow\n\nAnalyze Tools Review each tool's purpose and inputs.\n\nGenerate Prompts For each tool, create:\n\n5+ direct prompts\n5+ indirect prompts\n3+ negative prompts\n2+ edge case prompts\n\nBest Practices\n\nTool descriptions start with \"Use this when...\"\nState limitations clearly\nInclude examples in descriptions\n\nSave Output Write to .chatgpt-app/golden-prompts.json:\n\n{\n  \"toolName\": {\n    \"direct\": [\"prompt1\", \"prompt2\"],\n    \"indirect\": [\"prompt1\", \"prompt2\"],\n    \"negative\": [\"prompt1\", \"prompt2\"],\n    \"edge\": [\"prompt1\", \"prompt2\"]\n  }\n}\n\n7. Validate App\n\nPurpose: Validation suite before deployment.\n\n10 Validation Checks\n\nRequired Files\n\npackage.json\ntsconfig.server.json\nsetup.sh (executable)\nSTART.sh (executable)\nserver/index.ts\n.env.example\n\nServer Implementation\n\nUses Server from MCP SDK\nHas StreamableHTTPServerTransport\nSession management with Map\nCorrect request handlers\n\nWidget Configuration\n\nwidgets array exists\nEach has id, name, description, templateUri, mockData\nURIs match pattern ui://widget/{id}.html\n\nTool Response Format\n\nReturns structuredContent (not just content)\nWidget tools have _meta with openai/outputTemplate\n\nResource Handler Format\n\nMIME type: text/html+skybridge\nReturns _meta with serialization and CSP\n\nWidget HTML Structure\n\nPreview mode support\nEvent listeners for Apps SDK\nPolling fallback\nRender guard\n\nEndpoint Existence\n\n/health - Health check\n/preview - Widget index\n/preview/:widgetId - Widget preview\n/mcp - MCP endpoint\n\nPackage.json Scripts\n\nHas build:server\nHas start with HTTP_MODE=true\nHas dev with watch mode\nNO web build scripts (web/, ui/, client/)\n\nAnnotation Validation\n\nreadOnlyHint set correctly\ndestructiveHint for delete operations\nopenWorldHint for external APIs\n\nDatabase Validation (if enabled)\n\nTables have required fields\nuser_subject indexed\nRLS policies enabled\nCommon Errors\nError\tFix\nMissing structuredContent\tAdd to tool response\nWrong widget URI\tUse ui://widget/{id}.html\nNo session management\tAdd Map<string, Transport>\nMissing _meta\tAdd to tool definition and response\nWrong MIME type\tUse text/html+skybridge\n\nCritical: Check file existence FIRST before other validations!\n\n8. Test App\n\nPurpose: Run automated tests using MCP Inspector and golden prompts.\n\n4 Test Categories\n\nMCP Protocol\n\nServer starts without errors\nHandles initialize\nLists tools correctly\nLists resources correctly\n\nSchema Validation\n\nTool schemas are valid Zod\nRequired fields marked\nTypes match implementation\n\nWidget Tests\n\nAll widgets render in preview mode\nMock data loads correctly\nNo console errors\n\nGolden Prompt Tests\n\nDirect prompts trigger correct tools\nIndirect prompts work as expected\nNegative prompts don't trigger tools\nWorkflow\n\nStart Server in Test Mode\n\nHTTP_MODE=true NODE_ENV=test npm run dev\n\n\nRun MCP Inspector Test protocol compliance:\n\nInitialize connection\nList tools\nCall each tool with valid inputs\nCheck responses\n\nSchema Validation Verify schemas compile and match implementation.\n\nGolden Prompt Tests Use ChatGPT to test prompts:\n\nRecord which tool was called\nCompare to expected tool\nCalculate precision/recall\n\nGenerate Report\n\n{\n  \"passed\": 42,\n  \"failed\": 3,\n  \"categories\": {\n    \"mcp\": \"✅\",\n    \"schema\": \"✅\",\n    \"widgets\": \"✅\",\n    \"prompts\": \"⚠️ 3 failures\"\n  },\n  \"timing\": \"2.3s\"\n}\n\nFixing Failures\n\nFor each failure, explain:\n\nWhat failed\nWhy it failed\nHow to fix (with code example)\n9. Deploy App\n\nPurpose: Deploy ChatGPT App to Render with PostgreSQL and health checks.\n\nPrerequisites\n✅ Validation passed\n✅ Tests passed\n✅ Git repository clean\n✅ Environment variables ready\nWorkflow\n\nPre-flight Check\n\nRun validation\nRun tests\nCheck database connection (if enabled)\n\nGenerate render.yaml\n\nservices:\n  - type: web\n    name: {app-name}\n    runtime: docker\n    plan: free\n    healthCheckPath: /health\n    envVars:\n      - key: PORT\n        value: 3000\n      - key: HTTP_MODE\n        value: true\n      - key: NODE_ENV\n        value: production\n      - key: WIDGET_DOMAIN\n        generateValue: true\n      # Add auth/database vars if needed\n\n\nGenerate Dockerfile\n\nFROM node:20-slim\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY dist ./dist\nEXPOSE 3000\nCMD [\"node\", \"dist/server/index.js\"]\n\n\nDeploy Option A: Automated (if Render MCP available) Use Render MCP agent to deploy.\n\nOption B: Manual\n\nPush to GitHub\nConnect repo in Render dashboard\nSet environment variables\nDeploy\n\nVerify Deployment\n\nHealth check: https://{app}.onrender.com/health\nMCP endpoint: https://{app}.onrender.com/mcp\nTool discovery works\nWidgets render\n\nConfigure ChatGPT Connector\n\nURL: https://{app}.onrender.com/mcp\nTest in ChatGPT\n10. Resume App\n\nPurpose: Resume building an in-progress ChatGPT App.\n\nWorkflow\n\nLoad State Read .chatgpt-app/state.json:\n\n{\n  \"appName\": \"My Task Manager\",\n  \"phase\": \"Implementation\",\n  \"tools\": [\"list-tasks\", \"create-task\"],\n  \"widgets\": [\"task-list\"],\n  \"auth\": false,\n  \"database\": true,\n  \"validated\": false,\n  \"deployed\": false\n}\n\n\nDisplay Progress Show current status:\n\nApp name\nCurrent phase\nCompleted items (tools, widgets)\nPending items (auth, validation, deployment)\n\nOffer Next Steps Based on phase:\n\nConcept Phase:\n\n\"Let's design the tools and widgets\"\n\"Shall we start implementation?\"\n\nImplementation Phase:\n\n\"Add another tool?\"\n\"Add a widget?\"\n\"Set up authentication?\"\n\"Set up database?\"\n\nTesting Phase:\n\n\"Generate golden prompts?\"\n\"Run validation?\"\n\"Run tests?\"\n\nDeployment Phase:\n\n\"Deploy to Render?\"\n\"Configure ChatGPT connector?\"\n\nContinue Work Based on user's choice, invoke the appropriate workflow section.\n\nBest Practices\nAlways save state after each major step\nValidate before moving forward (especially before deployment)\nUse agents for code generation (chatgpt-mcp-generator, chatgpt-auth-generator, etc.)\nTest at every phase (preview widgets, test tools, run golden prompts)\nKeep it conversational - guide the user naturally through the workflow\nExplain trade-offs when offering choices (Auth0 vs Supabase, etc.)\nShow examples when introducing new concepts\nState Management\n\nThe .chatgpt-app/state.json file tracks progress:\n\n{\n  \"appName\": \"string\",\n  \"description\": \"string\",\n  \"phase\": \"Concept\" | \"Implementation\" | \"Testing\" | \"Deployment\",\n  \"tools\": [\"tool-name\"],\n  \"widgets\": [\"widget-id\"],\n  \"auth\": {\n    \"enabled\": boolean,\n    \"provider\": \"auth0\" | \"supabase\" | null\n  },\n  \"database\": {\n    \"enabled\": boolean,\n    \"entities\": [\"entity-name\"]\n  },\n  \"validated\": boolean,\n  \"tested\": boolean,\n  \"deployed\": boolean,\n  \"deploymentUrl\": \"string | null\",\n  \"goldenPromptsGenerated\": boolean,\n  \"lastUpdated\": \"ISO timestamp\"\n}\n\nCommand Reference\n# Setup\n./setup.sh\n\n# Development\n./START.sh --dev          # Dev mode with watch\n./START.sh --preview      # Open preview in browser\n./START.sh --stdio        # STDIO mode (testing)\n./START.sh                # Production mode\n\n# Testing\nnpm run validate          # Type checking\ncurl http://localhost:3000/health\n\n# Deployment\ngit push origin main      # Trigger Render deploy\n\nGetting Started\n\nWhen the user invokes any chatgpt-app command:\n\nCheck if .chatgpt-app/state.json exists\nIf yes → use Resume App workflow\nIf no → use Create New App workflow\n\nAlways guide users through the natural progression: Concept → Implementation → Testing → Deployment"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/hollaugo/chatgpt-apps",
    "publisherUrl": "https://clawhub.ai/hollaugo/chatgpt-apps",
    "owner": "hollaugo",
    "version": "0.1.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/chatgpt-apps",
    "downloadUrl": "https://openagent3.xyz/downloads/chatgpt-apps",
    "agentUrl": "https://openagent3.xyz/skills/chatgpt-apps/agent",
    "manifestUrl": "https://openagent3.xyz/skills/chatgpt-apps/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/chatgpt-apps/agent.md"
  }
}