Agent skill · software engineering · modelcontextprotocol
migrate-oai-app
This skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK. Provides step-by-step migration guidance with API mapping tables.
Why this skill is useful
Provides detailed migration guidance and API mapping tables for transitioning from OpenAI Apps SDK to MCP Apps SDK, which the AI wouldn't reliably generate on its own.
What it needs
Requires git, npm installed locally. About 4k tokens when loaded. Last updated 2026-07-23. 2,691 stars on the source repository.
What this skill does
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: Migration Reference Guide Read the migration reference guide with "before/after" mapping tables: /tmp/mcp-ext-apps/docs/migratefromopenaiapps.md API Reference (Source Files) Read JSDoc documentation directly from /tmp/mcp-ext-apps/src/: File Contents ------ ---------- src/app.ts App class, handlers, lifecycle src/server/index.ts registerAppTool, registerAppResource src/spec.types.ts Type definitions src/react/useApp.tsx useApp hook for React apps src/react/use.ts Other use hooks for React apps Front-End Framework Examples See /tmp/mcp-ext-apps/examples/basic-server-{framework}/ for basic SDK usage examples organized by front-end framework: Template Key Files ---------- ----------- basic-server-vanillajs/ server.ts, src/mcp-app.ts, mcp-app.html basic-server-react/ server.ts, src/mcp-app.tsx (uses useApp hook) basic-server-vue/ server.ts, src/App.vue basic-server-svelte/ server.ts, src/App.svelte basic-server-preact/ server.ts, src/mcp-app.tsx basic-server-solid/ server.ts, src/mcp-app.tsx CSP Investigation MCP Apps HTML is served as an MCP resource, not as a web page, and runs in a sandboxed iframe with no same-origin server. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills modelcontextprotocol/migrate-oai-app