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 .

npm-Schild Farnschild

ℹ Voraussetzungen

Related MCP server: Webflow MCP Server

▶️ Schnellstart (gehostet auf Cloudflare-Workern)

Für Cursor:

Gehen Sie zu Settings → Cursor Settings → MCP
Klicken Sie auf + Add New Global MCP Server
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" } } }

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:

Öffnen Sie Settings → Developer
Klicken Sie Edit Config
Ö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"] } } }

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:

Navigieren Sie zu Windsurf - Settings → Advanced Settings
Scrollen Sie nach unten zum Abschnitt Cascade → Add Server → Add custom server +
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"] } } }

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)

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

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:

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

Für Claude Desktop:

Öffnen Sie Einstellungen → Entwickler
Klicken Sie Edit Config
Öffnen Sie claude_desktop_config.json in einem Code-Editor und fügen Sie die Konfiguration ein
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

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
Ersetzen Sie YOUR_WEBFLOW_TOKEN in Ihrer MCP-Clientkonfiguration durch das Token, das Sie kopiert haben
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

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:

Klonen und installieren:

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

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

# .env WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>

Entwicklungsserver starten:

npm start

📄 Webflow-Entwicklerressourcen

⚠️ 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.

Webflow

Offizieller MCP-Server von Webflow

ℹ Voraussetzungen

▶️ Schnellstart (gehostet auf Cloudflare-Workern)

▶️ Schnellstart (lokale Installation)

❓ Fehlerbehebung

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

Stellen Sie sicher, dass Sie Node und NPM installiert haben

Leeren Sie Ihren NPM-Cache

Korrigieren Sie die globalen Paketberechtigungen von NPM

🛠️ Verfügbare Tools

Seiten

Seiten

Komponenten

CMS

Benutzerdefinierter Code

🗣️ Eingabeaufforderungen und Ressourcen

🚧 Entwicklungsmodus

📄 Webflow-Entwicklerressourcen

⚠️ Bekannte Einschränkungen

Aktualisierungen statischer Seiteninhalte

Resources

Tools

Appeared in Searches

New MCP Servers

Latest Blog Posts

MCP directory API