Webflow se repositionne progressivement vers une Website Agentic Platform, et bien qu'avec de plus en plus de fonctionnalités IA natives à la plateforme, l'IA qui fait en ce moment parler d'elle, c'est Claude.
Une solution qu'il a toujours été possible de connecter à Webflow via les MCP, mais une intégration qui était encore il y a quelques mois assez technique. Maintenant, avec l'app Webflow MCP Bridge, vous pouvez connecter et commencer à utiliser Claude avec votre workspace Webflow en moins de 5 minutes.
Alors à quoi ça sert concrètement, et comment connecter Claude à votre projet Webflow ? On voit ça dans cet article.
Ce que vous pouvez faire avec Claude MCP Bridge
La nouvelle Webflow App vous permet d'interconnecter votre projet Webflow avec votre compte Claude, et d'effectuer des actions directement depuis votre fenêtre conversationnelle. Vous pouvez par exemple :
- Auditer votre site : liens cassés, alt text manquants, meta descriptions incomplètes
- Créer des sections ou des landing pages en décrivant simplement ce que vous voulez (avec encore des limites à considérer d'un point de vue design system)
- Générer du copywriting pour vos pages
- Traduire du contenu massivement à l'échelle du site
- Mettre à jour des items dans votre CMS
En bref, un pilotage de votre site Webflow par prompts, sans même avoir à ouvrir le Designer. (Pratique pour travailler même depuis votre mobile par exemple 😉)
Comment connecter Claude MCP à votre projet Webflow ?
1. Ajouter le connecteur Webflow dans Claude
Dans la fenêtre de chat Claude, cliquez sur le symbole + puis sur Add connectors. Cherchez le connecteur Webflow, puis cliquez sur Connect.
2. Autoriser l'accès à votre compte Webflow
Claude vous demandera de vous connecter à votre compte Webflow dans un onglet parallèle et de lui accorder les accès nécessaires. Sélectionnez ensuite les sites et Workspaces auxquels vous souhaitez donner accès, puis cliquez sur Authorize App.
3. Installer l'application sur votre projet Webflow
Une fois l'autorisation accordée, l'application Webflow MCP Bridge s'installe automatiquement dans votre espace Webflow. Vous n'avez donc pas besoin de l'installer manuellement. (Et elle n'est par ailleurs pas disponible sur le marketplace public.)
4. Ouvrir le Webflow MCP Bridge App dans le Designer
Pour utiliser le mcp bridge app :
- Ouvrez le panneau Apps dans le Designer (raccourci clavier touche E)
- Lancez l'application Webflow MCP Bridge
- Attendez qu'elle se connecte au serveur MCP
Une fois connectée, Claude a accès à votre projet et peut directement interagir avec la plateforme Webflow.
5. Rédigez votre premier prompt
Vous pouvez maintenant écrire directement dans Claude ce que vous souhaitez faire sur votre site. Voici un exemple pour commencer :
"Crée une section hero responsive avec un titre, une description et un bouton CTA, sur la base du design system et du design existant."
Les limites du MCP Bridge App
Webflow fait des efforts pour devenir une plateforme agentique, mais quelques limitations persistent, liées au legacy de la plateforme et au développement de l'IA en général :
- La vitesse de développement est assez lente comparé à d'autres plateformes de vibe coding (lovable, claude code, etc)
- Le MCP Bridge App doit rester ouvert dans le Designer pour que la connexion soit active
- Certaines actions complexes restent hors de portée pour l'instant
- La qualité des résultats dépend beaucoup de la précision de vos prompts
⚠️ Attention — Sur des sites de tailles importantes avec un design system établi, un prompt mal formulé peut amener Claude à modifier des classes ou des valeurs existantes et créer des conflits à grande échelle. Manipulez-le avec prudence.
Conclusion
Webflow avance dans la bonne direction en réduisant au maximum la complexité d'intégration de l'IA ( et des outils disponible sur le marché ) à la plateforme. L'application, bien qu'encore limitée sur certains aspewcts structurels, permet déjà de faire de belles choses et rassure sur la prise du tournant AI-friendly.
Découvrez comment utiliser concrètement Webflow avec Claude dans le récap complet de notre live dédié au sujet →
.jpg)
.jpg)
