Connecter Codex à Framer : le guide complet et ce qui change vs Claude Code

Framer a ouvert ses projets aux agents externes. Claude Code, Cursor, Windsurf, Antigravity — et Codex, l'agent d'OpenAI. Si tu travailles déjà dans l'écosystème ChatGPT, c'est probablement par là que tu veux passer.

Bonne nouvelle : la procédure est simple. Moins bonne nouvelle : Codex existe en quatre versions différentes, et toutes ne peuvent pas se connecter à Framer. C'est le point sur lequel la documentation officielle reste muette, et c'est là que la plupart des gens se bloquent.

La procédure de connexion, étape par étape

Le prérequis à vérifier d'abord

Framer demande Node.js en version 24 ou supérieure. Vérifie-le avant tout le reste, sinon les commandes échoueront sans explication claire :

node --version

Si tu es en dessous de 24, mets Node à jour avant de continuer. C'est la cause numéro un des échecs de connexion.

Étape 1 : installer les skills Framer

Dans ton terminal :

npx @framer/agent@latest setup

Cette commande installe les compétences Framer dans des dossiers partagés de ton système. Elles contiennent la documentation de l'API, les règles de mise en page et les recettes CMS — tout ce qui permet à l'agent de comprendre comment un projet Framer est structuré, au lieu de deviner.

Étape 2 : connecter ton projet

Récupère l'URL de ton projet dans la barre d'adresse de Framer, puis lance :

npx @framer/agent@latest session new "<url de ton projet>"

Ton navigateur s'ouvre, tu approuves l'accès, et la commande te renvoie un identifiant de session à réutiliser ensuite.

C'est tout. Pas de clé API à générer, pas de plugin MCP à installer, pas de fichier de configuration à maintenir.

Quelle version de Codex choisir : le vrai point de friction

Voilà ce que la documentation ne dit pas clairement. Codex n'est pas un outil, c'est une famille. Et la connexion Framer repose sur deux capacités précises : lancer une commande dans un terminal, et ouvrir ton navigateur pour approuver l'accès.

Toutes les versions de Codex ne réunissent pas ces deux conditions.

Codex CLI — le chemin le plus direct

C'est la version en ligne de commande, installée sur ta machine. Elle lit ton système de fichiers, exécute des commandes, itère sur les résultats. Elle coche les deux cases sans discussion. Si tu débutes, commence par là.

L'extension IDE — pratique si tu vis déjà dans VS Code

Codex s'intègre à VS Code, Cursor et Windsurf. Le terminal intégré de l'éditeur fait le travail, et tu gardes ton projet sous les yeux. C'est confortable si ton quotidien s'y déroule déjà.

L'app desktop — même logique, autre enveloppe

Elle tourne localement et accède à ta machine. Le fonctionnement est comparable à celui de la CLI.

L'agent cloud — celui qui pose question

Codex propose aussi un agent hébergé, accessible depuis ChatGPT. Framer mentionne « Codex in ChatGPT » parmi les intégrations supportées, mais la procédure de connexion décrite repose sur un terminal local et une approbation dans ton navigateur.

Nous n'avons pas testé cette configuration, et la documentation officielle ne la détaille pas. Si c'est ton usage principal, vérifie-le sur un projet de test avant de compter dessus. Ne construis pas un workflow sur une hypothèse.

Ce qui est identique à Claude Code

Si tu as déjà lu notre guide sur la connexion de Claude à Framer, tu as peut-être une impression de déjà-vu. C'est normal : Framer a fait le choix d'une procédure unique pour tous les agents.

Mêmes commandes, même autorisation navigateur, mêmes skills installées. Framer résume sa position ainsi : son agent fonctionne avec n'importe quelle IA capable de lancer une commande terminale.

C'est une vraie bonne nouvelle pour toi :

• Tu n'es pas enfermé. Si Codex ne te convient pas, tu bascules sur un autre agent sans rien réapprendre.

