Comment utiliser le MCP Webflow : Guide pratique complet pour débutants

Introduction

Configurer un site Webflow peut vite devenir chronophage. Quand on doit créer des dizaines de collections CMS, relier les champs, définir des slugs ou encore paramétrer les métadonnées SEO, la tâche devient répétitive et sujette aux erreurs.

C’est là qu’entre en jeu le MCP Webflow (Main Configuration Panel). Cet outil permet de décrire toute l’architecture de votre projet (collections, relations, utilisateurs, SEO…) dans un fichier JSON, généré à partir de requêtes à une IA comme Claude ou Cursor. En d’autres termes, vous dites à l’IA ce que vous voulez, elle rédige le fichier JSON, et ce fichier configure automatiquement votre site via l’API de Webflow.

👉 Attention toutefois : rien ne se fait “tout seul”. Vous devez formuler une demande précise, vérifier la réponse de l’IA, puis appliquer la configuration. Le MCP est un gain de temps considérable, mais il repose sur une IA qui peut se tromper ou halluciner. La clé est donc de travailler par étapes, en batchs, et en vérifiant chaque action.

Introduction au MCP Webflow

Le MCP est un fichier de configuration JSON qui décrit toute la structure de votre site Webflow.

Il sert à définir :

• Les collections CMS (Blog, Produits, FAQ, Témoignages, etc.).
• Les champs de chaque collection (texte, image, slug, date, référence).
• Les relations entre collections (ex : Produits reliés à Catégories).
• Les paramètres SEO des pages statiques et dynamiques (méta-titre, méta-description).
• Les rôles et permissions utilisateurs (Admin, Editor, Client).

Pourquoi est-ce utile ?

Parce qu’au lieu de cliquer partout dans l’interface de Webflow, vous centralisez votre configuration dans un seul fichier. Vous gagnez en rapidité, en cohérence et en standardisation (particulièrement pratique si vous êtes freelance ou en agence et que vous créez souvent des blogs ou e-commerces).

👉 Exemple : créer une collection Blog avec quatre champs (Title, Slug, Image, Date) prend plusieurs minutes dans Webflow. Avec le MCP, une simple demande à l’IA génère le JSON correspondant et configure automatiquement la collection.

⚠ Limite à garder en tête : l’IA peut oublier un champ, mal interpréter une relation ou insérer une variable SEO inexistante. Vous restez le pilote.

Accéder au MCP dans Webflow (via Claude et Cursor)

Le MCP n’existe pas directement dans l’interface de Webflow. Il est accessible uniquement via Claude ou Cursor, qui jouent le rôle d’intermédiaire entre vous et l’API de Webflow.

Voici la procédure d’installation :

1. Installer les prérequis

• Téléchargez et installez Claude (ou Cursor).
• Installez Node.js (obligatoire pour lancer le serveur MCP).
  

2. Générer un API Token dans Webflow

• Ouvrez votre projet Webflow.
• Allez dans Réglages du site → Apps & Intégrations.
• Cliquez sur Générer un token API.
• Sélectionnez les autorisations à accorder (CMS, SEO, utilisateurs, etc.).
• Copiez le token généré.
  

3. Configurer Claude avec le MCP

• Dans Claude, ouvrez les Paramètres.
• Cliquez sur Développeur → Modifier la config.
• Collez le code suivant en remplaçant le champ “Mettre le token ici” par votre token API :

{
 "mcpServers": {
   "webflow": {
     "command": "npx",
     "args": ["-y", "webflow-mcp-server@0.3.0"],
     "env": {
       "WEBFLOW_TOKEN": "Mettre le token ici"
     }
   }
 }
}



• Sauvegardez.
• Relancez Claude.
  

👉 Dès lors, Claude est connecté à votre site et pourra appliquer les instructions que vous lui donnez via le MCP.

Vous pensez que l’IA fait tout toute seule. Faux. Sans vérifier le JSON du MCP, vous risquez des champs inutiles, des slugs manquants ou des relations incohérentes. Résultat : plus de temps perdu qu’à créer à la main.

L'erreur fatale

Gestion des projets dans le MCP

Le MCP ne permet pas de gérer plusieurs sites en même temps. Chaque projet Webflow doit être configuré séparément avec son propre API Token.

👉 Concrètement :

• Projet 1 : vous générez un token, configurez Claude, travaillez avec le MCP.
• Projet 2 : vous répétez l’opération avec un nouveau token.

