Comment connecter Claude à Webflow via MCP ?

Réponse rapide : Claude se connecte à Webflow via le serveur MCP officiel de Webflow, qui vous donne un accès direct au CMS, aux API du Designer et à la couche de données de votre site depuis Claude Desktop ou Claude Code. Vous pouvez publier des mises à jour de contenu, gérer des collections CMS et modifier la structure des pages sans passer par l'interface de Webflow.

Vous savez déjà que Claude sait écrire. Ce que la plupart des équipes B2B SaaS n'ont pas encore compris, c'est que Claude peut aussi publier. Avec le serveur MCP de Webflow connecté, vous n'avez plus à copier-coller du contenu d'un outil à l'autre : vous envoyez vos mises à jour directement depuis votre workflow IA vers votre site Webflow en ligne.

Ce tutoriel détaille la marche à suivre pour le mettre en place, ce que vous pouvez en faire et où se situent les vrais gains de temps pour les équipes SaaS qui gèrent des contenus à grande échelle.

Qu'est-ce que le serveur MCP de Webflow ?

Le serveur MCP de Webflow est une intégration native construite sur le Model Context Protocol (MCP) d'Anthropic, un standard ouvert qui permet aux modèles d'IA de se connecter à des outils et à des sources de données externes. L'implémentation de Webflow donne à Claude un accès direct aux collections CMS, aux API du Designer et à la couche de contenu de votre site.

Concrètement : Claude n'est plus un assistant de rédaction dont vous copiez les textes, mais un agent capable de lire la structure de votre site Webflow, de créer et de mettre à jour des éléments du CMS et d'appliquer des changements sans que vous quittiez la conversation.

L'intégration est maintenue par Webflow et fonctionne avec Claude Desktop, Claude Code, Cursor et Windsurf.

Ce que vous pouvez faire avec Claude et le serveur MCP de Webflow

Avant de commencer la configuration, il est utile de comprendre ce que cette intégration permet réellement. Le serveur MCP de Webflow expose un ensemble défini d'actions que Claude peut effectuer dans votre espace de travail :

Opérations CMS :

Créer de nouveaux éléments dans une collection CMS
Mettre à jour les champs d'éléments existants (texte, rich text, images, références)
Publier et dépublier des éléments
Interroger les schémas de collection pour comprendre la structure des champs

Gestion du site et des pages :

Lire la structure et les métadonnées des pages
Appliquer des modifications structurelles aux pages
Gérer les paramètres et les styles du site au niveau du système

Ce qu'il ne fait pas (pour l'instant) :

Le design visuel en glisser-déposer (il reste dans le Designer de Webflow)
Remplacer la file de publication de Webflow pour les configurations complexes multi-environnements
Gérer des composants de code personnalisé sans intervention manuelle

Pour les équipes B2B SaaS, les cas d'usage à plus forte valeur sont les publications de contenu dans le CMS, les mises à jour de textes de landing pages et les modifications de champs en masse sur les éléments d'une collection. Si votre équipe gère ce type de publication récurrente à grande échelle, cela recoupe souvent des responsabilités plus larges de marketing operations B2B SaaS.

Comment connecter Claude à Webflow via MCP

Étape 1 : générer un jeton d'API Webflow

Connectez-vous à votre compte Webflow et ouvrez le site que vous souhaitez connecter
Allez dans Site Settings > Integrations > API Access
Générez un nouveau jeton d'API avec les autorisations de lecture et d'écriture sur le CMS
Copiez le jeton et conservez-le en lieu sûr. Vous ne pourrez plus le consulter une fois cet écran fermé.

Si vous travaillez sur plusieurs sites Webflow, générez un jeton distinct par site. Mélanger les jetons entre espaces de travail provoque des erreurs d'autorisation pénibles à diagnostiquer.

Étape 2 : installer le serveur MCP de Webflow

Le serveur MCP de Webflow s'exécute comme un processus Node.js sur votre machine. Node.js doit être installé avant cette étape.

Ouvrez votre terminal et exécutez :

npx @webflow/mcp-server

Vous pouvez aussi l'installer de manière globale :

npm install -g @webflow/mcp-server

Le serveur est open source et maintenu dans le dépôt GitHub officiel de Webflow, à l'adresse webflow/mcp-server.

Étape 3 : configurer Claude Desktop pour utiliser le serveur MCP

