Webflow MCP 2.0 + Claude : connecter Claude à Webflow en 2026

L’intelligence artificielle devient vraiment utile lorsqu’elle ne se limite plus à proposer du texte, mais qu’elle peut aussi comprendre un site et agir dessus. C’est exactement l’objectif du Webflow MCP Server, qui relie des agents comme Claude directement aux projets Webflow.

Mise à jour août 2026 : Webflow a lancé MCP 2.0. Cette version change nettement l’intégration avec Claude : la majorité des opérations sur les éléments, composants, styles et variables ne nécessitent plus de session Designer active. Le serveur donne aussi accès à de nouvelles fonctions comme Webflow Analyze, les formulaires, le sitemap, les polices personnalisées et les Agent Instructions.

Autrement dit, Claude ne sert plus seulement à auditer un CMS ou préparer du contenu. Il peut désormais intervenir beaucoup plus profondément dans la construction, la maintenance et l’analyse d’un site Webflow, tout en respectant les permissions du workspace.

Qu’est-ce que le Model Context Protocol ?

Le Model Context Protocol, ou MCP, est un standard ouvert qui permet à une application d’IA d’utiliser des outils et des données externes. Dans le cas de Webflow, le serveur MCP expose les capacités de la plateforme sous forme d’outils qu’un agent peut appeler depuis une conversation.

Le principe est simple : vous formulez une instruction en langage naturel, Claude choisit les outils Webflow adaptés, lit les données nécessaires, puis exécute les actions autorisées. Avec les connecteurs officiels, l’authentification passe par OAuth. Il n’est donc pas nécessaire de créer et copier manuellement une clé API pour le parcours standard.

Ce que MCP 2.0 change vraiment avec Claude

La différence la plus importante est que le Webflow Designer n’a plus besoin d’être ouvert pour la majorité des opérations. Dans les versions précédentes, les changements liés à la structure visuelle dépendaient largement du Bridge App et d’une session Designer active. Avec MCP 2.0, Claude peut travailler directement sur la structure du site via les API Webflow.

1. Construire et modifier des éléments

Claude peut désormais interroger l’arbre d’éléments d’une page, modifier du texte, des liens, des images, des attributs, des balises, la visibilité ou les réglages d’un élément. Il peut également déplacer ou supprimer des éléments et construire de nouvelles structures à partir d’un schéma, de HTML et de CSS.

Un prompt comme « crée une section hero responsive en utilisant les styles existants du site » peut donc déclencher une vraie opération de construction, et plus seulement produire du code à recopier manuellement.

2. Travailler avec les composants

MCP 2.0 donne aux agents un contrôle beaucoup plus complet sur les composants Webflow : création, instances, props, variants, slots et métadonnées. Claude peut aussi connecter certains éléments ou composants aux données du CMS.

C’est particulièrement intéressant pour les sites qui utilisent un design system cohérent. Au lieu de créer une section isolée avec des styles improvisés, l’agent peut réutiliser les composants et conventions déjà présents dans le projet.

3. Modifier le design system, les styles et les variables

Claude peut lire et modifier les classes, combo classes, propriétés CSS, variables, collections de variables et modes. Cela permet de lui demander par exemple d’harmoniser une échelle d’espacement, de créer une nouvelle palette ou de remplacer des valeurs codées en dur par des variables existantes.

Le gain est important pour les opérations de refactoring : l’agent travaille sur le système qui pilote réellement le site, au lieu de traiter chaque élément séparément.

CMS, assets, pages et code : un périmètre beaucoup plus large

Les fonctions CMS restent évidemment disponibles : lire les collections, créer ou modifier des items, effectuer des mises à jour en masse, publier ou dépublier du contenu et contrôler la structure des champs.

Mais MCP 2.0 élargit aussi le périmètre autour du CMS :

• Pages : création de pages, modification de paramètres et gestion du schema markup.
• Assets : lecture, renommage, organisation dans des dossiers et compression d’images en WebP ou AVIF.
• Code personnalisé : lecture et écriture du code head/footer au niveau du site ou d’une page, en plus de la gestion des scripts enregistrés.
• Polices : gestion des fichiers de polices personnalisées uploadés dans Webflow.
• Sitemap : lecture et modification de l’inclusion des pages et items CMS dans le sitemap.
• Formulaires : lecture des formulaires et de leurs soumissions, avec certaines actions sur les données de soumission.

Analyser le trafic directement depuis Claude

Une des nouveautés les plus intéressantes de MCP 2.0 est l’accès à Webflow Analyze pour les sites qui disposent de cette fonctionnalité. Claude peut interroger les sessions, utilisateurs, pages vues, pages les plus performantes, sources de trafic, événements d’engagement et temps passé sur les pages.

Vous pouvez donc poser une question comme « quelles pages ont le plus de trafic mobile cette semaine et lesquelles ont le temps moyen le plus faible ? » puis enchaîner avec une analyse du contenu ou une proposition d’optimisation.

