migrate-oai-app

Par tldraw · tldraw

Skill Claude pour guider la migration d'applications OpenAI Apps SDK vers le MCP Apps SDK, avec tableaux de correspondance API et checklist détaillée.

npx skills add https://github.com/tldraw/tldraw --skill migrate-oai-app

migrate-oai-app

Ce skill est utilisé par Claude pour assister les développeurs qui souhaitent convertir une application basée sur l'OpenAI Apps SDK (anciennement appelé « skybridge », utilisant window.openai) vers le MCP Apps SDK (@modelcontextprotocol/ext-apps). Il s'agit d'un skill opérationnel, complet et documenté — pas d'un simple squelette.

Le skill se trouve dans le dépôt tldraw/tldraw, sous apps/mcp-app/.claude/skills/, ce qui indique qu'il est utilisé dans le contexte de l'application MCP intégrée à tldraw. Il permet à Claude de piloter une migration pas à pas, en s'appuyant sur la documentation et les exemples du SDK cloné localement.

Ce que couvre ce skill

Lorsque ce skill est activé, Claude commence par cloner le dépôt @modelcontextprotocol/ext-apps pour accéder à la documentation de migration et aux exemples de référence (VanillaJS, React, Vue, Svelte, Preact, Solid). Il guide ensuite la migration sur plusieurs axes :

  • Côté serveur : remplacement de server.registerTool() / server.registerResource() par les helpers registerAppTool() et registerAppResource().
  • Côté client : passage du modèle synchrone basé sur window.openai vers une instance App avec gestionnaires d'événements asynchrones (ontoolinput, ontoolresult, onhostcontextchanged).
  • Configuration CSP et CORS : investigation systématique de toutes les origines référencées par l'application pour construire une configuration Content Security Policy correcte dans registerAppResource().
  • Fonctionnalités non encore disponibles : le skill liste explicitement les fonctionnalités OpenAI sans équivalent MCP actuel (gestion de fichiers, modales, widgetState, etc.).

Checklist et tests

Le skill inclut une checklist « Before Finishing » que Claude doit parcourir explicitement avant de considérer la migration terminée : vérification des patterns OpenAI résiduels côté serveur et côté client, validation de la configuration CSP pour chaque origine identifiée, et gestion des origines conditionnelles (dev vs. prod). Une section de test avec basic-host permet de vérifier le comportement à l'exécution une fois la migration appliquée.

Skills similaires