Ouvrez le fichier de configuration de Claude Desktop. Sous macOS, il se trouve ici :

~/Library/Application Support/Claude/claude_desktop_config.json

Ajoutez le serveur MCP de Webflow à votre configuration :

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["@webflow/mcp-server"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

Remplacer your-token-here par le jeton d'API que vous avez généré à l'étape 1.

Enregistrez le fichier et redémarrez Claude Desktop. Une icône en forme de marteau apparaît dans l'interface de Claude et confirme que les outils MCP sont actifs.

Étape 4 : vérifier la connexion

Démarrez une nouvelle conversation dans Claude et demandez :

« Liste les collections CMS disponibles sur mon site Webflow. »

Claude appellera le serveur MCP de Webflow et renverra le nom et la structure de vos collections. En cas d'erreur, vérifiez que votre jeton d'API dispose des bonnes autorisations et que le JSON du fichier de configuration est valide (une simple virgule manquante rend tout le fichier inutilisable).

Comment publier des mises à jour de contenu CMS avec Claude

Une fois la connexion établie, les opérations sur le contenu suivent un schéma simple : vous décrivez ce que vous voulez, Claude interroge le schéma, puis vous confirmez l'écriture.

Mettre à jour un élément CMS existant

Commencez par demander à Claude de lire l'état actuel d'un élément :

« Trouve l'article intitulé 'How to reduce churn in SaaS' dans ma collection Blog Posts et montre-moi la meta description et le contenu du corps actuels. »

Claude récupérera l'élément et affichera ses champs. Donnez ensuite votre consigne de mise à jour :

« Remplace la meta description par : 'Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff.' Puis publie la modification. »

Claude écrira la mise à jour dans Webflow et confirmera le statut de l'élément.

Créer un nouvel élément CMS

C'est là que le workflow devient vraiment rapide. Rédigez votre brief dans Claude, générez le contenu dans la même conversation, puis publiez-le directement :

« Crée un nouvel élément dans la collection Blog Posts. Titre : 'SaaS Pricing Page Teardown: What High-Converting Pages Have in Common'. Slug : saas-pricing-page-teardown. Mets le statut sur Draft. Utilise le contenu suivant pour le champ du corps : [collez votre contenu]. »

Claude associe vos informations aux bons champs de la collection et crée l'élément. Vous pouvez ensuite ouvrir Webflow pour le relire et le publier, ou demander à Claude de le publier directement si votre workflow le permet.

Mises à jour de champs en masse sur une collection

C'est le cas d'usage dont la plupart des équipes ignorent qu'il est possible. Si vous devez mettre à jour un champ sur plusieurs éléments du CMS, par exemple pour améliorer des balises title dans le cadre d'un nettoyage SEO ou corriger des erreurs de taxonomie répétées, vous pouvez le faire en une seule conversation :

« Dans ma collection Case Studies, trouve tous les éléments dont le champ 'Industry' est vide et renseigne-le avec 'B2B SaaS'. »

Claude interrogera la collection, identifiera les éléments concernés et appliquera la mise à jour. Ce qui prendrait 20 minutes de clics manuels dans Webflow se fait ainsi en moins de deux minutes.

Workflow pratique : publier la mise à jour d'une landing page

Voici un workflow réel qu'une équipe marketing B2B SaaS pourrait exécuter dans Claude avec le serveur MCP de Webflow connecté.

Scénario : vous avez mis à jour le texte du hero de votre page d'accueil et souhaitez publier ce changement dans Webflow sans ouvrir le Designer.

Consulter l'état actuel : « Montre-moi le titre et le sous-titre actuels du hero dans l'élément CMS Homepage. »
Relire et valider : Claude renvoie le texte actuel. Vous confirmez qu'il doit être mis à jour.
Rédiger la mise à jour : « Remplace le titre du hero par : 'Stop guessing. Start converting.' Remplace le sous-titre par : 'SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue.' Publie les modifications. »
Confirmer : Claude confirme que les champs sont mis à jour et que l'élément est publié.

Durée totale : moins de trois minutes. Pas de session dans le Designer, pas de copier-coller, pas de changement d'onglet.

À quoi les équipes B2B SaaS devraient-elles l'utiliser ?

Toutes les mises à jour de contenu n'ont pas besoin de passer par Claude et MCP. Voici où cette configuration est la plus rentable pour les équipes SaaS :

Cas d'usage à forte valeur :

Mettre à jour les métadonnées SEO de plusieurs landing pages avant le lancement d'une campagne
Publier des articles de blog rédigés et relus dans Claude
Réaliser des audits SEO et appliquer les correctifs (meta descriptions, balises title) au cours de la même session
Créer des versions localisées de contenus CMS pour différents marchés
Mettre à jour en masse les descriptions de fonctionnalités produit après une release

Cas d'usage à moindre valeur (restez directement dans Webflow) :

Modifications de design visuel ponctuelles
Refontes de mise en page qui nécessitent le Designer
Changements qui doivent être validés par les parties prenantes avant publication

Les équipes qui font des mises à jour de métadonnées, des déploiements de contenu ou des lancements de campagne fréquents peuvent aussi combiner ce workflow avec l'appui d'agences de content marketing B2B SaaS ou de partenaires SEO spécialisés.

Erreurs courantes et comment les corriger

« No tools available » dans Claude Desktop
Votre fichier de configuration contient une erreur de syntaxe ou le serveur MCP n'a pas démarré. Validez votre JSON sur jsonlint.com et vérifiez que Node.js est correctement installé.

« Unauthorised » lorsque Claude tente d'écrire dans Webflow
Votre jeton d'API n'a pas les autorisations d'écriture, ou il a été généré pour le mauvais site. Régénérez-le avec toutes les autorisations CMS et mettez à jour le fichier de configuration.

Claude lit les collections mais ne trouve pas certains éléments
Les noms d'éléments de collection sont sensibles à la casse dans l'API de Webflow. Demandez d'abord à Claude de lister tous les éléments de la collection, puis utilisez le nom exact qu'il renvoie.

Les modifications apparaissent dans Webflow mais ne sont pas en ligne sur le site
L'élément a été mis à jour mais pas publié. Ajoutez « et publie l'élément » à votre consigne, ou vérifiez manuellement la file de publication de Webflow.

FAQ

Qu'est-ce que le MCP Webflow pour Claude et comment fonctionne-t-il ?
L'intégration Claude Webflow MCP connecte Claude à votre site Webflow grâce au Model Context Protocol d'Anthropic. Claude utilise le serveur MCP de Webflow pour lire et écrire dans vos collections CMS, les métadonnées de vos pages et les paramètres de votre site, directement depuis une conversation. Vous vous authentifiez avec un jeton d'API Webflow, et Claude appelle les API de Webflow en votre nom.

Faut-il savoir coder pour utiliser le serveur MCP de Webflow ?
Il faut simplement être à l'aise pour modifier un fichier de configuration JSON et exécuter une seule commande dans un terminal. Pour le reste, tout se passe en conversation. Vous n'écrivez pas de code pour publier vos mises à jour de contenu. Si vous savez décrire ce que vous voulez en langage courant, Claude s'occupe des appels d'API.

Le serveur MCP de Webflow est-il sûr à utiliser avec un site en production ?
Oui, avec une précaution : demandez toujours à Claude de vous montrer l'état actuel d'un élément avant d'écrire des modifications, et confirmez la mise à jour avant de lui demander de publier. Le serveur MCP écrit directement dans votre espace de travail Webflow en production, il n'y a donc aucun tampon de préproduction, sauf si vous en configurez un dans Webflow. Traitez-le comme un accès direct à une base de données : chaque action doit être réfléchie et relue avant d'être validée.

Quelle différence entre utiliser Claude avec le MCP Webflow et les fonctionnalités d'IA de Webflow intégrées au Designer ?
Les fonctionnalités d'IA natives de Webflow fonctionnent dans l'interface du Designer et portent surtout sur l'aide visuelle et la mise en page. L'intégration Claude Webflow MCP fonctionne en dehors du Designer et se concentre sur les opérations CMS, la publication de contenu et la gestion de données en masse. Elles couvrent donc des étapes différentes du workflow. Le MCP convient mieux aux équipes de contenu qui gèrent de gros volumes de données structurées.

Puis-je utiliser le serveur MCP de Webflow avec Claude Code ou Cursor, et pas seulement avec Claude Desktop ?
Oui. Le serveur MCP de Webflow fonctionne avec Claude Desktop, Claude Code, Cursor et Windsurf. La méthode de configuration varie légèrement selon l'outil, mais le jeton d'API et la configuration du serveur restent les mêmes. Consultez la documentation MCP de chaque outil pour connaître le format de configuration exact.