C’est là que le workflow devient plus puissant : le même agent peut observer les performances, comprendre la structure du site et intervenir sur le contenu ou le design.

Agent Instructions : apprendre à Claude comment votre site doit être géré

MCP 2.0 ajoute également les Agent Instructions. Webflow distingue notamment les règles, qui servent de garde-fous permanents, et les skills, qui décrivent des workflows plus spécialisés.

Vous pouvez par exemple définir des règles comme :

• toujours réutiliser les variables existantes avant de créer une nouvelle couleur ;
• respecter une convention de nommage de classes ;
• ne jamais publier sans validation explicite ;
• utiliser une structure précise pour les composants ;
• respecter le ton éditorial défini pour les contenus CMS.

Ces instructions peuvent référencer directement des éléments Webflow comme des variables, composants, styles, pages, collections CMS ou locales. L’agent travaille donc avec le contexte réel du site plutôt qu’avec une documentation générique.

Comment connecter Claude à Webflow en 2026

Le parcours recommandé passe par le connecteur officiel Webflow dans Claude Desktop :

1. Dans Claude, cliquer sur +, puis sur Add connectors.
2. Rechercher Webflow et cliquer sur Connect.
3. Se connecter à Webflow si nécessaire.
4. Autoriser les sites et le workspace auxquels Claude doit avoir accès.
5. Lancer un premier prompt, par exemple « liste toutes mes collections et leurs champs ».

Il est aussi possible d’ajouter le serveur manuellement avec l’URL officielle https://mcp.webflow.com/mcp.

Le Bridge App est-il encore nécessaire ?

Pour la plupart des tâches, non. C’est justement l’un des changements majeurs de MCP 2.0.

Le Bridge App reste toutefois nécessaire lorsqu’un agent a besoin du contexte visuel ou de l’état courant du Designer, par exemple pour capturer un snapshot, lire l’élément actuellement sélectionné, naviguer dans le canvas, connaître le breakpoint actif ou comprendre une consigne du type « modifie ce titre » qui dépend de ce qui est affiché à l’écran.

Pour les opérations sur le CMS, les pages, les composants, les styles, les variables, les assets, le code ou les données Analyze, le Designer peut rester fermé.

Exemples de prompts utiles avec MCP 2.0

• « Analyse mes variables et propose une palette plus sobre sans créer de valeurs codées en dur. »
• « Crée un composant testimonial avec image, nom, fonction et citation, puis ajoute des props pour chaque contenu. »
• « Vérifie tous les articles qui n’ont pas de meta description et prépare les corrections. »
• « Compresse les images PNG et JPEG les plus lourdes en AVIF lorsque c’est pertinent. »
• « Liste les pages exclues du sitemap et indique lesquelles devraient être indexées. »
• « Analyse les pages les plus visitées des 30 derniers jours et propose trois optimisations prioritaires. »
• « Vérifie que les nouvelles sections respectent les variables, composants et conventions définis dans les Agent Instructions. »

Les limites à connaître

MCP 2.0 est beaucoup plus complet, mais il ne remplace pas entièrement le Designer.

• Les Webflow Interactions IX3 ne peuvent pas encore être créées ou modifiées via MCP.
• Les snapshots visuels et certaines actions liées au canvas nécessitent encore une session Designer avec le Bridge App.
• La création de nouveaux items CMS localisés dans une langue secondaire n’est pas encore prise en charge, même si les contenus localisés existants peuvent être lus et modifiés.
• Une autorisation MCP correspond à un workspace. Pour changer de workspace, il faut se réauthentifier.
• Certaines capacités, comme Webflow Analyze ou certaines fonctions de gouvernance, dépendent des fonctionnalités disponibles sur le site ou le plan concerné.

Sécurité et gouvernance

Le serveur MCP respecte les rôles et permissions Webflow existants. Un agent ne reçoit pas plus de droits que l’utilisateur qui l’a autorisé. Les actions MCP sont également intégrées à la logique d’activité et d’audit de Webflow, ce qui facilite le suivi des modifications sur les projets en production.

La bonne pratique reste de limiter l’accès aux sites réellement nécessaires, de travailler sur des branches ou un environnement de staging lorsque le changement est sensible, et de demander un aperçu ou une validation avant les opérations importantes.

Conclusion

Avec MCP 2.0, connecter Claude à Webflow ne sert plus seulement à automatiser le CMS. L’agent peut désormais travailler sur la structure visuelle, les composants, les styles, les variables, les assets, le code, le sitemap et même les données de performance, sans avoir besoin d’une session Designer pour la majorité des tâches.

Pour un freelance ou une équipe qui maintient plusieurs sites Webflow, le changement est important : Claude devient un véritable environnement de pilotage du site, capable d’analyser, de construire et de maintenir le projet à partir d’instructions en langage naturel.