Webflow

Official
by webflow

Integrations

  • Enables interaction with Webflow APIs, providing tools for managing sites (listing, retrieving details, publishing), pages (listing, getting metadata, updating settings and content), and CMS collections (listing collections, creating and updating collection items).

Offizieller MCP-Server von Webflow

Ein Node.js-Server, der das Model Context Protocol (MCP) für Webflow mithilfe des Webflow JavaScript SDK implementiert. Ermöglicht KI-Agenten die Interaktion mit Webflow-APIs. Weitere Informationen zur Webflow-Daten-API finden Sie in der Entwicklerdokumentation .

ℹ Voraussetzungen

▶️ Schnellstart (gehostet auf Cloudflare-Workern)

Für Cursor:

  1. Gehen Sie zu SettingsCursor SettingsMCP
  2. Klicken Sie auf + Add New Global MCP Server
  3. Fügen Sie die folgende Konfiguration ein (oder fügen Sie den webflow -Teil zu Ihrer vorhandenen Konfiguration hinzu)
{ "mcpServers": { "webflow": { "command": "npx mcp-remote https://mcp.webflow.com/sse" } } }
  1. Speichern. Cursor öffnet automatisch ein neues Browserfenster mit einer OAuth-Anmeldeseite, um die Webflow-Sites zu autorisieren, auf die der MCP-Server Zugriff haben soll.