Cela peut sembler une contrainte, mais en pratique, la configuration ne prend que quelques minutes une fois que vous maîtrisez le process.

⚠ Bon réflexe : sauvegardez vos JSON MCP (par exemple dans Notion ou GitHub) pour garder une trace de la structure de chaque projet. Cela permet de recréer un site en cas de bug ou d’oubli.

Utilisation des paramètres CMS dans le MCP

Le MCP permet de créer et configurer vos collections CMS beaucoup plus vite que manuellement.

Exemple simple : une collection Blog

{
 "collections": [
   {
     "name": "Blog",
     "fields": [
       { "name": "Title", "type": "PlainText" },
       { "name": "Slug", "type": "Slug" },
       { "name": "Image", "type": "Image" },
       { "name": "PublishedDate", "type": "Date" }
     ]
   }
 ]
}



Exemple avancé : Produits reliés à Catégories

{
 "collections": [
   {
     "name": "Categories",
     "fields": [
       { "name": "Title", "type": "PlainText" },
       { "name": "Slug", "type": "Slug" }
     ]
   },
   {
     "name": "Products",
     "fields": [
       { "name": "Name", "type": "PlainText" },
       { "name": "Slug", "type": "Slug" },
       { "name": "Image", "type": "Image" },
       { "name": "Category", "type": "Reference", "collection": "Categories" }
     ]
   }
 ]
}



👉 En une commande, vous créez deux collections liées.

⚠ Conseil pratique : ne demandez pas à Claude de générer 10 collections d’un coup. Travaillez par batchs, vérifiez dans Webflow, puis continuez.

Le MCP ne sert pas qu’à créer des collections CMS. Il peut aussi configurer les méta-titres et descriptions de vos pages statiques et dynamiques. En l’utilisant bien, vous gagnez du temps et standardisez votre SEO.

Pour aller plus loin

Gérer les utilisateurs et permissions

Vous pouvez aussi définir les rôles utilisateurs directement via le MCP.

Exemple :

{
 "users": [
   { "email": "client@exemple.com", "role": "Editor" },
   { "email": "designer@exemple.com", "role": "Admin" }
 ]
}



👉 Intérêt :

• Votre client a accès à l’édition de contenu sans pouvoir casser la structure.
• Votre équipe garde la main sur la technique et la publication.

Suivi des publications et versions

Le MCP aide à structurer votre flux de travail :

• Vous gardez un historique clair via vos fichiers JSON sauvegardés.
• Les rôles limitent les erreurs (un Editor propose, un Admin publie).
• Vous pouvez tester et valider par étapes, plutôt que de publier tout d’un coup.

⚠ Là encore, vérifiez systématiquement ce que Claude applique. Ne supposez pas que tout est correct “par défaut”.

Bonnes pratiques d’utilisation du MCP Webflow

✅ À faire

• Toujours demander à Claude un JSON de proposition avant application.
• Travailler en petits lots.
• Vérifier les champs et relations dans Webflow après chaque action.
• Documenter vos JSON MCP.
• Utiliser un projet cloné pour tester avant la prod.
• Contrôler les meta title et meta description générés par l’IA.

❌ À éviter

• Générer trop de choses d’un coup.
• Donner des droits Admin à un client par erreur.
• Oublier les slugs (essentiels pour le SEO).
• Croire que “l’IA sait toujours” : elle peut halluciner.

Tableau récapitulatif

Travaillez toujours en batchs. Demandez à l’IA une ou deux collections à la fois, vérifiez, puis continuez. C’est le meilleur moyen d’éviter les hallucinations et d’obtenir un site propre et fonctionnel.

L'idée de génie

Conclusion

Le MCP Webflow est un outil puissant qui révolutionne la configuration des projets CMS et SEO. Mais ce n’est pas un bouton magique. Vous devez :

1. Installer Claude/Cursor et Node.js.
2. Générer un token API dans Webflow.
3. Configurer Claude avec le MCP.
4. Demander un JSON, vérifier, puis appliquer.
5. Travailler en batchs et toujours contrôler.

👉 Utilisé correctement, le MCP vous fera gagner un temps considérable, surtout sur des projets riches en contenu. Mais n’oubliez jamais : l’IA n’est pas infaillible. Vous êtes le pilote, elle est l’assistant.

‍