Webflow MCP Server

officiel

Interagissez avec les API Webflow pour lister et modifier vos données de site et de CMS.

GitHub
132

Documentation

Serveur MCP de Webflow

Un serveur Node.js implémentant le Model Context Protocol (MCP) pour Webflow à l'aide du SDK JavaScript Webflow. Permettez aux agents IA d'interagir avec les API Webflow. Apprenez-en plus sur l'API Data de Webflow dans la documentation développeur.

npm shield Webflow

Prérequis

🚀 Installation distante

Commencez par installer le serveur MCP distant de Webflow. Le serveur distant utilise OAuth pour s'authentifier auprès de vos sites Webflow, ainsi qu'une application compagnon qui synchronise votre canevas en direct avec votre agent IA.

Exigences

  • Node.js 22.3.0 ou supérieur

Remarque : Le serveur MCP prend actuellement en charge Node.js 22.3.0 ou supérieur. Si vous rencontrez des problèmes de version, consultez le guide de compatibilité Node.js.

Cursor

Ajouter le serveur MCP à Cursor

  1. Allez dans Settings → Cursor Settings → MCP & Integrations.
  2. Sous Outils MCP, cliquez sur + New MCP Server.
  3. Collez la configuration suivante dans .cursor/mcp.json (ou ajoutez la partie webflow à votre configuration existante) :
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

Astuce : Vous pouvez créer un mcp.json au niveau du projet pour éviter les demandes d'authentification répétées dans plusieurs fenêtres Cursor. Consultez la documentation de Cursor sur les emplacements de configuration.

  1. Enregistrez et fermez le fichier. Cursor ouvrira automatiquement une page de connexion OAuth où vous pourrez autoriser les sites Webflow à utiliser avec le serveur MCP.

Ouvrir le Webflow Designer

  • Ouvrez votre site dans le Webflow Designer, ou demandez à votre agent IA :
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Ouvrir l'application Webflow MCP

  1. Dans le Designer, ouvrez le panneau Applications (appuyez sur E).
  2. Lancez votre "Webflow MCP Bridge App" publiée.
  3. Attendez que l'application se connecte au serveur MCP.

Écrire votre première invite

Essayez ceci dans votre chat IA :

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Bureau Claude

Ajouter le serveur MCP au bureau Claude

  1. Activez le mode développeur : Help → Troubleshooting → Enable Developer Mode.
  2. Ouvrez les paramètres développeur : File → Settings → Developer.
  3. Cliquez sur Get Started ou modifiez la configuration pour ouvrir claude_desktop_config.json et ajoutez :
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. Enregistrez et redémarrez le bureau Claude (Cmd/Ctrl + R). Une page de connexion OAuth s'ouvrira pour autoriser les sites.

Ouvrir le Webflow Designer

  • Ouvrez votre site dans le Webflow Designer, ou demandez à votre agent IA :
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Ouvrir l'application Webflow MCP

  1. Dans le Designer, ouvrez le panneau Applications (appuyez sur E).
  2. Lancez votre "Webflow MCP Bridge App" publiée.
  3. Attendez que l'application se connecte au serveur MCP.

Écrire votre première invite

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Réinitialiser votre jeton OAuth

Pour réinitialiser votre jeton OAuth, exécutez la commande suivante dans votre terminal.

rm -rf ~/.mcp-auth

Compatibilité Node.js

Veuillez consulter le guide de compatibilité Node.js dans la documentation développeur Webflow.

Installation locale

Vous pouvez également configurer le serveur MCP pour qu'il s'exécute localement. Cela nécessite :

  • De créer et d'enregistrer votre propre application MCP Bridge dans un espace de travail Webflow avec des autorisations d'administration
  • De configurer votre client IA pour démarrer le serveur MCP local avec un jeton API Webflow

1. Créer et publier l'application MCP Bridge

Avant de connecter le serveur MCP local à votre client IA, vous devez créer et publier la Webflow MCP Bridge App dans votre espace de travail.

Étapes

  1. Enregistrer une application Webflow

    • Allez dans votre espace de travail Webflow et enregistrez une nouvelle application.
    • Suivez le guide officiel : Enregistrer une application.

  2. Obtenir le code de l'application MCP Bridge

    • Option A : Téléchargez le dernier bundle.zip depuis la page des versions.
    • Option B : Clonez le dépôt et construisez-le : 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • Ensuite, construisez le projet en suivant les instructions du dépôt.

  3. Publier l'extension Designer

    • Allez dans Tableau de bord Webflow → Paramètres de l'espace de travail → Applications & Intégrations → Développer → Votre application.
    • Cliquez sur “Publier la version de l'extension”.
    • Téléversez votre fichier bundle.zip construit.

  4. Ouvrir l'application dans le Designer

    • Une fois publiée, ouvrez l'application MCP Bridge depuis le panneau Designer → Applications dans un site de votre espace de travail.

2. Configurer votre client IA

Cursor

Ajoutez à .cursor/mcp.json :

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

Bureau Claude

Ajoutez à claude_desktop_config.json :

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

3. Utiliser le serveur MCP avec le Webflow Designer

  • Ouvrez votre site dans le Webflow Designer.
  • Ouvrez le panneau Applications (appuyez sur E) et lancez votre "Webflow MCP Bridge App" publiée.
  • Attendez que l'application se connecte au serveur MCP, puis utilisez les outils depuis votre client IA.
  • Si l'application Bridge demande une URL de connexion locale, appelez l'outil get_designer_app_connection_info depuis votre client IA et collez l'URL http://localhost:<port> retournée.

Optionnel : Exécuter localement via le shell

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest

# PowerShell
$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
npx -y webflow-mcp-server@latest

Réinitialiser votre jeton OAuth

Pour réinitialiser votre jeton OAuth, exécutez la commande suivante dans votre terminal.

rm -rf ~/.mcp-auth

Compatibilité Node.js

Veuillez consulter le guide de compatibilité Node.js dans la documentation développeur Webflow.

❓ Dépannage

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

Assurez-vous d'avoir un jeton API Webflow valide

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

Assurez-vous que Node et NPM sont installés

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

node -v
npm -v

Vider votre cache NPM

Parfois, vider votre cache NPM peut résoudre les problèmes avec npx.

npm cache clean --force

Corriger les permissions des paquets globaux NPM

Si npm -v ne fonctionne pas pour vous mais que sudo npm -v fonctionne, vous devrez peut-être corriger les permissions des paquets globaux NPM. Consultez la documentation officielle NPM pour plus d'informations.

Remarque : si vous apportez des modifications à la configuration de votre shell, vous devrez peut-être redémarrer votre shell pour que les modifications prennent effet.

🛠️ Outils disponibles

Consultez le répertoire ./tools pour une liste des outils disponibles

🗣️ Invites et ressources

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

📄 Ressources développeur 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 paramètres régionaux secondaires. Les mises à jour du contenu statique dans les paramètres régionaux par défaut ne sont pas prises en charge et entraîneront des erreurs.