Für Claude Desktop:

  1. Öffnen Sie SettingsDeveloper
  2. Klicken Sie Edit Config
  3. Öffnen Sie claude_desktop_config.json in einem Code-Editor und fügen Sie die folgende Konfiguration ein (oder fügen Sie den webflow -Teil zu Ihrer vorhandenen Konfiguration hinzu).
{ "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }
  1. Speichern Sie die Datei und starten Sie Claude Desktop neu (Befehl/Strg + R). Beim Neustart öffnet sich automatisch ein neues Browserfenster mit einer OAuth-Anmeldeseite zur Autorisierung der Webflow-Sites, auf die der MCP-Server Zugriff haben soll.

Für Windsurfen:

  1. Navigieren Sie zu Windsurf - SettingsAdvanced Settings
  2. Scrollen Sie nach unten zum Abschnitt CascadeAdd ServerAdd custom server +
  3. Fügen Sie die folgende Konfiguration ein (oder fügen Sie den webflow -Teil zu Ihrer vorhandenen Konfiguration hinzu)
{ "mcpServers": { "webflow": { "command": "npx", "args": ["mcp-remote", "https://mcp.webflow.com/sse"] } } }
  1. Klicken Sie auf Save . Windsurf öffnet automatisch ein neues Browserfenster mit einer OAuth-Anmeldeseite, um die Webflow-Sites zu autorisieren, auf die der MCP-Server Zugriff haben soll.

Wichtiger Hinweis

Alle diese Methoden basieren auf dem npm-Paket mcp-remote , das am 30.04.2025 noch als experimentell gilt. Sollten Probleme auftreten und Sie Ihre OAuth-Token zurücksetzen möchten, können Sie vor dem Neustart Ihres MCP-Clients den folgenden Befehl ausführen:

rm -rf ~/.mcp-auth

▶️ Schnellstart (lokale Installation)

  1. Holen Sie sich Ihr Webflow-API-Token
  1. Zu Ihrem KI-Editor hinzufügen
{ "mcpServers": { "webflow": { "command": "npx", "args": ["-y", "webflow-mcp-server@0.4.1"], "env": { "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>" } } } }

Für Cursor:

  1. Gehen Sie zu Einstellungen → Cursoreinstellungen → MCP
  2. Klicken Sie auf + Add New Global MCP Server
  3. Konfiguration einfügen
  4. Ersetzen Sie YOUR_WEBFLOW_TOKEN durch das Token, das Sie zuvor kopiert haben
  5. Cursor speichern und neu starten

Für Claude Desktop:

  1. Öffnen Sie Einstellungen → Entwickler
  2. Klicken Sie Edit Config
  3. Öffnen Sie claude_desktop_config.json in einem Code-Editor und fügen Sie die Konfiguration ein
  4. Ersetzen Sie YOUR_WEBFLOW_TOKEN durch das Token, das Sie zuvor kopiert haben. 5. Speichern Sie und starten Sie Claude neu.

❓ Fehlerbehebung

Wenn Sie Probleme beim Starten des Servers in Ihrem MCP-Client, z. B. Cursor oder Claude Desktop, haben, versuchen Sie Folgendes.

Stellen Sie sicher, dass Sie über ein gültiges Webflow-API-Token verfügen

  1. Gehen Sie zum API Playground von Webflow , melden Sie sich an und generieren Sie ein Token. Kopieren Sie dann das Token aus dem Request Generator
  2. Ersetzen Sie YOUR_WEBFLOW_TOKEN in Ihrer MCP-Clientkonfiguration durch das Token, das Sie kopiert haben
  3. Speichern und starten Sie Ihren MCP-Client neu

Stellen Sie sicher, dass Sie Node und NPM installiert haben

Führen Sie die folgenden Befehle aus, um zu bestätigen, dass Sie Node und NPM installiert haben:

node -v npm -v

Leeren Sie Ihren NPM-Cache

Manchmal können Probleme mit npx durch das Leeren Ihres NPM-Cache behoben werden.

npm cache clean --force

Korrigieren Sie die globalen Paketberechtigungen von NPM

Wenn npm -v bei Ihnen nicht funktioniert sudo npm -v jedoch schon, müssen Sie möglicherweise die globalen Paketberechtigungen von NPM korrigieren. Weitere Informationen finden Sie in der offiziellen NPM-Dokumentation .

Hinweis: Wenn Sie Änderungen an Ihrer Shell-Konfiguration vornehmen, müssen Sie Ihre Shell möglicherweise neu starten, damit die Änderungen wirksam werden.

🛠️ Verfügbare Tools

Seiten

sites - list; // List all sites sites - get; // Get site details sites - publish; // Publish site changes

Seiten

pages - list; // List all pages pages - get - metadata; // Get page metadata pages - update - page - settings; // Update page settings pages - get - content; // Get page content pages - update - static - content; // Update page content

CMS

collections - list; // List collections collections - get; // Get collection details collections - create; // Create a collection collection - fields - create - static; // Create a static field collection - fields - create - option; // Create an option field collection - fields - create - reference; // Create a reference field collection - fields - update; // Update a custom field collections - items - create - item - live; // Create items collections - items - update - items - live; // Update items collections - items - list - items; // List collection items collections - items - create - item; // Create collection items (staged) collections - items - update - items; // Update collection items (staged) collections - items - publish - items; // Publish collection items

🗣️ Eingabeaufforderungen und Ressourcen

Diese Implementierung enthält keine prompts oder resources aus der MCP-Spezifikation. Dies kann sich jedoch in Zukunft ändern, wenn die Unterstützung durch gängige MCP-Clients breiter wird.

🚧 Entwicklungsmodus

Wenn Sie den Server im Entwicklungsmodus ausführen möchten, können Sie Abhängigkeiten installieren und den Server mit dem folgenden Befehl ausführen:

  1. Klonen und installieren:
git clone git@github.com:webflow/mcp-server.git cd mcp-server npm install
  1. Fügen Sie Ihr Token zu einer .env Datei im Stammverzeichnis des Projekts hinzu:
# .env WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>
  1. Entwicklungsserver starten:
npm start

📄 Webflow-Entwicklerressourcen

Related MCP Servers

  • A
    security
    A
    license
    A
    quality
    Enables browser automation with Puppeteer, supporting navigation, form interactions, and connection to active Chrome instances for comprehensive web page interaction.
    Last updated -
    8
    470
    8
    TypeScript
    MIT License
    • Apple
    • Linux
  • A
    security
    A
    license
    A
    quality
    Enables Claude to interact with Webflow's APIs for managing sites, retrieving information, and executing tasks using natural language.
    Last updated -
    2
    4
    TypeScript
    MIT License
    • Apple
    • Linux
  • -
    security
    A
    license
    -
    quality
    A Model Context Protocol server implementation that integrates Wordware flows as tools directly within Claude conversations, supporting features like founder research, lead enrichment, Notion integration, and task solving with Google search.
    Last updated -
    50
    JavaScript
    MIT License
    • Apple
  • -
    security
    F
    license
    -
    quality
    A Model Context Protocol server that integrates with AWS CodePipeline, allowing users to manage pipelines through Windsurf and Cascade using natural language commands.
    Last updated -
    4
    TypeScript

View all related MCP servers

ID: qau6rnloio