Migrate Oai App

Converts OpenAI Apps SDK projects to the MCP Apps SDK by walking you through the server and client-side changes. The main shift is moving from synchronous window.openai globals to an async App instance with event handlers. It clones the SDK repo for reference docs and working examples across React, Vue, Svelte, and vanilla JS. The CSP investigation step is smart: it forces you to build first and document every origin before writing migration code, since MCP apps run in sandboxed iframes where missing origins fail silently. Also maps the metadata format changes and flags features that don't have MCP equivalents yet, like file uploads and modal management.

skills.sh installs: 1.1K
GitHub stars: 3.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add modelcontextprotocol/ext-apps --skill migrate-oai-app --agent claude-code

Installs into .claude/skills of the current project.

Files

Migrate OpenAI App to MCP

Migrate existing OpenAI Apps SDK applications to the MCP Apps SDK (@modelcontextprotocol/ext-apps). The MCP Apps SDK provides a standardized, open protocol for interactive UIs in conversational clients.

Best Practices

Use your package manager to add dependencies (e.g., npm install, pnpm add, yarn add) instead of manually writing version numbers. This lets the package manager resolve the latest compatible versions. Never specify version numbers from memory.
Preemptively add a final todo item with this exact wording: "Re-read the 'Before Finishing' checklist in this skill and address each checkbox individually, stating what you did for each one, before marking this todo complete."

Getting Reference Code

Clone the SDK repository for complete migration documentation and working examples:

git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps