Serveur MCP officiel de Webflow

Un serveur Node.js implémentant Model Context Protocol (MCP) pour Webflow en utilisant le SDK JavaScript de Webflow. Permet aux agents d'intelligence artificielle d'interagir avec les API de Webflow. Pour en savoir plus sur l'API de données de Webflow, consultez la documentation destinée aux développeurs.

ℹ Prérequis

• Node.js
• NPM
• Un compte Webflow

▶️ Démarrage rapide (hébergé sur Cloudflare workers)

Pour Cursor :

1. Allez dans Paramètres → Paramètres du curseur → MCP
2. Cliquez sur + Add New Global MCP Server (Ajouter un nouveau serveur MCP global)
3. Collez la configuration suivante (ou ajoutez la partie webflow à votre configuration existante)

{ "mcpServers" : { "webflow" : { "command" : "npx mcp-remote https://mcp.webflow.com/sse" } } }

4. Sauvegarder, Cursor ouvrira automatiquement une nouvelle fenêtre de navigateur montrant une page de connexion OAuth pour autoriser les sites Webflow auxquels vous voulez que le serveur MCP ait accès.

Pour Claude Desktop :

1. Ouvrez Paramètres → Développeur
2. Cliquez sur Edit Config
3. Ouvrez claude_desktop_config.json dans un éditeur de code et collez la configuration suivante (ou ajoutez la partie webflow à votre configuration existante)

{ "mcpServers" : { "webflow" : { "command" : "npx", "args" : ["mcp-remote", "https://mcp.webflow.com/sse"] } } }

4. Sauvegardez le fichier et redémarrez Claude Desktop (command/ctrl + R). Lorsque Claude redémarre, il ouvrira automatiquement une nouvelle fenêtre de navigateur affichant une page de connexion OAuth pour autoriser les sites Webflow auxquels vous voulez que le serveur MCP ait accès.

Pour Windsurf :

1. Naviguez vers Windsurf - Paramètres → Paramètres avancés
2. Descendez jusqu'à la section Cascade → Ajouter un serveur → Ajouter un serveur personnalisé +
3. Collez la configuration suivante (ou ajoutez la partie webflow à votre configuration existante)

{ "mcpServers" : { "webflow" : { "command" : "npx", "args" : ["mcp-remote", "https://mcp.webflow.com/sse"] } } }

4. Cliquez sur Save, Windsurf ouvrira automatiquement une nouvelle fenêtre de navigateur montrant une page de connexion OAuth pour autoriser les sites Webflow auxquels vous voulez que le serveur MCP ait accès.

Pour VS Code :

1. Ouvrez settings.json
2. Collez la configuration suivante (ou ajoutez la partie webflow à votre configuration existante)

{ "mcp" : { "servers" : { "webflow" : { "command" : "npx", "args" : ["mcp-remote", "https://mcp.webflow.com/sse"] } } } }

4. Enregistrez le fichier. Vous devriez voir apparaître un bouton de démarrage au-dessus de la clé "webflow", sur lequel vous pouvez cliquer pour ouvrir et exécuter le flux d'authentification. Vous pouvez également redémarrer VS Code et le flux d'authentification devrait démarrer automatiquement.

Remarque importante

Toutes ces méthodes reposent sur le package npmmcp-remote qui est encore considéré comme expérimental au 30/04/2025. Si à un moment donné vous avez des problèmes, et que vous voulez réinitialiser vos jetons OAuth, vous pouvez exécuter la commande suivante avant de redémarrer votre client MCP :

rm -rf ~/.mcp-auth

▶️ Démarrage rapide (installation locale)

1. Obtenez votre jeton API Webflow

• Allez sur l'API Playground de Webflow
• Connectez-vous et générez un jeton
• Copiez le token depuis le générateur de requêtes

2. Ajoutez à votre éditeur AI

{ "mcpServers" : { "webflow" : { "command" : "npx", "args" : ["-y", "webflow-mcp-server@0.6.0"], "env" : { "WEBFLOW_TOKEN" : "<VOTRE_TOKEN_WEBFLOW>" } } } }

Pour le curseur :

1. Allez dans Paramètres → Paramètres du curseur → MCP
2. Cliquez sur + Ajouter un nouveau serveur MCP global
3. Collez la configuration
4. Remplacez YOUR_WEBFLOW_TOKEN par le jeton que vous avez copié précédemment
5. Sauvegarder et redémarrer Cursor

Pour Claude Desktop :

1. Ouvrez Paramètres → Développeur
2. Cliquez sur Edit Config
3. Ouvrez claude_desktop_config.json dans un éditeur de code et collez la configuration
4. Remplacez YOUR_WEBFLOW_TOKEN par le jeton que vous avez copié plus tôt 5. Sauvegarder et redémarrer Claude

