Wie verbindet man Claude per MCP mit Webflow?

Kurzantwort: Claude verbindet sich über den offiziellen Webflow MCP Server mit Webflow und erhält so direkten Zugriff auf das CMS, die Designer-APIs und die Datenebene Ihrer Website, und zwar direkt in Claude Desktop oder Claude Code. Sie können Content-Updates ausspielen, CMS-Collections verwalten und strukturelle Seitenänderungen vornehmen, ohne die Webflow-Oberfläche zu öffnen.

Dass Claude schreiben kann, wissen Sie bereits. Was die meisten B2B-SaaS-Teams noch nicht auf dem Schirm haben: Claude kann auch veröffentlichen. Mit verbundenem Webflow MCP Server kopieren Sie Inhalte nicht mehr zwischen Tools hin und her, sondern spielen Updates direkt aus Ihrem AI-Workflow in Ihre Live-Website bei Webflow aus.

Dieses Tutorial zeigt Schritt für Schritt, wie Sie die Verbindung einrichten, was damit möglich ist und wo SaaS-Teams, die Content in großem Umfang pflegen, die größten Effizienzgewinne erzielen.

Was ist der Webflow MCP Server?

Der Webflow MCP Server ist eine Integration von Webflow selbst und basiert auf dem Model Context Protocol (MCP) von Anthropic, einem offenen Standard, mit dem sich AI-Modelle mit externen Tools und Datenquellen verbinden. Die Webflow-Implementierung gibt Claude direkten Zugriff auf die CMS-Collections, die Designer-APIs und die Content-Ebene Ihrer Website.

Einfach gesagt: Claude ist nicht länger ein Schreibassistent, aus dem Sie Texte herauskopieren, sondern ein Agent, der die Struktur Ihrer Webflow-Website lesen, CMS-Einträge erstellen und aktualisieren und Änderungen ausspielen kann, ohne dass Sie die Unterhaltung verlassen.

Die Integration wird von Webflow gepflegt und funktioniert mit Claude Desktop, Claude Code, Cursor und Windsurf.

Was Sie mit Claude und Webflow MCP tun können

Bevor Sie etwas einrichten, lohnt sich ein Blick darauf, was die Integration tatsächlich unterstützt. Der Webflow MCP Server stellt Claude eine definierte Auswahl an Aktionen in Ihrem Workspace bereit:

CMS-Funktionen:

• Neue CMS-Collection-Einträge erstellen
• Felder bestehender Einträge aktualisieren (Text, Rich Text, Bilder, Referenzen)
• Einträge veröffentlichen und depublizieren
• Collection-Schemata abfragen, um die Feldstruktur zu verstehen

Website- und Seitenverwaltung:

• Seitenstruktur und Metadaten lesen
• Strukturelle Änderungen an Seiten vornehmen
• Website-Einstellungen und Styles auf Systemebene verwalten

Was (noch) nicht möglich ist:

• Visuelles Drag-and-drop-Design (das bleibt im Webflow Designer)
• Die Publishing-Warteschlange von Webflow bei komplexen Multi-Environment-Setups ersetzen
• Custom-Code-Komponenten ohne manuelle Eingabe verarbeiten

Für B2B-SaaS-Teams sind die wertvollsten Anwendungsfälle Content-Updates im CMS, Anpassungen von Landingpage-Texten und Massenänderungen von Feldern über mehrere Collection-Einträge hinweg. Wenn Ihr Team solche wiederkehrenden Publishing-Aufgaben in großem Umfang erledigt, überschneidet sich das oft mit den umfassenderen Aufgaben von Marketing Operations für B2B SaaS.

So verbinden Sie Claude per MCP mit Webflow

Schritt 1: Webflow API-Token erstellen

1. Melden Sie sich in Ihrem Webflow-Konto an und öffnen Sie die Website, die Sie verbinden möchten
2. Gehen Sie zu Site Settings > Integrations > API Access
3. Erstellen Sie ein neues API-Token mit Lese- und Schreibrechten für das CMS
4. Kopieren Sie das Token und bewahren Sie es sicher auf. Nach dem Schließen dieses Bildschirms wird es nicht mehr angezeigt.

Wenn Sie mit mehreren Webflow-Websites arbeiten, erstellen Sie für jede Website ein eigenes Token. Werden Tokens über Workspaces hinweg vermischt, entstehen Berechtigungsfehler, die sich nur mühsam beheben lassen.

Schritt 2: Webflow MCP Server installieren

Der Webflow MCP Server läuft als Node.js-Prozess auf Ihrem Rechner. Node.js muss vor diesem Schritt installiert sein.

Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

npx @webflow/mcp-server

Alternativ können Sie ihn global installieren:

npm install -g @webflow/mcp-server

Der Server ist Open Source und wird im offiziellen GitHub-Repository von Webflow gepflegt: webflow/mcp-server.

Schritt 3: Claude Desktop für die Nutzung des MCP Servers konfigurieren

Öffnen Sie die Konfigurationsdatei von Claude Desktop. Unter macOS finden Sie sie hier:

~/Library/Application Support/Claude/claude_desktop_config.json

