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

• Node.js

• NPM

• Ein Webflow-Konto

Related MCP server: Webflow MCP Server

▶️ Schnellstart (gehostet auf Cloudflare-Workern)

Für Cursor:

1. Gehen Sie zu Settings → Cursor Settings → MCP

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"
    }
  }
}

4. 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 Settings → Developer

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"]
    }
  }
}

4. 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 - Settings → Advanced Settings

2. Scrollen Sie nach unten zum Abschnitt Cascade → Add Server → Add 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"]
    }
  }
}

4. 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

• Gehen Sie zum API-Spielplatz von Webflow

• Anmelden und Token generieren

• Kopieren Sie das Token aus dem Request Generator

2. Zu Ihrem KI-Editor hinzufügen

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server@0.5.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

• Node.js

• NPM

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

Komponenten

components - list // List all components in a site
components - get - content // Get component content (text, images, nested components)
components - update - content // Update component content for localization
components - get - properties // Get component properties (default values)
components - update - properties // Update component properties for localization

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

Benutzerdefinierter Code

custom code - add - inline - site - script // Register an inline script for a site
custom code - get - registered - site - script - list // List all scripts registered to a site
custom code - get - applied - site - script - list //Get all scripts applied to a site
custom code - delete site custom code // Remove scripts from a site 

🗣️ 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

2. Fügen Sie Ihr Token zu einer .env Datei im Stammverzeichnis des Projekts hinzu:

# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>

3. Entwicklungsserver starten:

npm start

📄 Webflow-Entwicklerressourcen

• Webflow-API-Dokumentation

• Webflow JavaScript SDK

⚠️ Bekannte Einschränkungen

Aktualisierungen statischer Seiteninhalte

Der Endpunkt „pages_update_static_content“ unterstützt derzeit nur Aktualisierungen lokalisierter statischer Seiten in sekundären Gebietsschemata. Aktualisierungen statischer Inhalte im Standardgebietsschema werden nicht unterstützt und führen zu Fehlern.