[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-build-chatgpt-app":3,"mdc--s6es4l-key":36,"related-repo-openai-build-chatgpt-app":2164,"related-org-openai-build-chatgpt-app":2285},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"build-chatgpt-app","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Apps SDK","apps-sdk","tag",{"name":17,"slug":18,"type":15},"ChatGPT","chatgpt",{"name":20,"slug":21,"type":15},"MCP","mcp",{"name":23,"slug":24,"type":15},"UI Components","ui-components",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-06-30T19:00:57.102",null,465,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fopenai-developers\u002Fskills\u002Fbuild-chatgpt-app","---\nname: build-chatgpt-app\ndescription: Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.\n---\n\n# Build ChatGPT App\n\n## Overview\n\nScaffold ChatGPT Apps SDK implementations with a docs-first, example-first workflow, then generate code that follows current Apps SDK and MCP Apps bridge patterns.\n\nUse this skill to produce:\n\n- A primary app-archetype classification and repo-shape decision\n- A tool plan (names, schemas, annotations, outputs)\n- An upstream starting-point recommendation (official example, ext-apps example, or local fallback scaffold)\n- An MCP server scaffold (resource registration, tool handlers, metadata)\n- A widget scaffold (MCP Apps bridge first, `window.openai` compatibility\u002Fextensions second)\n- A reusable Node + `@modelcontextprotocol\u002Fext-apps` starter scaffold for low-dependency fallbacks\n- A validation report against the minimum working repo contract\n- Local dev and connector setup steps\n- A short stakeholder summary of what the app does (when requested)\n\n## Mandatory Docs-First Workflow\n\nUse `$openai-docs` first whenever building or changing a ChatGPT Apps SDK app.\n\n1. Invoke `$openai-docs` (preferred) or call the OpenAI docs MCP server directly.\n2. Fetch current Apps SDK docs before writing code, especially (baseline pages):\n   - `apps-sdk\u002Fbuild\u002Fmcp-server`\n   - `apps-sdk\u002Fbuild\u002Fchatgpt-ui`\n   - `apps-sdk\u002Fbuild\u002Fexamples`\n   - `apps-sdk\u002Fplan\u002Ftools`\n   - `apps-sdk\u002Freference`\n3. Fetch `apps-sdk\u002Fquickstart` when scaffolding a new app or generating a first-pass implementation, and check the official examples repo\u002Fpage before inventing a scaffold from scratch.\n4. Fetch deployment\u002Fsubmission docs when the task includes local ChatGPT testing, hosting, or public launch:\n   - `apps-sdk\u002Fdeploy`\n   - `apps-sdk\u002Fdeploy\u002Fsubmission`\n   - `apps-sdk\u002Fapp-submission-guidelines`\n5. Cite the docs URLs you used when explaining design choices or generated scaffolds.\n6. Prefer current docs guidance over older repo patterns when they differ, and call out compatibility aliases explicitly.\n7. If doc search times out or returns poor matches, fetch the canonical Apps SDK pages directly by URL and continue; do not let search failure block scaffolding.\n\nIf `$openai-docs` is unavailable, use:\n\n- `mcp__openaiDeveloperDocs__search_openai_docs`\n- `mcp__openaiDeveloperDocs__fetch_openai_doc`\n\nRead `references\u002Fapps-sdk-docs-workflow.md` for suggested doc queries and a compact checklist.\nRead `references\u002Fapp-archetypes.md` to classify the request into a small number of supported app shapes before choosing examples or scaffolds.\nRead `references\u002Frepo-contract-and-validation.md` when generating or reviewing a repo so the output stays inside a stable “working app” contract.\nRead `references\u002Fsearch-fetch-standard.md` when the app is connector-like, data-only, sync-oriented, or meant to work well with company knowledge or deep research.\nRead `references\u002Fupstream-example-workflow.md` when starting a greenfield app or when deciding whether to adapt an upstream example or use the local fallback scaffold.\nRead `references\u002Fwindow-openai-patterns.md` when the task needs ChatGPT-specific widget behavior or when translating repo examples that use wrapper-specific `app.*` helpers.\n\n## Prompt Guidance\n\nUse prompts that explicitly pair this skill with `$openai-docs` so the resulting scaffold is grounded in current docs.\n\nPreferred prompt patterns:\n\n- `Use $build-chatgpt-app with $openai-docs to scaffold a ChatGPT app for \u003Cuse case> with a \u003CTS\u002FPython> MCP server and \u003CReact\u002Fvanilla> widget.`\n- `Use $build-chatgpt-app with $openai-docs to adapt the closest official Apps SDK example into a ChatGPT app for \u003Cuse case>.`\n- `Use $build-chatgpt-app and $openai-docs to refactor this Apps SDK demo into a production-ready structure with tool annotations, CSP, and URI versioning.`\n- `Use $build-chatgpt-app with $openai-docs to plan tools first, then generate the MCP server and widget code.`\n\nWhen responding, ask for or infer these inputs before coding:\n\n- Use case and primary user flows\n- Read-only vs mutating tools\n- Demo vs production target\n- Private\u002Finternal use vs public directory submission\n- Backend language and UI stack\n- Auth requirements\n- External API domains for CSP allowlists\n- Hosting target and local dev approach\n- Org ownership\u002Fverification readiness (for submission tasks)\n\n## Classify The App Before Choosing Code\n\nBefore choosing examples, repo shape, or scaffolds, classify the request into one primary archetype and state it.\n\n- `tool-only`\n- `vanilla-widget`\n- `react-widget`\n- `interactive-decoupled`\n- `submission-ready`\n\nInfer the archetype unless a missing detail is truly blocking. Use the archetype to choose:\n\n- whether a UI is needed at all\n- whether to preserve a split `server\u002F` + `web\u002F` layout\n- whether to prefer official OpenAI examples, ext-apps examples, or the local fallback scaffold\n- which validation checks matter most\n- whether `search` and `fetch` should be the default read-only tool surface\n\nRead `references\u002Fapp-archetypes.md` for the decision rubric.\n\n## Default Starting-Point Order\n\nFor greenfield apps, prefer these starting points in order:\n\n1. **Official OpenAI examples** when a close example already matches the requested stack or interaction pattern.\n2. **Version-matched `@modelcontextprotocol\u002Fext-apps` examples** when the user needs a lower-level or more portable MCP Apps baseline.\n3. **`scripts\u002Fscaffold_node_ext_apps.mjs`** only when no close example fits, the user wants a tiny Node + vanilla starter, or network access\u002Fexample retrieval is undesirable.\n\nDo not generate a large custom scaffold from scratch if a close upstream example already exists.\nCopy the smallest matching example, remove unrelated demo code, then patch it to the current docs and the user request.\n\n## Build Workflow\n\n### 0. Classify The App Archetype\n\nPick one primary archetype before planning tools or choosing a starting point.\n\n- Prefer a single primary archetype instead of mixing several.\n- If the request is broad, infer the smallest archetype that can still satisfy it.\n- Escalate to `submission-ready` only when the user asks for public launch, directory submission, or review-ready deployment.\n- Call out the chosen archetype in your response so the user can correct it early if needed.\n\n### 1. Plan Tools Before Code\n\nDefine the tool surface area from user intents.\n\n- Use one job per tool.\n- Write tool descriptions that start with \"Use this when...\" behavior cues.\n- Make inputs explicit and machine-friendly (enums, required fields, bounds).\n- Decide whether each tool is data-only, render-only, or both.\n- Set annotations accurately (`readOnlyHint`, `destructiveHint`, `openWorldHint`; add `idempotentHint` when true).\n- If the app is connector-like, data-only, sync-oriented, or intended for company knowledge or deep research, default to the standard `search` and `fetch` tools instead of inventing custom read-only equivalents.\n- For educational\u002Fdemo apps, prefer one concept per tool so the model can pick the right example cleanly.\n- Group demo tools by learning objective: data into the widget, widget actions back into the conversation or tools, host\u002Flayout environment signals, and lifecycle\u002Fstreaming behavior.\n\nRead `references\u002Fsearch-fetch-standard.md` when `search` and `fetch` may be relevant.\n\n### 2. Choose an App Architecture\n\nChoose the simplest structure that fits the goal.\n\n- Use a **minimal demo pattern** for quick prototypes, workshops, or proofs of concept.\n- Use a **decoupled data\u002Frender pattern** for production UX so the widget does not re-render on every tool call.\n\nPrefer the decoupled pattern for non-trivial apps:\n\n- Data tools return reusable `structuredContent`.\n- Render tools attach `_meta.ui.resourceUri` and optional `_meta[\"openai\u002FoutputTemplate\"]`.\n- Render tool descriptions state prerequisites (for example, \"Call `search` first\").\n\n### 2a. Start From An Upstream Example When One Fits\n\nDefault to upstream examples for greenfield work when they are close to the requested app.\n\n- Check the official OpenAI examples first for ChatGPT-facing apps, polished UI patterns, React components, file upload flows, modal flows, or apps that resemble the docs examples.\n- Use `@modelcontextprotocol\u002Fext-apps` examples when the request is closer to raw MCP Apps bridge\u002Fserver wiring, or when version-matched package patterns matter more than ChatGPT-specific polish.\n- Pick the smallest matching example and copy only the relevant files; do not transplant an entire showcase app unchanged.\n- After copying, reconcile the example with the current docs you fetched: tool names\u002Fdescriptions, annotations, `_meta.ui.*`, CSP, URI versioning, and local run instructions.\n- State which example you chose and why in one sentence.\n\nRead `references\u002Fupstream-example-workflow.md` for the selection and adaptation rubric.\n\n### 2b. Use the Starter Script When a Low-Dependency Fallback Helps\n\nUse `scripts\u002Fscaffold_node_ext_apps.mjs` only when the user wants a quick, greenfield Node starter and a vanilla HTML widget is acceptable, and no upstream example is a better starting point.\n\n- Run it only after fetching current docs, then reconcile the generated files with the docs you fetched.\n- If you choose the script instead of an upstream example, say why the fallback is better for that request.\n- Skip it when a close official example exists, when the user already has an existing app structure, when they need a non-Node stack, when they explicitly want React first, or when they only want a plan\u002Freview instead of code.\n- The script generates a minimal `@modelcontextprotocol\u002Fext-apps` server plus a vanilla HTML widget that uses the MCP Apps bridge by default.\n- The generated widget keeps follow-up messaging on the standard `ui\u002Fmessage` bridge and only uses `window.openai` for optional host signals\u002Fextensions.\n- After running it, patch the generated output to match the current docs and the user request: adjust tool names\u002Fdescriptions, annotations, resource metadata, URI versioning, and README\u002Frun instructions.\n\n### 3. Scaffold the MCP Server\n\nGenerate a server that:\n\n- Registers a widget resource\u002Ftemplate with the MCP Apps UI MIME type (`text\u002Fhtml;profile=mcp-app`) or the SDK constant (`RESOURCE_MIME_TYPE`) when using `@modelcontextprotocol\u002Fext-apps\u002Fserver`\n- Registers tools with clear names, schemas, titles, and descriptions\n- Returns `structuredContent` (model + widget), `content` (model narration), and `_meta` (widget-only data) intentionally\n- Keeps handlers idempotent or documents non-idempotent behavior explicitly\n- Includes tool status strings (`openai\u002FtoolInvocation\u002F*`) when helpful in ChatGPT\n\nKeep `structuredContent` concise. Move large or sensitive widget-only payloads to `_meta`.\n\n### 4. Scaffold the Widget UI\n\nUse the MCP Apps bridge first for portability, then add ChatGPT-specific `window.openai` APIs when they materially improve UX.\n\n- Listen for `ui\u002Fnotifications\u002Ftool-result` (JSON-RPC over `postMessage`)\n- Render from `structuredContent`\n- Use `tools\u002Fcall` for component-initiated tool calls\n- Use `ui\u002Fupdate-model-context` only when UI state should change what the model sees\n\nUse `window.openai` for compatibility and extensions (file upload, modal, display mode, etc.), not as the only integration path for new apps.\n\n#### API Surface Guardrails\n\n- Some examples wrap the bridge with an `app` object (for example, `@modelcontextprotocol\u002Fext-apps\u002Freact`) and expose helper names like `app.sendMessage()`, `app.callServerTool()`, `app.openLink()`, or host getter methods.\n- Treat those wrappers as implementation details or convenience layers, not the canonical public API to teach by default.\n- For ChatGPT-facing guidance, prefer the current documented surface: `window.openai.callTool(...)`, `window.openai.sendFollowUpMessage(...)`, `window.openai.openExternal(...)`, `window.openai.requestDisplayMode(...)`, and direct globals like `window.openai.theme`, `window.openai.locale`, `window.openai.displayMode`, `window.openai.toolInput`, `window.openai.toolOutput`, `window.openai.toolResponseMetadata`, and `window.openai.widgetState`.\n- If you reference wrapper helpers from repo examples, map them back to the documented `window.openai` or MCP Apps bridge primitives and call out that the wrapper is not the normative API surface.\n- Use `references\u002Fwindow-openai-patterns.md` for the wrapper-to-canonical mapping and for React helper extraction patterns.\n\n### 5. Add Resource Metadata and Security\n\nSet resource metadata deliberately on the widget resource\u002Ftemplate:\n\n- `_meta.ui.csp` with exact `connectDomains` and `resourceDomains`\n- `_meta.ui.domain` for app submission-ready deployments\n- `_meta.ui.prefersBorder` (or OpenAI compatibility alias when needed)\n- Optional `openai\u002FwidgetDescription` to reduce redundant narration\n\nAvoid `frameDomains` unless iframe embeds are core to the product.\n\n### 5a. Enforce A Minimum Working Repo Contract\n\nEvery generated repo should satisfy a small, stable contract before you consider it done.\n\n- The repo shape matches the chosen archetype.\n- The MCP server and tools are wired to a reachable `\u002Fmcp` endpoint.\n- Tools have clear descriptions, accurate annotations, and UI metadata where needed.\n- Connector-like, data-only, sync-oriented, and company-knowledge-style apps use the standard `search` and `fetch` tool shapes when relevant.\n- The widget uses the MCP Apps bridge correctly when a UI exists.\n- The repo includes enough scripts or commands for a user to run and check it locally.\n- The response explicitly says what validation was run and what was not run.\n\nRead `references\u002Frepo-contract-and-validation.md` for the detailed checklist and validation ladder.\n\n### 6. Validate the Local Loop\n\nValidate against the minimum working repo contract, not just “did files get created.”\n\n- Run the lowest-cost checks first:\n  - static contract review\n  - syntax or compile checks when feasible\n  - local `\u002Fmcp` health check when feasible\n- Then move up to runtime checks:\n  - verify tool descriptors and widget rendering in MCP Inspector\n  - test the app in ChatGPT developer mode through HTTPS tunneling\n  - exercise retries and repeated tool calls to confirm idempotent behavior\n  - check widget updates after host events and follow-up tool calls\n- If you are only delivering a scaffold and are not installing dependencies, still run low-cost checks and say exactly what you did not run.\n\nRead `references\u002Frepo-contract-and-validation.md` for the validation ladder.\n\n### 7. Connect and Test in ChatGPT (Developer Mode)\n\nFor local development, include explicit ChatGPT setup steps (not just code\u002Frun commands).\n\n- Run the MCP server locally on `http:\u002F\u002Flocalhost:\u003Cport>\u002Fmcp`\n- Expose the local server with a public HTTPS tunnel (for example `ngrok http \u003Cport>`)\n- Use the tunneled HTTPS URL plus `\u002Fmcp` path when connecting from ChatGPT\n- In ChatGPT, enable Developer Mode under **Settings → Apps & Connectors → Advanced settings**\n- In ChatGPT app settings, create a new app for the remote MCP server and paste the public MCP URL\n- Tell users to refresh the app after MCP tool\u002Fmetadata changes so ChatGPT reloads the latest descriptors\n\nNote: Some docs\u002Fscreenshots still use older \"connector\" terminology. Prefer current product wording (\"app\") while acknowledging both labels when giving step-by-step instructions.\n\n### 8. Plan Production Hosting and Deployment\n\nWhen the user asks to deploy or prepare for launch, generate hosting guidance for the MCP server (and widget assets if hosted separately).\n\n- Host behind a stable public HTTPS endpoint (not a tunnel) with dependable TLS\n- Preserve low-latency streaming behavior on `\u002Fmcp`\n- Configure secrets outside the repo (environment variables \u002F secret manager)\n- Add logging, request latency tracking, and error visibility for tool calls\n- Add basic observability (CPU, memory, request volume) and a troubleshooting path\n- Re-test the hosted endpoint in ChatGPT Developer Mode before submission\n\n### 9. Prepare Submission and Publish (Public Apps Only)\n\nOnly include these steps when the user intends a public directory listing.\n\n- Use `apps-sdk\u002Fdeploy\u002Fsubmission` for the submission flow and `apps-sdk\u002Fapp-submission-guidelines` for review requirements\n- Keep private\u002Finternal apps in Developer Mode instead of submitting\n- Confirm org verification and Owner-role prerequisites before submission work\n- Ensure the MCP server uses a public production endpoint (no localhost\u002Ftesting URLs) and has submission-ready CSP configured\n- Prepare submission artifacts: app metadata, logo\u002Fscreenshots, privacy policy URL, support contact, test prompts\u002Fresponses, localization info\n- If auth is required, include review-safe demo credentials and test the login path end-to-end\n- Submit for review in the Platform dashboard, monitor review status, and publish only after approval\n\n## Interactive State Guidance\n\nRead `references\u002Finteractive-state-sync-patterns.md` when the app has long-lived widget state, repeated interactions, or component-initiated tool calls (for example, games, boards, maps, dashboards, editors).\n\nUse it to choose patterns for:\n\n- State snapshots plus monotonic event tokens (`stateVersion`, `resetCount`, etc.)\n- Idempotent retry-safe handlers\n- `structuredContent` vs `_meta` partitioning\n- MCP Apps bridge-first update flows with optional `window.openai` compatibility\n- Decoupled data\u002Frender tool architecture for more complex interactive apps\n\n## Output Expectations\n\nWhen using this skill to scaffold code, produce output in this order unless the user asks otherwise:\n\n- For direct scaffold requests, do not stop at the plan: give the brief plan, then create the files immediately.\n\n1. Primary app archetype chosen and why\n2. Tool plan and architecture choice (minimal vs decoupled)\n3. Upstream starting point chosen (official example, ext-apps example, or local fallback scaffold) and why\n4. Doc pages\u002FURLs used from `$openai-docs`\n5. File tree to create or modify\n6. Implementation (server + widget)\n7. Validation performed against the minimum working repo contract\n8. Local run\u002Ftest instructions (including tunnel + ChatGPT Developer Mode app setup)\n9. Deployment\u002Fhosting guidance (if requested or implied)\n10. Submission-readiness checklist (for public launch requests)\n11. Risks, gaps, and follow-up improvements\n\n## References\n\n- `references\u002Fapp-archetypes.md` for classifying requests into a small number of supported app shapes\n- `references\u002Fapps-sdk-docs-workflow.md` for doc queries, page targets, and code-generation checklist\n- `references\u002Finteractive-state-sync-patterns.md` for reusable patterns for stateful or highly interactive widget apps\n- `references\u002Frepo-contract-and-validation.md` for the minimum working repo contract and lightweight validation ladder\n- `references\u002Fsearch-fetch-standard.md` for when and how to default to the standard `search` and `fetch` tools\n- `references\u002Fupstream-example-workflow.md` for choosing between official examples, ext-apps examples, and the local fallback scaffold\n- `references\u002Fwindow-openai-patterns.md` for ChatGPT-specific extensions, wrapper API translation, and React helper patterns\n- `scripts\u002Fscaffold_node_ext_apps.mjs` for a minimal Node + `@modelcontextprotocol\u002Fext-apps` fallback starter scaffold\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,56,62,67,134,140,153,285,297,318,379,385,397,402,441,446,494,500,505,553,558,618,629,635,640,685,690,696,703,708,738,744,749,836,860,866,871,897,902,950,956,961,1003,1014,1020,1031,1086,1092,1097,1178,1196,1202,1214,1272,1283,1290,1448,1454,1459,1521,1534,1540,1545,1604,1615,1621,1626,1692,1703,1709,1714,1772,1777,1783,1788,1826,1832,1837,1888,1894,1906,1911,1973,1979,1984,1992,2055,2061],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Build ChatGPT App",{"type":42,"tag":50,"props":51,"children":53},"h2",{"id":52},"overview",[54],{"type":47,"value":55},"Overview",{"type":42,"tag":57,"props":58,"children":59},"p",{},[60],{"type":47,"value":61},"Scaffold ChatGPT Apps SDK implementations with a docs-first, example-first workflow, then generate code that follows current Apps SDK and MCP Apps bridge patterns.",{"type":42,"tag":57,"props":63,"children":64},{},[65],{"type":47,"value":66},"Use this skill to produce:",{"type":42,"tag":68,"props":69,"children":70},"ul",{},[71,77,82,87,92,106,119,124,129],{"type":42,"tag":72,"props":73,"children":74},"li",{},[75],{"type":47,"value":76},"A primary app-archetype classification and repo-shape decision",{"type":42,"tag":72,"props":78,"children":79},{},[80],{"type":47,"value":81},"A tool plan (names, schemas, annotations, outputs)",{"type":42,"tag":72,"props":83,"children":84},{},[85],{"type":47,"value":86},"An upstream starting-point recommendation (official example, ext-apps example, or local fallback scaffold)",{"type":42,"tag":72,"props":88,"children":89},{},[90],{"type":47,"value":91},"An MCP server scaffold (resource registration, tool handlers, metadata)",{"type":42,"tag":72,"props":93,"children":94},{},[95,97,104],{"type":47,"value":96},"A widget scaffold (MCP Apps bridge first, ",{"type":42,"tag":98,"props":99,"children":101},"code",{"className":100},[],[102],{"type":47,"value":103},"window.openai",{"type":47,"value":105}," compatibility\u002Fextensions second)",{"type":42,"tag":72,"props":107,"children":108},{},[109,111,117],{"type":47,"value":110},"A reusable Node + ",{"type":42,"tag":98,"props":112,"children":114},{"className":113},[],[115],{"type":47,"value":116},"@modelcontextprotocol\u002Fext-apps",{"type":47,"value":118}," starter scaffold for low-dependency fallbacks",{"type":42,"tag":72,"props":120,"children":121},{},[122],{"type":47,"value":123},"A validation report against the minimum working repo contract",{"type":42,"tag":72,"props":125,"children":126},{},[127],{"type":47,"value":128},"Local dev and connector setup steps",{"type":42,"tag":72,"props":130,"children":131},{},[132],{"type":47,"value":133},"A short stakeholder summary of what the app does (when requested)",{"type":42,"tag":50,"props":135,"children":137},{"id":136},"mandatory-docs-first-workflow",[138],{"type":47,"value":139},"Mandatory Docs-First Workflow",{"type":42,"tag":57,"props":141,"children":142},{},[143,145,151],{"type":47,"value":144},"Use ",{"type":42,"tag":98,"props":146,"children":148},{"className":147},[],[149],{"type":47,"value":150},"$openai-docs",{"type":47,"value":152}," first whenever building or changing a ChatGPT Apps SDK app.",{"type":42,"tag":154,"props":155,"children":156},"ol",{},[157,169,222,235,270,275,280],{"type":42,"tag":72,"props":158,"children":159},{},[160,162,167],{"type":47,"value":161},"Invoke ",{"type":42,"tag":98,"props":163,"children":165},{"className":164},[],[166],{"type":47,"value":150},{"type":47,"value":168}," (preferred) or call the OpenAI docs MCP server directly.",{"type":42,"tag":72,"props":170,"children":171},{},[172,174],{"type":47,"value":173},"Fetch current Apps SDK docs before writing code, especially (baseline pages):\n",{"type":42,"tag":68,"props":175,"children":176},{},[177,186,195,204,213],{"type":42,"tag":72,"props":178,"children":179},{},[180],{"type":42,"tag":98,"props":181,"children":183},{"className":182},[],[184],{"type":47,"value":185},"apps-sdk\u002Fbuild\u002Fmcp-server",{"type":42,"tag":72,"props":187,"children":188},{},[189],{"type":42,"tag":98,"props":190,"children":192},{"className":191},[],[193],{"type":47,"value":194},"apps-sdk\u002Fbuild\u002Fchatgpt-ui",{"type":42,"tag":72,"props":196,"children":197},{},[198],{"type":42,"tag":98,"props":199,"children":201},{"className":200},[],[202],{"type":47,"value":203},"apps-sdk\u002Fbuild\u002Fexamples",{"type":42,"tag":72,"props":205,"children":206},{},[207],{"type":42,"tag":98,"props":208,"children":210},{"className":209},[],[211],{"type":47,"value":212},"apps-sdk\u002Fplan\u002Ftools",{"type":42,"tag":72,"props":214,"children":215},{},[216],{"type":42,"tag":98,"props":217,"children":219},{"className":218},[],[220],{"type":47,"value":221},"apps-sdk\u002Freference",{"type":42,"tag":72,"props":223,"children":224},{},[225,227,233],{"type":47,"value":226},"Fetch ",{"type":42,"tag":98,"props":228,"children":230},{"className":229},[],[231],{"type":47,"value":232},"apps-sdk\u002Fquickstart",{"type":47,"value":234}," when scaffolding a new app or generating a first-pass implementation, and check the official examples repo\u002Fpage before inventing a scaffold from scratch.",{"type":42,"tag":72,"props":236,"children":237},{},[238,240],{"type":47,"value":239},"Fetch deployment\u002Fsubmission docs when the task includes local ChatGPT testing, hosting, or public launch:\n",{"type":42,"tag":68,"props":241,"children":242},{},[243,252,261],{"type":42,"tag":72,"props":244,"children":245},{},[246],{"type":42,"tag":98,"props":247,"children":249},{"className":248},[],[250],{"type":47,"value":251},"apps-sdk\u002Fdeploy",{"type":42,"tag":72,"props":253,"children":254},{},[255],{"type":42,"tag":98,"props":256,"children":258},{"className":257},[],[259],{"type":47,"value":260},"apps-sdk\u002Fdeploy\u002Fsubmission",{"type":42,"tag":72,"props":262,"children":263},{},[264],{"type":42,"tag":98,"props":265,"children":267},{"className":266},[],[268],{"type":47,"value":269},"apps-sdk\u002Fapp-submission-guidelines",{"type":42,"tag":72,"props":271,"children":272},{},[273],{"type":47,"value":274},"Cite the docs URLs you used when explaining design choices or generated scaffolds.",{"type":42,"tag":72,"props":276,"children":277},{},[278],{"type":47,"value":279},"Prefer current docs guidance over older repo patterns when they differ, and call out compatibility aliases explicitly.",{"type":42,"tag":72,"props":281,"children":282},{},[283],{"type":47,"value":284},"If doc search times out or returns poor matches, fetch the canonical Apps SDK pages directly by URL and continue; do not let search failure block scaffolding.",{"type":42,"tag":57,"props":286,"children":287},{},[288,290,295],{"type":47,"value":289},"If ",{"type":42,"tag":98,"props":291,"children":293},{"className":292},[],[294],{"type":47,"value":150},{"type":47,"value":296}," is unavailable, use:",{"type":42,"tag":68,"props":298,"children":299},{},[300,309],{"type":42,"tag":72,"props":301,"children":302},{},[303],{"type":42,"tag":98,"props":304,"children":306},{"className":305},[],[307],{"type":47,"value":308},"mcp__openaiDeveloperDocs__search_openai_docs",{"type":42,"tag":72,"props":310,"children":311},{},[312],{"type":42,"tag":98,"props":313,"children":315},{"className":314},[],[316],{"type":47,"value":317},"mcp__openaiDeveloperDocs__fetch_openai_doc",{"type":42,"tag":57,"props":319,"children":320},{},[321,323,329,331,337,339,345,347,353,355,361,363,369,371,377],{"type":47,"value":322},"Read ",{"type":42,"tag":98,"props":324,"children":326},{"className":325},[],[327],{"type":47,"value":328},"references\u002Fapps-sdk-docs-workflow.md",{"type":47,"value":330}," for suggested doc queries and a compact checklist.\nRead ",{"type":42,"tag":98,"props":332,"children":334},{"className":333},[],[335],{"type":47,"value":336},"references\u002Fapp-archetypes.md",{"type":47,"value":338}," to classify the request into a small number of supported app shapes before choosing examples or scaffolds.\nRead ",{"type":42,"tag":98,"props":340,"children":342},{"className":341},[],[343],{"type":47,"value":344},"references\u002Frepo-contract-and-validation.md",{"type":47,"value":346}," when generating or reviewing a repo so the output stays inside a stable “working app” contract.\nRead ",{"type":42,"tag":98,"props":348,"children":350},{"className":349},[],[351],{"type":47,"value":352},"references\u002Fsearch-fetch-standard.md",{"type":47,"value":354}," when the app is connector-like, data-only, sync-oriented, or meant to work well with company knowledge or deep research.\nRead ",{"type":42,"tag":98,"props":356,"children":358},{"className":357},[],[359],{"type":47,"value":360},"references\u002Fupstream-example-workflow.md",{"type":47,"value":362}," when starting a greenfield app or when deciding whether to adapt an upstream example or use the local fallback scaffold.\nRead ",{"type":42,"tag":98,"props":364,"children":366},{"className":365},[],[367],{"type":47,"value":368},"references\u002Fwindow-openai-patterns.md",{"type":47,"value":370}," when the task needs ChatGPT-specific widget behavior or when translating repo examples that use wrapper-specific ",{"type":42,"tag":98,"props":372,"children":374},{"className":373},[],[375],{"type":47,"value":376},"app.*",{"type":47,"value":378}," helpers.",{"type":42,"tag":50,"props":380,"children":382},{"id":381},"prompt-guidance",[383],{"type":47,"value":384},"Prompt Guidance",{"type":42,"tag":57,"props":386,"children":387},{},[388,390,395],{"type":47,"value":389},"Use prompts that explicitly pair this skill with ",{"type":42,"tag":98,"props":391,"children":393},{"className":392},[],[394],{"type":47,"value":150},{"type":47,"value":396}," so the resulting scaffold is grounded in current docs.",{"type":42,"tag":57,"props":398,"children":399},{},[400],{"type":47,"value":401},"Preferred prompt patterns:",{"type":42,"tag":68,"props":403,"children":404},{},[405,414,423,432],{"type":42,"tag":72,"props":406,"children":407},{},[408],{"type":42,"tag":98,"props":409,"children":411},{"className":410},[],[412],{"type":47,"value":413},"Use $build-chatgpt-app with $openai-docs to scaffold a ChatGPT app for \u003Cuse case> with a \u003CTS\u002FPython> MCP server and \u003CReact\u002Fvanilla> widget.",{"type":42,"tag":72,"props":415,"children":416},{},[417],{"type":42,"tag":98,"props":418,"children":420},{"className":419},[],[421],{"type":47,"value":422},"Use $build-chatgpt-app with $openai-docs to adapt the closest official Apps SDK example into a ChatGPT app for \u003Cuse case>.",{"type":42,"tag":72,"props":424,"children":425},{},[426],{"type":42,"tag":98,"props":427,"children":429},{"className":428},[],[430],{"type":47,"value":431},"Use $build-chatgpt-app and $openai-docs to refactor this Apps SDK demo into a production-ready structure with tool annotations, CSP, and URI versioning.",{"type":42,"tag":72,"props":433,"children":434},{},[435],{"type":42,"tag":98,"props":436,"children":438},{"className":437},[],[439],{"type":47,"value":440},"Use $build-chatgpt-app with $openai-docs to plan tools first, then generate the MCP server and widget code.",{"type":42,"tag":57,"props":442,"children":443},{},[444],{"type":47,"value":445},"When responding, ask for or infer these inputs before coding:",{"type":42,"tag":68,"props":447,"children":448},{},[449,454,459,464,469,474,479,484,489],{"type":42,"tag":72,"props":450,"children":451},{},[452],{"type":47,"value":453},"Use case and primary user flows",{"type":42,"tag":72,"props":455,"children":456},{},[457],{"type":47,"value":458},"Read-only vs mutating tools",{"type":42,"tag":72,"props":460,"children":461},{},[462],{"type":47,"value":463},"Demo vs production target",{"type":42,"tag":72,"props":465,"children":466},{},[467],{"type":47,"value":468},"Private\u002Finternal use vs public directory submission",{"type":42,"tag":72,"props":470,"children":471},{},[472],{"type":47,"value":473},"Backend language and UI stack",{"type":42,"tag":72,"props":475,"children":476},{},[477],{"type":47,"value":478},"Auth requirements",{"type":42,"tag":72,"props":480,"children":481},{},[482],{"type":47,"value":483},"External API domains for CSP allowlists",{"type":42,"tag":72,"props":485,"children":486},{},[487],{"type":47,"value":488},"Hosting target and local dev approach",{"type":42,"tag":72,"props":490,"children":491},{},[492],{"type":47,"value":493},"Org ownership\u002Fverification readiness (for submission tasks)",{"type":42,"tag":50,"props":495,"children":497},{"id":496},"classify-the-app-before-choosing-code",[498],{"type":47,"value":499},"Classify The App Before Choosing Code",{"type":42,"tag":57,"props":501,"children":502},{},[503],{"type":47,"value":504},"Before choosing examples, repo shape, or scaffolds, classify the request into one primary archetype and state it.",{"type":42,"tag":68,"props":506,"children":507},{},[508,517,526,535,544],{"type":42,"tag":72,"props":509,"children":510},{},[511],{"type":42,"tag":98,"props":512,"children":514},{"className":513},[],[515],{"type":47,"value":516},"tool-only",{"type":42,"tag":72,"props":518,"children":519},{},[520],{"type":42,"tag":98,"props":521,"children":523},{"className":522},[],[524],{"type":47,"value":525},"vanilla-widget",{"type":42,"tag":72,"props":527,"children":528},{},[529],{"type":42,"tag":98,"props":530,"children":532},{"className":531},[],[533],{"type":47,"value":534},"react-widget",{"type":42,"tag":72,"props":536,"children":537},{},[538],{"type":42,"tag":98,"props":539,"children":541},{"className":540},[],[542],{"type":47,"value":543},"interactive-decoupled",{"type":42,"tag":72,"props":545,"children":546},{},[547],{"type":42,"tag":98,"props":548,"children":550},{"className":549},[],[551],{"type":47,"value":552},"submission-ready",{"type":42,"tag":57,"props":554,"children":555},{},[556],{"type":47,"value":557},"Infer the archetype unless a missing detail is truly blocking. Use the archetype to choose:",{"type":42,"tag":68,"props":559,"children":560},{},[561,566,587,592,597],{"type":42,"tag":72,"props":562,"children":563},{},[564],{"type":47,"value":565},"whether a UI is needed at all",{"type":42,"tag":72,"props":567,"children":568},{},[569,571,577,579,585],{"type":47,"value":570},"whether to preserve a split ",{"type":42,"tag":98,"props":572,"children":574},{"className":573},[],[575],{"type":47,"value":576},"server\u002F",{"type":47,"value":578}," + ",{"type":42,"tag":98,"props":580,"children":582},{"className":581},[],[583],{"type":47,"value":584},"web\u002F",{"type":47,"value":586}," layout",{"type":42,"tag":72,"props":588,"children":589},{},[590],{"type":47,"value":591},"whether to prefer official OpenAI examples, ext-apps examples, or the local fallback scaffold",{"type":42,"tag":72,"props":593,"children":594},{},[595],{"type":47,"value":596},"which validation checks matter most",{"type":42,"tag":72,"props":598,"children":599},{},[600,602,608,610,616],{"type":47,"value":601},"whether ",{"type":42,"tag":98,"props":603,"children":605},{"className":604},[],[606],{"type":47,"value":607},"search",{"type":47,"value":609}," and ",{"type":42,"tag":98,"props":611,"children":613},{"className":612},[],[614],{"type":47,"value":615},"fetch",{"type":47,"value":617}," should be the default read-only tool surface",{"type":42,"tag":57,"props":619,"children":620},{},[621,622,627],{"type":47,"value":322},{"type":42,"tag":98,"props":623,"children":625},{"className":624},[],[626],{"type":47,"value":336},{"type":47,"value":628}," for the decision rubric.",{"type":42,"tag":50,"props":630,"children":632},{"id":631},"default-starting-point-order",[633],{"type":47,"value":634},"Default Starting-Point Order",{"type":42,"tag":57,"props":636,"children":637},{},[638],{"type":47,"value":639},"For greenfield apps, prefer these starting points in order:",{"type":42,"tag":154,"props":641,"children":642},{},[643,654,671],{"type":42,"tag":72,"props":644,"children":645},{},[646,652],{"type":42,"tag":647,"props":648,"children":649},"strong",{},[650],{"type":47,"value":651},"Official OpenAI examples",{"type":47,"value":653}," when a close example already matches the requested stack or interaction pattern.",{"type":42,"tag":72,"props":655,"children":656},{},[657,669],{"type":42,"tag":647,"props":658,"children":659},{},[660,662,667],{"type":47,"value":661},"Version-matched ",{"type":42,"tag":98,"props":663,"children":665},{"className":664},[],[666],{"type":47,"value":116},{"type":47,"value":668}," examples",{"type":47,"value":670}," when the user needs a lower-level or more portable MCP Apps baseline.",{"type":42,"tag":72,"props":672,"children":673},{},[674,683],{"type":42,"tag":647,"props":675,"children":676},{},[677],{"type":42,"tag":98,"props":678,"children":680},{"className":679},[],[681],{"type":47,"value":682},"scripts\u002Fscaffold_node_ext_apps.mjs",{"type":47,"value":684}," only when no close example fits, the user wants a tiny Node + vanilla starter, or network access\u002Fexample retrieval is undesirable.",{"type":42,"tag":57,"props":686,"children":687},{},[688],{"type":47,"value":689},"Do not generate a large custom scaffold from scratch if a close upstream example already exists.\nCopy the smallest matching example, remove unrelated demo code, then patch it to the current docs and the user request.",{"type":42,"tag":50,"props":691,"children":693},{"id":692},"build-workflow",[694],{"type":47,"value":695},"Build Workflow",{"type":42,"tag":697,"props":698,"children":700},"h3",{"id":699},"_0-classify-the-app-archetype",[701],{"type":47,"value":702},"0. Classify The App Archetype",{"type":42,"tag":57,"props":704,"children":705},{},[706],{"type":47,"value":707},"Pick one primary archetype before planning tools or choosing a starting point.",{"type":42,"tag":68,"props":709,"children":710},{},[711,716,721,733],{"type":42,"tag":72,"props":712,"children":713},{},[714],{"type":47,"value":715},"Prefer a single primary archetype instead of mixing several.",{"type":42,"tag":72,"props":717,"children":718},{},[719],{"type":47,"value":720},"If the request is broad, infer the smallest archetype that can still satisfy it.",{"type":42,"tag":72,"props":722,"children":723},{},[724,726,731],{"type":47,"value":725},"Escalate to ",{"type":42,"tag":98,"props":727,"children":729},{"className":728},[],[730],{"type":47,"value":552},{"type":47,"value":732}," only when the user asks for public launch, directory submission, or review-ready deployment.",{"type":42,"tag":72,"props":734,"children":735},{},[736],{"type":47,"value":737},"Call out the chosen archetype in your response so the user can correct it early if needed.",{"type":42,"tag":697,"props":739,"children":741},{"id":740},"_1-plan-tools-before-code",[742],{"type":47,"value":743},"1. Plan Tools Before Code",{"type":42,"tag":57,"props":745,"children":746},{},[747],{"type":47,"value":748},"Define the tool surface area from user intents.",{"type":42,"tag":68,"props":750,"children":751},{},[752,757,762,767,772,808,826,831],{"type":42,"tag":72,"props":753,"children":754},{},[755],{"type":47,"value":756},"Use one job per tool.",{"type":42,"tag":72,"props":758,"children":759},{},[760],{"type":47,"value":761},"Write tool descriptions that start with \"Use this when...\" behavior cues.",{"type":42,"tag":72,"props":763,"children":764},{},[765],{"type":47,"value":766},"Make inputs explicit and machine-friendly (enums, required fields, bounds).",{"type":42,"tag":72,"props":768,"children":769},{},[770],{"type":47,"value":771},"Decide whether each tool is data-only, render-only, or both.",{"type":42,"tag":72,"props":773,"children":774},{},[775,777,783,785,791,792,798,800,806],{"type":47,"value":776},"Set annotations accurately (",{"type":42,"tag":98,"props":778,"children":780},{"className":779},[],[781],{"type":47,"value":782},"readOnlyHint",{"type":47,"value":784},", ",{"type":42,"tag":98,"props":786,"children":788},{"className":787},[],[789],{"type":47,"value":790},"destructiveHint",{"type":47,"value":784},{"type":42,"tag":98,"props":793,"children":795},{"className":794},[],[796],{"type":47,"value":797},"openWorldHint",{"type":47,"value":799},"; add ",{"type":42,"tag":98,"props":801,"children":803},{"className":802},[],[804],{"type":47,"value":805},"idempotentHint",{"type":47,"value":807}," when true).",{"type":42,"tag":72,"props":809,"children":810},{},[811,813,818,819,824],{"type":47,"value":812},"If the app is connector-like, data-only, sync-oriented, or intended for company knowledge or deep research, default to the standard ",{"type":42,"tag":98,"props":814,"children":816},{"className":815},[],[817],{"type":47,"value":607},{"type":47,"value":609},{"type":42,"tag":98,"props":820,"children":822},{"className":821},[],[823],{"type":47,"value":615},{"type":47,"value":825}," tools instead of inventing custom read-only equivalents.",{"type":42,"tag":72,"props":827,"children":828},{},[829],{"type":47,"value":830},"For educational\u002Fdemo apps, prefer one concept per tool so the model can pick the right example cleanly.",{"type":42,"tag":72,"props":832,"children":833},{},[834],{"type":47,"value":835},"Group demo tools by learning objective: data into the widget, widget actions back into the conversation or tools, host\u002Flayout environment signals, and lifecycle\u002Fstreaming behavior.",{"type":42,"tag":57,"props":837,"children":838},{},[839,840,845,847,852,853,858],{"type":47,"value":322},{"type":42,"tag":98,"props":841,"children":843},{"className":842},[],[844],{"type":47,"value":352},{"type":47,"value":846}," when ",{"type":42,"tag":98,"props":848,"children":850},{"className":849},[],[851],{"type":47,"value":607},{"type":47,"value":609},{"type":42,"tag":98,"props":854,"children":856},{"className":855},[],[857],{"type":47,"value":615},{"type":47,"value":859}," may be relevant.",{"type":42,"tag":697,"props":861,"children":863},{"id":862},"_2-choose-an-app-architecture",[864],{"type":47,"value":865},"2. Choose an App Architecture",{"type":42,"tag":57,"props":867,"children":868},{},[869],{"type":47,"value":870},"Choose the simplest structure that fits the goal.",{"type":42,"tag":68,"props":872,"children":873},{},[874,886],{"type":42,"tag":72,"props":875,"children":876},{},[877,879,884],{"type":47,"value":878},"Use a ",{"type":42,"tag":647,"props":880,"children":881},{},[882],{"type":47,"value":883},"minimal demo pattern",{"type":47,"value":885}," for quick prototypes, workshops, or proofs of concept.",{"type":42,"tag":72,"props":887,"children":888},{},[889,890,895],{"type":47,"value":878},{"type":42,"tag":647,"props":891,"children":892},{},[893],{"type":47,"value":894},"decoupled data\u002Frender pattern",{"type":47,"value":896}," for production UX so the widget does not re-render on every tool call.",{"type":42,"tag":57,"props":898,"children":899},{},[900],{"type":47,"value":901},"Prefer the decoupled pattern for non-trivial apps:",{"type":42,"tag":68,"props":903,"children":904},{},[905,918,938],{"type":42,"tag":72,"props":906,"children":907},{},[908,910,916],{"type":47,"value":909},"Data tools return reusable ",{"type":42,"tag":98,"props":911,"children":913},{"className":912},[],[914],{"type":47,"value":915},"structuredContent",{"type":47,"value":917},".",{"type":42,"tag":72,"props":919,"children":920},{},[921,923,929,931,937],{"type":47,"value":922},"Render tools attach ",{"type":42,"tag":98,"props":924,"children":926},{"className":925},[],[927],{"type":47,"value":928},"_meta.ui.resourceUri",{"type":47,"value":930}," and optional ",{"type":42,"tag":98,"props":932,"children":934},{"className":933},[],[935],{"type":47,"value":936},"_meta[\"openai\u002FoutputTemplate\"]",{"type":47,"value":917},{"type":42,"tag":72,"props":939,"children":940},{},[941,943,948],{"type":47,"value":942},"Render tool descriptions state prerequisites (for example, \"Call ",{"type":42,"tag":98,"props":944,"children":946},{"className":945},[],[947],{"type":47,"value":607},{"type":47,"value":949}," first\").",{"type":42,"tag":697,"props":951,"children":953},{"id":952},"_2a-start-from-an-upstream-example-when-one-fits",[954],{"type":47,"value":955},"2a. Start From An Upstream Example When One Fits",{"type":42,"tag":57,"props":957,"children":958},{},[959],{"type":47,"value":960},"Default to upstream examples for greenfield work when they are close to the requested app.",{"type":42,"tag":68,"props":962,"children":963},{},[964,969,980,985,998],{"type":42,"tag":72,"props":965,"children":966},{},[967],{"type":47,"value":968},"Check the official OpenAI examples first for ChatGPT-facing apps, polished UI patterns, React components, file upload flows, modal flows, or apps that resemble the docs examples.",{"type":42,"tag":72,"props":970,"children":971},{},[972,973,978],{"type":47,"value":144},{"type":42,"tag":98,"props":974,"children":976},{"className":975},[],[977],{"type":47,"value":116},{"type":47,"value":979}," examples when the request is closer to raw MCP Apps bridge\u002Fserver wiring, or when version-matched package patterns matter more than ChatGPT-specific polish.",{"type":42,"tag":72,"props":981,"children":982},{},[983],{"type":47,"value":984},"Pick the smallest matching example and copy only the relevant files; do not transplant an entire showcase app unchanged.",{"type":42,"tag":72,"props":986,"children":987},{},[988,990,996],{"type":47,"value":989},"After copying, reconcile the example with the current docs you fetched: tool names\u002Fdescriptions, annotations, ",{"type":42,"tag":98,"props":991,"children":993},{"className":992},[],[994],{"type":47,"value":995},"_meta.ui.*",{"type":47,"value":997},", CSP, URI versioning, and local run instructions.",{"type":42,"tag":72,"props":999,"children":1000},{},[1001],{"type":47,"value":1002},"State which example you chose and why in one sentence.",{"type":42,"tag":57,"props":1004,"children":1005},{},[1006,1007,1012],{"type":47,"value":322},{"type":42,"tag":98,"props":1008,"children":1010},{"className":1009},[],[1011],{"type":47,"value":360},{"type":47,"value":1013}," for the selection and adaptation rubric.",{"type":42,"tag":697,"props":1015,"children":1017},{"id":1016},"_2b-use-the-starter-script-when-a-low-dependency-fallback-helps",[1018],{"type":47,"value":1019},"2b. Use the Starter Script When a Low-Dependency Fallback Helps",{"type":42,"tag":57,"props":1021,"children":1022},{},[1023,1024,1029],{"type":47,"value":144},{"type":42,"tag":98,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":47,"value":682},{"type":47,"value":1030}," only when the user wants a quick, greenfield Node starter and a vanilla HTML widget is acceptable, and no upstream example is a better starting point.",{"type":42,"tag":68,"props":1032,"children":1033},{},[1034,1039,1044,1049,1061,1081],{"type":42,"tag":72,"props":1035,"children":1036},{},[1037],{"type":47,"value":1038},"Run it only after fetching current docs, then reconcile the generated files with the docs you fetched.",{"type":42,"tag":72,"props":1040,"children":1041},{},[1042],{"type":47,"value":1043},"If you choose the script instead of an upstream example, say why the fallback is better for that request.",{"type":42,"tag":72,"props":1045,"children":1046},{},[1047],{"type":47,"value":1048},"Skip it when a close official example exists, when the user already has an existing app structure, when they need a non-Node stack, when they explicitly want React first, or when they only want a plan\u002Freview instead of code.",{"type":42,"tag":72,"props":1050,"children":1051},{},[1052,1054,1059],{"type":47,"value":1053},"The script generates a minimal ",{"type":42,"tag":98,"props":1055,"children":1057},{"className":1056},[],[1058],{"type":47,"value":116},{"type":47,"value":1060}," server plus a vanilla HTML widget that uses the MCP Apps bridge by default.",{"type":42,"tag":72,"props":1062,"children":1063},{},[1064,1066,1072,1074,1079],{"type":47,"value":1065},"The generated widget keeps follow-up messaging on the standard ",{"type":42,"tag":98,"props":1067,"children":1069},{"className":1068},[],[1070],{"type":47,"value":1071},"ui\u002Fmessage",{"type":47,"value":1073}," bridge and only uses ",{"type":42,"tag":98,"props":1075,"children":1077},{"className":1076},[],[1078],{"type":47,"value":103},{"type":47,"value":1080}," for optional host signals\u002Fextensions.",{"type":42,"tag":72,"props":1082,"children":1083},{},[1084],{"type":47,"value":1085},"After running it, patch the generated output to match the current docs and the user request: adjust tool names\u002Fdescriptions, annotations, resource metadata, URI versioning, and README\u002Frun instructions.",{"type":42,"tag":697,"props":1087,"children":1089},{"id":1088},"_3-scaffold-the-mcp-server",[1090],{"type":47,"value":1091},"3. Scaffold the MCP Server",{"type":42,"tag":57,"props":1093,"children":1094},{},[1095],{"type":47,"value":1096},"Generate a server that:",{"type":42,"tag":68,"props":1098,"children":1099},{},[1100,1127,1132,1160,1165],{"type":42,"tag":72,"props":1101,"children":1102},{},[1103,1105,1111,1113,1119,1121],{"type":47,"value":1104},"Registers a widget resource\u002Ftemplate with the MCP Apps UI MIME type (",{"type":42,"tag":98,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":47,"value":1110},"text\u002Fhtml;profile=mcp-app",{"type":47,"value":1112},") or the SDK constant (",{"type":42,"tag":98,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":47,"value":1118},"RESOURCE_MIME_TYPE",{"type":47,"value":1120},") when using ",{"type":42,"tag":98,"props":1122,"children":1124},{"className":1123},[],[1125],{"type":47,"value":1126},"@modelcontextprotocol\u002Fext-apps\u002Fserver",{"type":42,"tag":72,"props":1128,"children":1129},{},[1130],{"type":47,"value":1131},"Registers tools with clear names, schemas, titles, and descriptions",{"type":42,"tag":72,"props":1133,"children":1134},{},[1135,1137,1142,1144,1150,1152,1158],{"type":47,"value":1136},"Returns ",{"type":42,"tag":98,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":47,"value":915},{"type":47,"value":1143}," (model + widget), ",{"type":42,"tag":98,"props":1145,"children":1147},{"className":1146},[],[1148],{"type":47,"value":1149},"content",{"type":47,"value":1151}," (model narration), and ",{"type":42,"tag":98,"props":1153,"children":1155},{"className":1154},[],[1156],{"type":47,"value":1157},"_meta",{"type":47,"value":1159}," (widget-only data) intentionally",{"type":42,"tag":72,"props":1161,"children":1162},{},[1163],{"type":47,"value":1164},"Keeps handlers idempotent or documents non-idempotent behavior explicitly",{"type":42,"tag":72,"props":1166,"children":1167},{},[1168,1170,1176],{"type":47,"value":1169},"Includes tool status strings (",{"type":42,"tag":98,"props":1171,"children":1173},{"className":1172},[],[1174],{"type":47,"value":1175},"openai\u002FtoolInvocation\u002F*",{"type":47,"value":1177},") when helpful in ChatGPT",{"type":42,"tag":57,"props":1179,"children":1180},{},[1181,1183,1188,1190,1195],{"type":47,"value":1182},"Keep ",{"type":42,"tag":98,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":47,"value":915},{"type":47,"value":1189}," concise. Move large or sensitive widget-only payloads to ",{"type":42,"tag":98,"props":1191,"children":1193},{"className":1192},[],[1194],{"type":47,"value":1157},{"type":47,"value":917},{"type":42,"tag":697,"props":1197,"children":1199},{"id":1198},"_4-scaffold-the-widget-ui",[1200],{"type":47,"value":1201},"4. Scaffold the Widget UI",{"type":42,"tag":57,"props":1203,"children":1204},{},[1205,1207,1212],{"type":47,"value":1206},"Use the MCP Apps bridge first for portability, then add ChatGPT-specific ",{"type":42,"tag":98,"props":1208,"children":1210},{"className":1209},[],[1211],{"type":47,"value":103},{"type":47,"value":1213}," APIs when they materially improve UX.",{"type":42,"tag":68,"props":1215,"children":1216},{},[1217,1238,1248,1260],{"type":42,"tag":72,"props":1218,"children":1219},{},[1220,1222,1228,1230,1236],{"type":47,"value":1221},"Listen for ",{"type":42,"tag":98,"props":1223,"children":1225},{"className":1224},[],[1226],{"type":47,"value":1227},"ui\u002Fnotifications\u002Ftool-result",{"type":47,"value":1229}," (JSON-RPC over ",{"type":42,"tag":98,"props":1231,"children":1233},{"className":1232},[],[1234],{"type":47,"value":1235},"postMessage",{"type":47,"value":1237},")",{"type":42,"tag":72,"props":1239,"children":1240},{},[1241,1243],{"type":47,"value":1242},"Render from ",{"type":42,"tag":98,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":47,"value":915},{"type":42,"tag":72,"props":1249,"children":1250},{},[1251,1252,1258],{"type":47,"value":144},{"type":42,"tag":98,"props":1253,"children":1255},{"className":1254},[],[1256],{"type":47,"value":1257},"tools\u002Fcall",{"type":47,"value":1259}," for component-initiated tool calls",{"type":42,"tag":72,"props":1261,"children":1262},{},[1263,1264,1270],{"type":47,"value":144},{"type":42,"tag":98,"props":1265,"children":1267},{"className":1266},[],[1268],{"type":47,"value":1269},"ui\u002Fupdate-model-context",{"type":47,"value":1271}," only when UI state should change what the model sees",{"type":42,"tag":57,"props":1273,"children":1274},{},[1275,1276,1281],{"type":47,"value":144},{"type":42,"tag":98,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":47,"value":103},{"type":47,"value":1282}," for compatibility and extensions (file upload, modal, display mode, etc.), not as the only integration path for new apps.",{"type":42,"tag":1284,"props":1285,"children":1287},"h4",{"id":1286},"api-surface-guardrails",[1288],{"type":47,"value":1289},"API Surface Guardrails",{"type":42,"tag":68,"props":1291,"children":1292},{},[1293,1336,1341,1425,1437],{"type":42,"tag":72,"props":1294,"children":1295},{},[1296,1298,1304,1306,1312,1314,1320,1321,1327,1328,1334],{"type":47,"value":1297},"Some examples wrap the bridge with an ",{"type":42,"tag":98,"props":1299,"children":1301},{"className":1300},[],[1302],{"type":47,"value":1303},"app",{"type":47,"value":1305}," object (for example, ",{"type":42,"tag":98,"props":1307,"children":1309},{"className":1308},[],[1310],{"type":47,"value":1311},"@modelcontextprotocol\u002Fext-apps\u002Freact",{"type":47,"value":1313},") and expose helper names like ",{"type":42,"tag":98,"props":1315,"children":1317},{"className":1316},[],[1318],{"type":47,"value":1319},"app.sendMessage()",{"type":47,"value":784},{"type":42,"tag":98,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":47,"value":1326},"app.callServerTool()",{"type":47,"value":784},{"type":42,"tag":98,"props":1329,"children":1331},{"className":1330},[],[1332],{"type":47,"value":1333},"app.openLink()",{"type":47,"value":1335},", or host getter methods.",{"type":42,"tag":72,"props":1337,"children":1338},{},[1339],{"type":47,"value":1340},"Treat those wrappers as implementation details or convenience layers, not the canonical public API to teach by default.",{"type":42,"tag":72,"props":1342,"children":1343},{},[1344,1346,1352,1353,1359,1360,1366,1367,1373,1375,1381,1382,1388,1389,1395,1396,1402,1403,1409,1410,1416,1418,1424],{"type":47,"value":1345},"For ChatGPT-facing guidance, prefer the current documented surface: ",{"type":42,"tag":98,"props":1347,"children":1349},{"className":1348},[],[1350],{"type":47,"value":1351},"window.openai.callTool(...)",{"type":47,"value":784},{"type":42,"tag":98,"props":1354,"children":1356},{"className":1355},[],[1357],{"type":47,"value":1358},"window.openai.sendFollowUpMessage(...)",{"type":47,"value":784},{"type":42,"tag":98,"props":1361,"children":1363},{"className":1362},[],[1364],{"type":47,"value":1365},"window.openai.openExternal(...)",{"type":47,"value":784},{"type":42,"tag":98,"props":1368,"children":1370},{"className":1369},[],[1371],{"type":47,"value":1372},"window.openai.requestDisplayMode(...)",{"type":47,"value":1374},", and direct globals like ",{"type":42,"tag":98,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":47,"value":1380},"window.openai.theme",{"type":47,"value":784},{"type":42,"tag":98,"props":1383,"children":1385},{"className":1384},[],[1386],{"type":47,"value":1387},"window.openai.locale",{"type":47,"value":784},{"type":42,"tag":98,"props":1390,"children":1392},{"className":1391},[],[1393],{"type":47,"value":1394},"window.openai.displayMode",{"type":47,"value":784},{"type":42,"tag":98,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":47,"value":1401},"window.openai.toolInput",{"type":47,"value":784},{"type":42,"tag":98,"props":1404,"children":1406},{"className":1405},[],[1407],{"type":47,"value":1408},"window.openai.toolOutput",{"type":47,"value":784},{"type":42,"tag":98,"props":1411,"children":1413},{"className":1412},[],[1414],{"type":47,"value":1415},"window.openai.toolResponseMetadata",{"type":47,"value":1417},", and ",{"type":42,"tag":98,"props":1419,"children":1421},{"className":1420},[],[1422],{"type":47,"value":1423},"window.openai.widgetState",{"type":47,"value":917},{"type":42,"tag":72,"props":1426,"children":1427},{},[1428,1430,1435],{"type":47,"value":1429},"If you reference wrapper helpers from repo examples, map them back to the documented ",{"type":42,"tag":98,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":47,"value":103},{"type":47,"value":1436}," or MCP Apps bridge primitives and call out that the wrapper is not the normative API surface.",{"type":42,"tag":72,"props":1438,"children":1439},{},[1440,1441,1446],{"type":47,"value":144},{"type":42,"tag":98,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":47,"value":368},{"type":47,"value":1447}," for the wrapper-to-canonical mapping and for React helper extraction patterns.",{"type":42,"tag":697,"props":1449,"children":1451},{"id":1450},"_5-add-resource-metadata-and-security",[1452],{"type":47,"value":1453},"5. Add Resource Metadata and Security",{"type":42,"tag":57,"props":1455,"children":1456},{},[1457],{"type":47,"value":1458},"Set resource metadata deliberately on the widget resource\u002Ftemplate:",{"type":42,"tag":68,"props":1460,"children":1461},{},[1462,1486,1497,1508],{"type":42,"tag":72,"props":1463,"children":1464},{},[1465,1471,1473,1479,1480],{"type":42,"tag":98,"props":1466,"children":1468},{"className":1467},[],[1469],{"type":47,"value":1470},"_meta.ui.csp",{"type":47,"value":1472}," with exact ",{"type":42,"tag":98,"props":1474,"children":1476},{"className":1475},[],[1477],{"type":47,"value":1478},"connectDomains",{"type":47,"value":609},{"type":42,"tag":98,"props":1481,"children":1483},{"className":1482},[],[1484],{"type":47,"value":1485},"resourceDomains",{"type":42,"tag":72,"props":1487,"children":1488},{},[1489,1495],{"type":42,"tag":98,"props":1490,"children":1492},{"className":1491},[],[1493],{"type":47,"value":1494},"_meta.ui.domain",{"type":47,"value":1496}," for app submission-ready deployments",{"type":42,"tag":72,"props":1498,"children":1499},{},[1500,1506],{"type":42,"tag":98,"props":1501,"children":1503},{"className":1502},[],[1504],{"type":47,"value":1505},"_meta.ui.prefersBorder",{"type":47,"value":1507}," (or OpenAI compatibility alias when needed)",{"type":42,"tag":72,"props":1509,"children":1510},{},[1511,1513,1519],{"type":47,"value":1512},"Optional ",{"type":42,"tag":98,"props":1514,"children":1516},{"className":1515},[],[1517],{"type":47,"value":1518},"openai\u002FwidgetDescription",{"type":47,"value":1520}," to reduce redundant narration",{"type":42,"tag":57,"props":1522,"children":1523},{},[1524,1526,1532],{"type":47,"value":1525},"Avoid ",{"type":42,"tag":98,"props":1527,"children":1529},{"className":1528},[],[1530],{"type":47,"value":1531},"frameDomains",{"type":47,"value":1533}," unless iframe embeds are core to the product.",{"type":42,"tag":697,"props":1535,"children":1537},{"id":1536},"_5a-enforce-a-minimum-working-repo-contract",[1538],{"type":47,"value":1539},"5a. Enforce A Minimum Working Repo Contract",{"type":42,"tag":57,"props":1541,"children":1542},{},[1543],{"type":47,"value":1544},"Every generated repo should satisfy a small, stable contract before you consider it done.",{"type":42,"tag":68,"props":1546,"children":1547},{},[1548,1553,1566,1571,1589,1594,1599],{"type":42,"tag":72,"props":1549,"children":1550},{},[1551],{"type":47,"value":1552},"The repo shape matches the chosen archetype.",{"type":42,"tag":72,"props":1554,"children":1555},{},[1556,1558,1564],{"type":47,"value":1557},"The MCP server and tools are wired to a reachable ",{"type":42,"tag":98,"props":1559,"children":1561},{"className":1560},[],[1562],{"type":47,"value":1563},"\u002Fmcp",{"type":47,"value":1565}," endpoint.",{"type":42,"tag":72,"props":1567,"children":1568},{},[1569],{"type":47,"value":1570},"Tools have clear descriptions, accurate annotations, and UI metadata where needed.",{"type":42,"tag":72,"props":1572,"children":1573},{},[1574,1576,1581,1582,1587],{"type":47,"value":1575},"Connector-like, data-only, sync-oriented, and company-knowledge-style apps use the standard ",{"type":42,"tag":98,"props":1577,"children":1579},{"className":1578},[],[1580],{"type":47,"value":607},{"type":47,"value":609},{"type":42,"tag":98,"props":1583,"children":1585},{"className":1584},[],[1586],{"type":47,"value":615},{"type":47,"value":1588}," tool shapes when relevant.",{"type":42,"tag":72,"props":1590,"children":1591},{},[1592],{"type":47,"value":1593},"The widget uses the MCP Apps bridge correctly when a UI exists.",{"type":42,"tag":72,"props":1595,"children":1596},{},[1597],{"type":47,"value":1598},"The repo includes enough scripts or commands for a user to run and check it locally.",{"type":42,"tag":72,"props":1600,"children":1601},{},[1602],{"type":47,"value":1603},"The response explicitly says what validation was run and what was not run.",{"type":42,"tag":57,"props":1605,"children":1606},{},[1607,1608,1613],{"type":47,"value":322},{"type":42,"tag":98,"props":1609,"children":1611},{"className":1610},[],[1612],{"type":47,"value":344},{"type":47,"value":1614}," for the detailed checklist and validation ladder.",{"type":42,"tag":697,"props":1616,"children":1618},{"id":1617},"_6-validate-the-local-loop",[1619],{"type":47,"value":1620},"6. Validate the Local Loop",{"type":42,"tag":57,"props":1622,"children":1623},{},[1624],{"type":47,"value":1625},"Validate against the minimum working repo contract, not just “did files get created.”",{"type":42,"tag":68,"props":1627,"children":1628},{},[1629,1659,1687],{"type":42,"tag":72,"props":1630,"children":1631},{},[1632,1634],{"type":47,"value":1633},"Run the lowest-cost checks first:\n",{"type":42,"tag":68,"props":1635,"children":1636},{},[1637,1642,1647],{"type":42,"tag":72,"props":1638,"children":1639},{},[1640],{"type":47,"value":1641},"static contract review",{"type":42,"tag":72,"props":1643,"children":1644},{},[1645],{"type":47,"value":1646},"syntax or compile checks when feasible",{"type":42,"tag":72,"props":1648,"children":1649},{},[1650,1652,1657],{"type":47,"value":1651},"local ",{"type":42,"tag":98,"props":1653,"children":1655},{"className":1654},[],[1656],{"type":47,"value":1563},{"type":47,"value":1658}," health check when feasible",{"type":42,"tag":72,"props":1660,"children":1661},{},[1662,1664],{"type":47,"value":1663},"Then move up to runtime checks:\n",{"type":42,"tag":68,"props":1665,"children":1666},{},[1667,1672,1677,1682],{"type":42,"tag":72,"props":1668,"children":1669},{},[1670],{"type":47,"value":1671},"verify tool descriptors and widget rendering in MCP Inspector",{"type":42,"tag":72,"props":1673,"children":1674},{},[1675],{"type":47,"value":1676},"test the app in ChatGPT developer mode through HTTPS tunneling",{"type":42,"tag":72,"props":1678,"children":1679},{},[1680],{"type":47,"value":1681},"exercise retries and repeated tool calls to confirm idempotent behavior",{"type":42,"tag":72,"props":1683,"children":1684},{},[1685],{"type":47,"value":1686},"check widget updates after host events and follow-up tool calls",{"type":42,"tag":72,"props":1688,"children":1689},{},[1690],{"type":47,"value":1691},"If you are only delivering a scaffold and are not installing dependencies, still run low-cost checks and say exactly what you did not run.",{"type":42,"tag":57,"props":1693,"children":1694},{},[1695,1696,1701],{"type":47,"value":322},{"type":42,"tag":98,"props":1697,"children":1699},{"className":1698},[],[1700],{"type":47,"value":344},{"type":47,"value":1702}," for the validation ladder.",{"type":42,"tag":697,"props":1704,"children":1706},{"id":1705},"_7-connect-and-test-in-chatgpt-developer-mode",[1707],{"type":47,"value":1708},"7. Connect and Test in ChatGPT (Developer Mode)",{"type":42,"tag":57,"props":1710,"children":1711},{},[1712],{"type":47,"value":1713},"For local development, include explicit ChatGPT setup steps (not just code\u002Frun commands).",{"type":42,"tag":68,"props":1715,"children":1716},{},[1717,1728,1740,1752,1762,1767],{"type":42,"tag":72,"props":1718,"children":1719},{},[1720,1722],{"type":47,"value":1721},"Run the MCP server locally on ",{"type":42,"tag":98,"props":1723,"children":1725},{"className":1724},[],[1726],{"type":47,"value":1727},"http:\u002F\u002Flocalhost:\u003Cport>\u002Fmcp",{"type":42,"tag":72,"props":1729,"children":1730},{},[1731,1733,1739],{"type":47,"value":1732},"Expose the local server with a public HTTPS tunnel (for example ",{"type":42,"tag":98,"props":1734,"children":1736},{"className":1735},[],[1737],{"type":47,"value":1738},"ngrok http \u003Cport>",{"type":47,"value":1237},{"type":42,"tag":72,"props":1741,"children":1742},{},[1743,1745,1750],{"type":47,"value":1744},"Use the tunneled HTTPS URL plus ",{"type":42,"tag":98,"props":1746,"children":1748},{"className":1747},[],[1749],{"type":47,"value":1563},{"type":47,"value":1751}," path when connecting from ChatGPT",{"type":42,"tag":72,"props":1753,"children":1754},{},[1755,1757],{"type":47,"value":1756},"In ChatGPT, enable Developer Mode under ",{"type":42,"tag":647,"props":1758,"children":1759},{},[1760],{"type":47,"value":1761},"Settings → Apps & Connectors → Advanced settings",{"type":42,"tag":72,"props":1763,"children":1764},{},[1765],{"type":47,"value":1766},"In ChatGPT app settings, create a new app for the remote MCP server and paste the public MCP URL",{"type":42,"tag":72,"props":1768,"children":1769},{},[1770],{"type":47,"value":1771},"Tell users to refresh the app after MCP tool\u002Fmetadata changes so ChatGPT reloads the latest descriptors",{"type":42,"tag":57,"props":1773,"children":1774},{},[1775],{"type":47,"value":1776},"Note: Some docs\u002Fscreenshots still use older \"connector\" terminology. Prefer current product wording (\"app\") while acknowledging both labels when giving step-by-step instructions.",{"type":42,"tag":697,"props":1778,"children":1780},{"id":1779},"_8-plan-production-hosting-and-deployment",[1781],{"type":47,"value":1782},"8. Plan Production Hosting and Deployment",{"type":42,"tag":57,"props":1784,"children":1785},{},[1786],{"type":47,"value":1787},"When the user asks to deploy or prepare for launch, generate hosting guidance for the MCP server (and widget assets if hosted separately).",{"type":42,"tag":68,"props":1789,"children":1790},{},[1791,1796,1806,1811,1816,1821],{"type":42,"tag":72,"props":1792,"children":1793},{},[1794],{"type":47,"value":1795},"Host behind a stable public HTTPS endpoint (not a tunnel) with dependable TLS",{"type":42,"tag":72,"props":1797,"children":1798},{},[1799,1801],{"type":47,"value":1800},"Preserve low-latency streaming behavior on ",{"type":42,"tag":98,"props":1802,"children":1804},{"className":1803},[],[1805],{"type":47,"value":1563},{"type":42,"tag":72,"props":1807,"children":1808},{},[1809],{"type":47,"value":1810},"Configure secrets outside the repo (environment variables \u002F secret manager)",{"type":42,"tag":72,"props":1812,"children":1813},{},[1814],{"type":47,"value":1815},"Add logging, request latency tracking, and error visibility for tool calls",{"type":42,"tag":72,"props":1817,"children":1818},{},[1819],{"type":47,"value":1820},"Add basic observability (CPU, memory, request volume) and a troubleshooting path",{"type":42,"tag":72,"props":1822,"children":1823},{},[1824],{"type":47,"value":1825},"Re-test the hosted endpoint in ChatGPT Developer Mode before submission",{"type":42,"tag":697,"props":1827,"children":1829},{"id":1828},"_9-prepare-submission-and-publish-public-apps-only",[1830],{"type":47,"value":1831},"9. Prepare Submission and Publish (Public Apps Only)",{"type":42,"tag":57,"props":1833,"children":1834},{},[1835],{"type":47,"value":1836},"Only include these steps when the user intends a public directory listing.",{"type":42,"tag":68,"props":1838,"children":1839},{},[1840,1858,1863,1868,1873,1878,1883],{"type":42,"tag":72,"props":1841,"children":1842},{},[1843,1844,1849,1851,1856],{"type":47,"value":144},{"type":42,"tag":98,"props":1845,"children":1847},{"className":1846},[],[1848],{"type":47,"value":260},{"type":47,"value":1850}," for the submission flow and ",{"type":42,"tag":98,"props":1852,"children":1854},{"className":1853},[],[1855],{"type":47,"value":269},{"type":47,"value":1857}," for review requirements",{"type":42,"tag":72,"props":1859,"children":1860},{},[1861],{"type":47,"value":1862},"Keep private\u002Finternal apps in Developer Mode instead of submitting",{"type":42,"tag":72,"props":1864,"children":1865},{},[1866],{"type":47,"value":1867},"Confirm org verification and Owner-role prerequisites before submission work",{"type":42,"tag":72,"props":1869,"children":1870},{},[1871],{"type":47,"value":1872},"Ensure the MCP server uses a public production endpoint (no localhost\u002Ftesting URLs) and has submission-ready CSP configured",{"type":42,"tag":72,"props":1874,"children":1875},{},[1876],{"type":47,"value":1877},"Prepare submission artifacts: app metadata, logo\u002Fscreenshots, privacy policy URL, support contact, test prompts\u002Fresponses, localization info",{"type":42,"tag":72,"props":1879,"children":1880},{},[1881],{"type":47,"value":1882},"If auth is required, include review-safe demo credentials and test the login path end-to-end",{"type":42,"tag":72,"props":1884,"children":1885},{},[1886],{"type":47,"value":1887},"Submit for review in the Platform dashboard, monitor review status, and publish only after approval",{"type":42,"tag":50,"props":1889,"children":1891},{"id":1890},"interactive-state-guidance",[1892],{"type":47,"value":1893},"Interactive State Guidance",{"type":42,"tag":57,"props":1895,"children":1896},{},[1897,1898,1904],{"type":47,"value":322},{"type":42,"tag":98,"props":1899,"children":1901},{"className":1900},[],[1902],{"type":47,"value":1903},"references\u002Finteractive-state-sync-patterns.md",{"type":47,"value":1905}," when the app has long-lived widget state, repeated interactions, or component-initiated tool calls (for example, games, boards, maps, dashboards, editors).",{"type":42,"tag":57,"props":1907,"children":1908},{},[1909],{"type":47,"value":1910},"Use it to choose patterns for:",{"type":42,"tag":68,"props":1912,"children":1913},{},[1914,1934,1939,1956,1968],{"type":42,"tag":72,"props":1915,"children":1916},{},[1917,1919,1925,1926,1932],{"type":47,"value":1918},"State snapshots plus monotonic event tokens (",{"type":42,"tag":98,"props":1920,"children":1922},{"className":1921},[],[1923],{"type":47,"value":1924},"stateVersion",{"type":47,"value":784},{"type":42,"tag":98,"props":1927,"children":1929},{"className":1928},[],[1930],{"type":47,"value":1931},"resetCount",{"type":47,"value":1933},", etc.)",{"type":42,"tag":72,"props":1935,"children":1936},{},[1937],{"type":47,"value":1938},"Idempotent retry-safe handlers",{"type":42,"tag":72,"props":1940,"children":1941},{},[1942,1947,1949,1954],{"type":42,"tag":98,"props":1943,"children":1945},{"className":1944},[],[1946],{"type":47,"value":915},{"type":47,"value":1948}," vs ",{"type":42,"tag":98,"props":1950,"children":1952},{"className":1951},[],[1953],{"type":47,"value":1157},{"type":47,"value":1955}," partitioning",{"type":42,"tag":72,"props":1957,"children":1958},{},[1959,1961,1966],{"type":47,"value":1960},"MCP Apps bridge-first update flows with optional ",{"type":42,"tag":98,"props":1962,"children":1964},{"className":1963},[],[1965],{"type":47,"value":103},{"type":47,"value":1967}," compatibility",{"type":42,"tag":72,"props":1969,"children":1970},{},[1971],{"type":47,"value":1972},"Decoupled data\u002Frender tool architecture for more complex interactive apps",{"type":42,"tag":50,"props":1974,"children":1976},{"id":1975},"output-expectations",[1977],{"type":47,"value":1978},"Output Expectations",{"type":42,"tag":57,"props":1980,"children":1981},{},[1982],{"type":47,"value":1983},"When using this skill to scaffold code, produce output in this order unless the user asks otherwise:",{"type":42,"tag":68,"props":1985,"children":1986},{},[1987],{"type":42,"tag":72,"props":1988,"children":1989},{},[1990],{"type":47,"value":1991},"For direct scaffold requests, do not stop at the plan: give the brief plan, then create the files immediately.",{"type":42,"tag":154,"props":1993,"children":1994},{},[1995,2000,2005,2010,2020,2025,2030,2035,2040,2045,2050],{"type":42,"tag":72,"props":1996,"children":1997},{},[1998],{"type":47,"value":1999},"Primary app archetype chosen and why",{"type":42,"tag":72,"props":2001,"children":2002},{},[2003],{"type":47,"value":2004},"Tool plan and architecture choice (minimal vs decoupled)",{"type":42,"tag":72,"props":2006,"children":2007},{},[2008],{"type":47,"value":2009},"Upstream starting point chosen (official example, ext-apps example, or local fallback scaffold) and why",{"type":42,"tag":72,"props":2011,"children":2012},{},[2013,2015],{"type":47,"value":2014},"Doc pages\u002FURLs used from ",{"type":42,"tag":98,"props":2016,"children":2018},{"className":2017},[],[2019],{"type":47,"value":150},{"type":42,"tag":72,"props":2021,"children":2022},{},[2023],{"type":47,"value":2024},"File tree to create or modify",{"type":42,"tag":72,"props":2026,"children":2027},{},[2028],{"type":47,"value":2029},"Implementation (server + widget)",{"type":42,"tag":72,"props":2031,"children":2032},{},[2033],{"type":47,"value":2034},"Validation performed against the minimum working repo contract",{"type":42,"tag":72,"props":2036,"children":2037},{},[2038],{"type":47,"value":2039},"Local run\u002Ftest instructions (including tunnel + ChatGPT Developer Mode app setup)",{"type":42,"tag":72,"props":2041,"children":2042},{},[2043],{"type":47,"value":2044},"Deployment\u002Fhosting guidance (if requested or implied)",{"type":42,"tag":72,"props":2046,"children":2047},{},[2048],{"type":47,"value":2049},"Submission-readiness checklist (for public launch requests)",{"type":42,"tag":72,"props":2051,"children":2052},{},[2053],{"type":47,"value":2054},"Risks, gaps, and follow-up improvements",{"type":42,"tag":50,"props":2056,"children":2058},{"id":2057},"references",[2059],{"type":47,"value":2060},"References",{"type":42,"tag":68,"props":2062,"children":2063},{},[2064,2074,2084,2094,2104,2127,2137,2147],{"type":42,"tag":72,"props":2065,"children":2066},{},[2067,2072],{"type":42,"tag":98,"props":2068,"children":2070},{"className":2069},[],[2071],{"type":47,"value":336},{"type":47,"value":2073}," for classifying requests into a small number of supported app shapes",{"type":42,"tag":72,"props":2075,"children":2076},{},[2077,2082],{"type":42,"tag":98,"props":2078,"children":2080},{"className":2079},[],[2081],{"type":47,"value":328},{"type":47,"value":2083}," for doc queries, page targets, and code-generation checklist",{"type":42,"tag":72,"props":2085,"children":2086},{},[2087,2092],{"type":42,"tag":98,"props":2088,"children":2090},{"className":2089},[],[2091],{"type":47,"value":1903},{"type":47,"value":2093}," for reusable patterns for stateful or highly interactive widget apps",{"type":42,"tag":72,"props":2095,"children":2096},{},[2097,2102],{"type":42,"tag":98,"props":2098,"children":2100},{"className":2099},[],[2101],{"type":47,"value":344},{"type":47,"value":2103}," for the minimum working repo contract and lightweight validation ladder",{"type":42,"tag":72,"props":2105,"children":2106},{},[2107,2112,2114,2119,2120,2125],{"type":42,"tag":98,"props":2108,"children":2110},{"className":2109},[],[2111],{"type":47,"value":352},{"type":47,"value":2113}," for when and how to default to the standard ",{"type":42,"tag":98,"props":2115,"children":2117},{"className":2116},[],[2118],{"type":47,"value":607},{"type":47,"value":609},{"type":42,"tag":98,"props":2121,"children":2123},{"className":2122},[],[2124],{"type":47,"value":615},{"type":47,"value":2126}," tools",{"type":42,"tag":72,"props":2128,"children":2129},{},[2130,2135],{"type":42,"tag":98,"props":2131,"children":2133},{"className":2132},[],[2134],{"type":47,"value":360},{"type":47,"value":2136}," for choosing between official examples, ext-apps examples, and the local fallback scaffold",{"type":42,"tag":72,"props":2138,"children":2139},{},[2140,2145],{"type":42,"tag":98,"props":2141,"children":2143},{"className":2142},[],[2144],{"type":47,"value":368},{"type":47,"value":2146}," for ChatGPT-specific extensions, wrapper API translation, and React helper patterns",{"type":42,"tag":72,"props":2148,"children":2149},{},[2150,2155,2157,2162],{"type":42,"tag":98,"props":2151,"children":2153},{"className":2152},[],[2154],{"type":47,"value":682},{"type":47,"value":2156}," for a minimal Node + ",{"type":42,"tag":98,"props":2158,"children":2160},{"className":2159},[],[2161],{"type":47,"value":116},{"type":47,"value":2163}," fallback starter scaffold",{"items":2165,"total":2284},[2166,2184,2200,2212,2232,2252,2272],{"slug":2167,"name":2167,"fn":2168,"description":2169,"org":2170,"tags":2171,"stars":25,"repoUrl":26,"updatedAt":27},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2172,2175,2178,2181],{"name":2173,"slug":2174,"type":15},"Accessibility","accessibility",{"name":2176,"slug":2177,"type":15},"Charts","charts",{"name":2179,"slug":2180,"type":15},"Data Visualization","data-visualization",{"name":2182,"slug":2183,"type":15},"Design","design",{"slug":2185,"name":2185,"fn":2186,"description":2187,"org":2188,"tags":2189,"stars":25,"repoUrl":26,"updatedAt":2199},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2190,2193,2196],{"name":2191,"slug":2192,"type":15},"Agents","agents",{"name":2194,"slug":2195,"type":15},"Browser Automation","browser-automation",{"name":2197,"slug":2198,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":2201,"name":2201,"fn":2202,"description":2203,"org":2204,"tags":2205,"stars":25,"repoUrl":26,"updatedAt":2211},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2206,2207,2210],{"name":2194,"slug":2195,"type":15},{"name":2208,"slug":2209,"type":15},"Local Development","local-development",{"name":2197,"slug":2198,"type":15},"2026-04-06T18:41:17.526867",{"slug":2213,"name":2213,"fn":2214,"description":2215,"org":2216,"tags":2217,"stars":25,"repoUrl":26,"updatedAt":2231},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2218,2219,2222,2225,2228],{"name":2191,"slug":2192,"type":15},{"name":2220,"slug":2221,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":2223,"slug":2224,"type":15},"SDK","sdk",{"name":2226,"slug":2227,"type":15},"Serverless","serverless",{"name":2229,"slug":2230,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":2233,"name":2233,"fn":2234,"description":2235,"org":2236,"tags":2237,"stars":25,"repoUrl":26,"updatedAt":2251},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2238,2241,2244,2247,2248],{"name":2239,"slug":2240,"type":15},"Frontend","frontend",{"name":2242,"slug":2243,"type":15},"React","react",{"name":2245,"slug":2246,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":23,"slug":24,"type":15},{"name":2249,"slug":2250,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":2253,"name":2253,"fn":2254,"description":2255,"org":2256,"tags":2257,"stars":25,"repoUrl":26,"updatedAt":2271},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2258,2261,2264,2267,2270],{"name":2259,"slug":2260,"type":15},"AI Infrastructure","ai-infrastructure",{"name":2262,"slug":2263,"type":15},"Cost Optimization","cost-optimization",{"name":2265,"slug":2266,"type":15},"LLM","llm",{"name":2268,"slug":2269,"type":15},"Performance","performance",{"name":2249,"slug":2250,"type":15},"2026-04-06T18:40:44.377464",{"slug":2273,"name":2273,"fn":2274,"description":2275,"org":2276,"tags":2277,"stars":25,"repoUrl":26,"updatedAt":2283},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2278,2279,2282],{"name":2262,"slug":2263,"type":15},{"name":2280,"slug":2281,"type":15},"Database","database",{"name":2265,"slug":2266,"type":15},"2026-04-06T18:41:08.513425",600,{"items":2286,"total":2475},[2287,2308,2331,2340,2356,2373,2392,2404,2418,2432,2444,2459],{"slug":2288,"name":2288,"fn":2289,"description":2290,"org":2291,"tags":2292,"stars":2305,"repoUrl":2306,"updatedAt":2307},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2293,2296,2299,2302],{"name":2294,"slug":2295,"type":15},"Documents","documents",{"name":2297,"slug":2298,"type":15},"Healthcare","healthcare",{"name":2300,"slug":2301,"type":15},"Insurance","insurance",{"name":2303,"slug":2304,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":2309,"name":2309,"fn":2310,"description":2311,"org":2312,"tags":2313,"stars":2328,"repoUrl":2329,"updatedAt":2330},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2314,2317,2319,2322,2325],{"name":2315,"slug":2316,"type":15},".NET","dotnet",{"name":2318,"slug":2309,"type":15},"ASP.NET Core",{"name":2320,"slug":2321,"type":15},"Blazor","blazor",{"name":2323,"slug":2324,"type":15},"C#","csharp",{"name":2326,"slug":2327,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":2332,"name":2332,"fn":5,"description":6,"org":2333,"tags":2334,"stars":2328,"repoUrl":2329,"updatedAt":2339},"chatgpt-apps",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2335,2336,2337,2338],{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":2341,"name":2341,"fn":2342,"description":2343,"org":2344,"tags":2345,"stars":2328,"repoUrl":2329,"updatedAt":2355},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2346,2349,2352],{"name":2347,"slug":2348,"type":15},"API Development","api-development",{"name":2350,"slug":2351,"type":15},"CLI","cli",{"name":2353,"slug":2354,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":2357,"name":2357,"fn":2358,"description":2359,"org":2360,"tags":2361,"stars":2328,"repoUrl":2329,"updatedAt":2372},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2362,2365,2368,2369],{"name":2363,"slug":2364,"type":15},"Cloudflare","cloudflare",{"name":2366,"slug":2367,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":2220,"slug":2221,"type":15},{"name":2370,"slug":2371,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":2374,"name":2374,"fn":2375,"description":2376,"org":2377,"tags":2378,"stars":2328,"repoUrl":2329,"updatedAt":2391},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2379,2382,2385,2388],{"name":2380,"slug":2381,"type":15},"Productivity","productivity",{"name":2383,"slug":2384,"type":15},"Project Management","project-management",{"name":2386,"slug":2387,"type":15},"Strategy","strategy",{"name":2389,"slug":2390,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":2393,"name":2393,"fn":2394,"description":2395,"org":2396,"tags":2397,"stars":2328,"repoUrl":2329,"updatedAt":2403},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2398,2399,2401,2402],{"name":2182,"slug":2183,"type":15},{"name":2400,"slug":2393,"type":15},"Figma",{"name":2239,"slug":2240,"type":15},{"name":20,"slug":21,"type":15},"2026-04-12T05:06:47.939943",{"slug":2405,"name":2405,"fn":2406,"description":2407,"org":2408,"tags":2409,"stars":2328,"repoUrl":2329,"updatedAt":2417},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2410,2411,2414,2415,2416],{"name":2182,"slug":2183,"type":15},{"name":2412,"slug":2413,"type":15},"Design System","design-system",{"name":2400,"slug":2393,"type":15},{"name":2239,"slug":2240,"type":15},{"name":23,"slug":24,"type":15},"2026-05-10T05:59:52.971881",{"slug":2419,"name":2419,"fn":2420,"description":2421,"org":2422,"tags":2423,"stars":2328,"repoUrl":2329,"updatedAt":2431},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2424,2425,2426,2429,2430],{"name":2182,"slug":2183,"type":15},{"name":2412,"slug":2413,"type":15},{"name":2427,"slug":2428,"type":15},"Documentation","documentation",{"name":2400,"slug":2393,"type":15},{"name":2239,"slug":2240,"type":15},"2026-05-16T06:07:47.821474",{"slug":2433,"name":2433,"fn":2434,"description":2435,"org":2436,"tags":2437,"stars":2328,"repoUrl":2329,"updatedAt":2443},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2438,2439,2440,2441,2442],{"name":2182,"slug":2183,"type":15},{"name":2400,"slug":2393,"type":15},{"name":2239,"slug":2240,"type":15},{"name":23,"slug":24,"type":15},{"name":2326,"slug":2327,"type":15},"2026-05-16T06:07:40.583615",{"slug":2445,"name":2445,"fn":2446,"description":2447,"org":2448,"tags":2449,"stars":2328,"repoUrl":2329,"updatedAt":2458},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2450,2453,2454,2457],{"name":2451,"slug":2452,"type":15},"Animation","animation",{"name":2353,"slug":2354,"type":15},{"name":2455,"slug":2456,"type":15},"Creative","creative",{"name":2182,"slug":2183,"type":15},"2026-05-02T05:31:48.48485",{"slug":2460,"name":2460,"fn":2461,"description":2462,"org":2463,"tags":2464,"stars":2328,"repoUrl":2329,"updatedAt":2474},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2465,2466,2467,2470,2473],{"name":2455,"slug":2456,"type":15},{"name":2182,"slug":2183,"type":15},{"name":2468,"slug":2469,"type":15},"Image Generation","image-generation",{"name":2471,"slug":2472,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]