Fügen Sie den Webflow MCP Server zu Ihrer Konfiguration hinzu:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["@webflow/mcp-server"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

Ersetzen your-token-here durch das API-Token, das Sie in Schritt 1 erstellt haben.

Speichern Sie die Datei und starten Sie Claude Desktop neu. In der Claude-Oberfläche erscheint ein Hammer-Symbol, das bestätigt, dass die MCP-Tools aktiv sind.

Schritt 4: Verbindung prüfen

Starten Sie eine neue Unterhaltung in Claude und fragen Sie:

„Liste die CMS-Collections auf, die in meiner Webflow-Website verfügbar sind.“

Claude ruft den Webflow MCP Server auf und gibt die Namen und Strukturen Ihrer Collections zurück. Erscheint stattdessen ein Fehler, prüfen Sie, ob Ihr API-Token die richtigen Berechtigungen hat und ob das JSON in der Konfigurationsdatei gültig ist (ein fehlendes Komma macht die ganze Datei unbrauchbar).

So spielen Sie CMS-Content-Updates mit Claude aus

Nach der Verbindung folgen Content-Operationen einem einfachen Muster: Sie beschreiben, was Sie möchten, Claude fragt das Schema ab, und Sie bestätigen die Schreibaktion.

Bestehenden CMS-Eintrag aktualisieren

Bitten Sie Claude zunächst, den aktuellen Stand eines Eintrags auszulesen:

„Finde den Blogbeitrag mit dem Titel ‚How to reduce churn in SaaS‘ in meiner Collection Blog Posts und zeige mir die aktuelle Meta-Beschreibung und den Haupttext.“

Claude ruft den Eintrag ab und zeigt die Felder an. Geben Sie dann Ihre Anweisung für das Update:

„Ändere die Meta-Beschreibung in: ‚Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff.‘ Veröffentliche die Änderung anschließend.“

Claude schreibt das Update nach Webflow und bestätigt den Status des Eintrags.

Neuen CMS-Eintrag erstellen

Hier wird der Workflow wirklich schnell. Sie schreiben Ihr Content-Briefing in Claude, erstellen den Inhalt in derselben Unterhaltung und spielen ihn direkt aus:

„Erstelle einen neuen Eintrag in der Collection Blog Posts. Titel: ‚SaaS Pricing Page Teardown: What High-Converting Pages Have in Common‘. Slug: saas-pricing-page-teardown. Setze den Status auf Draft. Verwende für das Textfeld folgenden Inhalt: [Ihren Inhalt einfügen].“

Claude ordnet Ihre Angaben den passenden Collection-Feldern zu und erstellt den Eintrag. Anschließend können Sie ihn in Webflow prüfen und veröffentlichen oder Claude bitten, ihn direkt zu veröffentlichen, sofern Ihr Workflow das zulässt.

Massenänderungen von Feldern in einer Collection

Diesen Anwendungsfall halten viele Teams nicht für möglich. Wenn Sie ein Feld über mehrere CMS-Einträge hinweg aktualisieren müssen, etwa um Title-Tags im Rahmen einer SEO-Bereinigung zu verbessern oder wiederkehrende Taxonomiefehler zu korrigieren, geht das in einer einzigen Unterhaltung:

„Suche in meiner Collection Case Studies alle Einträge, bei denen das Feld ‚Industry‘ leer ist, und setze es auf ‚B2B SaaS‘.“

Claude fragt die Collection ab, identifiziert die passenden Einträge und wendet das Update an. Was in Webflow 20 Minuten manuelles Klicken bedeuten würde, dauert so weniger als zwei Minuten.

Praxis-Workflow: Update einer Landingpage veröffentlichen

So sieht ein realer Workflow aus, den ein B2B-SaaS-Marketingteam mit Claude und verbundenem Webflow MCP durchlaufen würde.

Szenario: Sie haben den Hero-Text Ihrer Startseite überarbeitet und möchten die Änderung nach Webflow übertragen, ohne den Designer zu öffnen.

1. Aktuellen Stand abfragen: „Zeige mir die aktuelle Hero-Überschrift und Unterüberschrift im CMS-Eintrag der Startseite.“
2. Prüfen und freigeben: Claude gibt den aktuellen Text zurück. Sie bestätigen, dass er aktualisiert werden muss.
3. Update formulieren: „Ändere die Hero-Überschrift in: ‚Stop guessing. Start converting.‘ Ändere die Unterüberschrift in: ‚SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue.‘ Veröffentliche die Änderungen.“
4. Bestätigen: Claude bestätigt, dass die Felder aktualisiert und der Eintrag veröffentlicht ist.

Gesamtdauer: unter drei Minuten. Keine Designer-Sitzung, kein Kopieren und Einfügen, kein Wechsel zwischen Tabs.

Wofür B2B-SaaS-Teams das nutzen sollten

Nicht jedes Content-Update muss über Claude und MCP laufen. Hier lohnt sich das Setup für SaaS-Teams am deutlichsten:

Anwendungsfälle mit hohem Nutzen:

• SEO-Metadaten auf mehreren Landingpages vor dem Start einer Kampagne aktualisieren
• Blog-Content veröffentlichen, der in Claude entworfen und redigiert wurde
• SEO-Audits durchführen und Korrekturen (Meta-Beschreibungen, Title-Tags) in derselben Sitzung umsetzen
• Lokalisierte Versionen von CMS-Content für verschiedene Märkte erstellen
• Beschreibungen von Produktfunktionen nach einem Release gesammelt aktualisieren

Anwendungsfälle mit geringerem Nutzen (besser direkt in Webflow):

• Einmalige visuelle Design-Änderungen
• Layout-Umbauten, für die der Designer nötig ist
• Änderungen, die vor der Veröffentlichung von Stakeholdern freigegeben werden müssen

Teams, die häufig Metadaten aktualisieren, Content ausrollen oder Kampagnen starten, kombinieren diesen Workflow möglicherweise auch mit der Unterstützung von Content-Marketing-Agenturen für B2B SaaS oder spezialisierten SEO-Partnern.

Häufige Fehler und wie Sie sie beheben

„No tools available“ in Claude Desktop
Ihre Konfigurationsdatei enthält einen Syntaxfehler oder der MCP Server konnte nicht gestartet werden. Prüfen Sie Ihr JSON auf jsonlint.com und kontrollieren Sie, ob Node.js korrekt installiert ist.

„Unauthorised“, wenn Claude in Webflow schreiben will
Ihr API-Token hat keine Schreibrechte oder wurde für die falsche Website erstellt. Erstellen Sie es mit vollen CMS-Berechtigungen neu und aktualisieren Sie die Konfigurationsdatei.

Claude liest Collections, findet aber bestimmte Einträge nicht
Die Namen von Collection-Einträgen sind in der Webflow API von Groß- und Kleinschreibung abhängig. Bitten Sie Claude, zuerst alle Einträge der Collection aufzulisten, und verwenden Sie dann den exakten zurückgegebenen Namen.

Änderungen erscheinen in Webflow, sind aber nicht live auf der Website
Der Eintrag wurde aktualisiert, aber nicht veröffentlicht. Ergänzen Sie Ihre Anweisung um „und veröffentliche den Eintrag“ oder prüfen Sie die Publishing-Warteschlange von Webflow manuell.

FAQs

Was ist Claude Webflow MCP und wie funktioniert es?
Die Claude Webflow MCP Integration verbindet Claude über das Model Context Protocol von Anthropic mit Ihrer Webflow-Website. Claude nutzt den Webflow MCP Server, um direkt aus einer Unterhaltung heraus Ihre CMS-Collections, Seitenmetadaten und Website-Einstellungen zu lesen und zu bearbeiten. Sie authentifizieren sich über ein Webflow API Token, und Claude ruft die APIs von Webflow in Ihrem Auftrag auf.

Muss ich programmieren können, um den Webflow MCP Server zu nutzen?
Sie sollten sicher genug sein, um eine JSON-Konfigurationsdatei zu bearbeiten und einen einzelnen Terminal-Befehl auszuführen. Darüber hinaus läuft die Interaktion ausschließlich im Gespräch ab. Für Content-Updates schreiben Sie keinen Code. Wenn Sie in einfachen Worten beschreiben können, was Sie wollen, übernimmt Claude die API-Aufrufe.

Ist der Webflow MCP Server für eine Live-Produktivseite sicher?
Ja, mit einer Vorsichtsmaßnahme: Lassen Sie sich von Claude immer erst den aktuellen Stand eines Eintrags anzeigen, bevor Änderungen geschrieben werden, und bestätigen Sie das Update, bevor Claude es veröffentlicht. Der MCP Server schreibt direkt in Ihren Live-Workspace in Webflow. Einen Staging-Puffer gibt es daher nur, wenn Sie ihn selbst in Webflow einrichten. Behandeln Sie es wie einen direkten Datenbankzugriff: bewusst und mit vorheriger Prüfung, bevor Sie Änderungen übernehmen.

Worin unterscheidet sich die Nutzung von Claude mit Webflow MCP von den in den Designer integrierten Webflow AI Funktionen?
Die nativen AI Funktionen von Webflow arbeiten innerhalb des Designers und unterstützen vor allem bei Optik und Layout. Die Claude Webflow MCP Integration arbeitet außerhalb des Designers und konzentriert sich auf CMS-Operationen, Content-Veröffentlichung und Massenverwaltung von Daten. Beide decken unterschiedliche Teile des Workflows ab. MCP eignet sich besser für Content-Teams, die große Mengen strukturierter Daten verwalten.

Kann ich den Webflow MCP Server auch mit Claude Code oder Cursor nutzen, nicht nur mit Claude Desktop?
Ja. Der Webflow MCP Server funktioniert mit Claude Desktop, Claude Code, Cursor und Windsurf. Die Konfiguration unterscheidet sich je nach Tool geringfügig, das API Token und die Server-Einrichtung bleiben aber gleich. Das jeweilige Konfigurationsformat entnehmen Sie der MCP-Dokumentation des Tools.