How does this skill handle security during migration?

It guides you through a mandatory CSP investigation to identify all origin domains (resource, connect, and frame) and ensures they are correctly declared in the registerAppResource configuration.

What is the main difference between OpenAI Apps and MCP Apps?

OpenAI Apps use a synchronous global window.openai object pre-populated with data, while MCP Apps use an asynchronous App instance with event handlers like ontoolinput and ontoolresult.

Are all OpenAI features currently supported in MCP Apps?

No, some features like modal management (requestModal), file operations, and progress indicators are not yet available and require specific workarounds documented in the skill.

Which frontend frameworks are supported by this migration skill?

The skill provides specific implementation patterns and reference code for React, Vue, Svelte, Preact, Solid, and Vanilla JavaScript.

OpenAI to MCP Migration

Name: OpenAI to MCP Migration
Author: modelcontextprotocol

bymodelcontextprotocol

•

1,692

•

API Development

Guides the conversion of OpenAI Apps SDK applications to the standardized Model Context Protocol (MCP) Apps SDK with comprehensive API mapping and security auditing.

This skill provides a structured pathway for developers to port interactive UIs from the legacy OpenAI Apps SDK to the open Model Context Protocol (@modelcontextprotocol/ext-apps). it assists with the fundamental paradigm shift from synchronous global objects to asynchronous event-driven architectures. The skill automates the discovery of required Content Security Policy (CSP) origins, maps server-side tool registrations, and provides framework-specific patterns for React, Vue, Svelte, and more to ensure a seamless transition to the MCP ecosystem.

Key Features

01Server-side helper conversion for tools and resource registration

021,692 GitHub stars

03Step-by-step API mapping from OpenAI SDK to MCP Apps SDK

04Production-readiness checklist for CORS and header configurations

05Automated CSP origin investigation for secure sandboxed iframes

06Framework-specific migration templates for React, Vue, and Svelte

Use Cases

01Migrating existing OpenAI-based interactive tools to the open MCP standard

02Converting synchronous window.openai logic to async App lifecycle handlers

03Standardizing UI security by auditing and mapping network origins to CSP

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add modelcontextprotocol/ext-apps migrate-oai-app

For use in Claude.ai and ChatGPT

Download Skill