• Tu peux comparer. Rien n'empêche d'ouvrir une session avec un agent, puis une autre avec un second, sur le même projet.

• Ta compétence est transférable. Ce que tu apprends ici vaut pour Cursor, Windsurf ou ce qui sortira dans six mois.

Ce que ça change concrètement sur un projet Framer

Une fois la session ouverte, l'agent lit ton projet : pages, composants, collections CMS, styles de couleur, polices. Il travaille sur la structure réelle de ton site, pas sur une description que tu lui aurais faite.

En pratique, ça déplace le travail répétitif :

• Le contenu CMS — créer, modifier et structurer des articles sans passer par l'interface, champ par champ.

• Les métadonnées — title, description et données structurées sur un lot de pages en une seule instruction.

• Les corrections en masse — passer tout un site au tutoiement, remplacer une formulation partout, vérifier qu'aucune occurrence n'a été oubliée.

• Les audits — repérer les liens morts, les images sans texte alternatif, les pages sans description.

Ce n'est pas de la magie : c'est du travail fastidieux qui passe d'une demi-journée à quelques minutes. Pour un freelance qui facture au projet, c'est de la marge directe. On détaille cette logique dans notre guide ultime de Framer.

Les limites à connaître avant de t'y mettre

• L'autorisation expire. Si tu automatises des tâches sans personne devant l'écran, une session périmée bloquera l'exécution en attendant un clic qui ne viendra jamais. En usage direct, tu réautorises en deux secondes.

• Relis toujours avant de publier. Un agent qui se trompe sur dix pages se trompe vite et bien. Framer recommande de travailler sur une branche pour les changements sensibles, et de prévisualiser avant d'appliquer.

• N'autorise que le projet concerné. Pas l'ensemble de ton compte.

• Le design reste ton métier. L'agent exécute et vérifie. Il ne décide pas à ta place de ce qui est beau ou de ce qui convertit.

FAQ

La procédure est-elle différente de celle pour Claude Code ?

Non. Framer a fait le choix d'un flux unique : mêmes commandes, même autorisation navigateur, mêmes skills. Ce qui change, c'est la version de Codex que tu utilises, pas la connexion elle-même.

Quelle version de Node.js faut-il ?

Node.js 24 ou supérieur. Vérifie avec node --version avant de lancer quoi que ce soit : c'est la cause la plus fréquente d'échec.

Est-ce que l'agent cloud de Codex fonctionne avec Framer ?

Framer liste « Codex in ChatGPT » parmi les intégrations supportées, mais la procédure documentée repose sur un terminal local et une approbation dans ton navigateur. Teste-le sur un projet sans enjeu avant d'en dépendre.

Faut-il payer en plus pour connecter Codex à Framer ?

Framer n'ajoute pas de coût pour la connexion elle-même. Côté OpenAI, Codex s'appuie sur ton compte ChatGPT et sur son quota d'usage — c'est le même abonnement qui alimente le chat et l'agent.

Puis-je utiliser Codex et Claude Code sur le même projet ?

Les skills s'installent dans des dossiers partagés et chaque session est indépendante, donc rien ne s'y oppose. Évite simplement de faire travailler deux agents en même temps sur les mêmes pages : tu perdrais la trace de qui a modifié quoi.

Par où commencer

Si tu veux tester : installe Codex CLI, vérifie ta version de Node, lance les deux commandes sur un projet Framer sans enjeu. Compte dix minutes. Donne-lui ensuite une tâche pénible mais réversible — réécrire les meta-descriptions d'une section, par exemple — et regarde ce qu'il en fait.

C'est le meilleur test possible : une tâche que tu détestes, sur un projet où une erreur ne coûte rien.

Et si tu veux apprendre Framer sérieusement avant d'y ajouter une couche d'IA, notre formation Framer part des fondations. L'IA accélère un savoir-faire ; elle ne le remplace pas.