❓ Résolution des problèmes

Si vous avez des problèmes pour démarrer le serveur dans votre client MCP, par exemple Cursor ou Claude Desktop, veuillez essayer ce qui suit.

Assurez-vous d'avoir un jeton API Webflow valide

1. Allez sur l'API Playground de Webflow, connectez-vous et générez un jeton, puis copiez le jeton à partir du générateur de requêtes
2. Remplacez YOUR_WEBFLOW_TOKEN dans la configuration de votre client MCP par le token que vous avez copié
3. Sauvegardez et redémarrez votre client MCP

Assurez-vous que Node et NPM sont installés

• Node.js
• NPM

Exécutez les commandes suivantes pour confirmer que Node et NPM sont installés :

node -v npm -v

Videz votre cache NPM

Parfois, le fait de vider le cache de NPM peut résoudre des problèmes avec npx.

npm cache clean --force

Corriger les permissions globales des paquets NPM

Si npm -v ne fonctionne pas pour vous mais que sudo npm -v fonctionne, il se peut que vous deviez corriger les permissions globales des paquets NPM. Consultez la documentation officielle de NPM pour plus d'informations.

Remarque : si vous modifiez la configuration de votre shell, il se peut que vous deviez le redémarrer pour que les modifications soient prises en compte.

🛠️ Outils disponibles

Sites

sites - list ; // Liste de tous les sites sites sites - get ; // Obtenir les détails d'un site sites - publish ; // Publier les changements d'un site

Pages

pages - list ; // Liste de toutes les pages pages pages - get - metadata ; // Obtention des métadonnées de la page pages - update - page - settings ; // Mise à jour des paramètres de la page pages - get - content ; // Obtention du contenu de la page pages - update - static - content ; // Mise à jour du contenu de la page

Composants

components - list // Liste de tous les composants d'un site components - get - content // Obtient le contenu des composants (texte, images, composants imbriqués) components - update - content // Met à jour le contenu des composants pour la localisation components - get - properties // Obtient les propriétés des composants (valeurs par défaut) components - update - properties // Met à jour les propriétés des composants pour la localisation

CMS

collections - list ; // Liste des collections collections - get ; // Obtient les détails d'une collection collections - create ; // Crée une collection collection - fields - create - static ; // Crée une collection de champs statiques - fields - create - option ; // Crée une collection de champs d'option - fields - create - reference ; // Crée une collection de champs de référence - fields - update ; // Mettre à jour un champ personnalisé collections - items - create - item - live ; // Créer des items collections - items - update - items - live ; // Mettre à jour des items collections - items - list - items ; // Lister des items collections - items - create - item ; // Créer des items collections (staged) collections - items - update - items ; // Mettre à jour des items collections (staged) collections - items - publish - items ; // Publier des items collections

Code personnalisé

code personnalisé - add - inline - site - script // Enregistrer un script inline pour un site code personnalisé - get - registered - site - script - list // Liste de tous les scripts enregistrés pour un site code personnalisé - get - applied - site - script - list // Obtenir tous les scripts appliqués à un site code personnalisé - delete site custom code // Supprimer les scripts d'un site

Composants

components - list ; // Liste de tous les composants d'un site components - content - get ; // Obtient le contenu statique d'une définition de composant components - content - update ; // Met à jour le contenu d'une définition de composant pour les locales secondaires components - properties - get ; // Obtient les valeurs des propriétés par défaut d'une définition de composant components - properties - update ; // Met à jour les valeurs des propriétés par défaut d'une définition de composant pour les locales secondaires

Demander à Webflow AI

ask - webflow - ai ; // Recherche de documents Webflow à l'aide de la recherche AI

🗣️ Invites et ressources

Cette implémentation n' inclut pas les invites ou les ressources de la spécification MCP. Cependant, cela pourrait changer à l'avenir quand il y aura un support plus large à travers les clients MCP populaires.

🚧 Mode développement

Si vous souhaitez exécuter le serveur en mode développement, vous pouvez installer les dépendances et exécuter le serveur à l'aide de la commande suivante :

1. Clonez et installez :

git clone git@github.com:webflow/mcp-server.git cd mcp-server npm install

2. Ajoutez votre jeton à un fichier .env à la racine du projet :

# .env WEBFLOW_TOKEN=<Votre_TOKEN_WEBFLOW>

3. Démarrer le serveur de développement :

npm start

📄 Ressources pour les développeurs Webflow

• Documentation API Webflow
• SDK JavaScript Webflow

⚠️ Limitations connues

Mises à jour du contenu des pages statiques

Le point de terminaison pages_update_static_content ne prend actuellement en charge que les mises à jour des pages statiques localisées dans les locales secondaires. Les mises à jour du contenu statique dans la locale par défaut ne sont pas prises en charge et entraîneront des erreurs.