Wie verbindet man Claude mit dem Webflow MCP?

Kurzantwort: Claude verbindet sich über den offiziellen MCP-Server (Model Context Protocol) mit Webflow. Damit haben Sie aus Claude Desktop oder Claude Code heraus einen direkten Draht zum CMS, zu den Seiten und zur Designer API Ihrer Website. Sie können Inhalte aktualisieren, CMS-Einträge anlegen und Collections verwalten, indem Sie in einfacher Sprache beschreiben, was Sie möchten. Manuelle Arbeit in der Oberfläche ist nicht nötig.

Wenn Sie eine Webflow-Website betreuen und Inhalte noch immer von Hand ins CMS kopieren, wird Ihnen dieser Leitfaden Ihre Arbeitsweise verändern. Der Webflow MCP Server lässt Claude direkt in Ihrem Webflow Workspace lesen und schreiben. So können Sie Blogbeiträge aktualisieren, neue Collection-Einträge anlegen und Seiteninhalte bearbeiten, und zwar im Gespräch statt im Designer.

Dies ist eine praxisnahe Anleitung für B2B-SaaS-Teams, die schneller veröffentlichen und seltener den Kontext wechseln wollen. Am Ende läuft die Integration, und Sie wissen genau, was Claude in Webflow kann und was nicht. Wenn Sie auch nach weiterer Wachstumsunterstützung rund um Content-Systeme und Publishing-Prozesse suchen, kuratiert SaaS Hackers außerdem die besten B2B-SaaS-Agenturen für Content Marketing.

Was ist der Webflow MCP Server?

Der Webflow MCP Server ist eine von Webflow selbst entwickelte Integration, die den Standard des Model Context Protocol umsetzt. MCP ist ein offenes Protokoll, über das sich KI-Tools wie Claude mit externen Diensten verbinden können, und zwar mit strukturiertem, berechtigungsgesteuertem Zugriff.

Einfach gesagt: Claude muss die Struktur Ihrer Webflow-Website nicht erraten, denn der MCP Server gibt ihm Echtzeitzugriff auf die tatsächlichen Daten Ihres Workspace. Claude kann Ihre CMS-Collections abfragen, vorhandene Einträge lesen, neue Einträge anlegen und Aktualisierungen auslösen, und zwar über dieselben APIs, die auch ein Entwickler nutzen würde.

Der MCP Server von Webflow wird direkt von Webflow gehostet und gepflegt. Er nutzt also die offizielle Data API und Designer API und keine Behelfslösung eines Drittanbieters.

Was kann Claude in Webflow konkret tun?

Bevor Sie etwas einrichten, sollten Sie den Umfang klar kennen. Mit Webflow MCP kann Claude Folgendes:

• CMS-Collections lesen und vorhandene Einträge samt Felddaten auflisten
• Neue CMS-Collection-Einträge anlegen mit Text, Rich Text, Bildern und Referenzfeldern
• Vorhandene Collection-Einträge aktualisieren, einschließlich Inhalten im Entwurfs- und im veröffentlichten Zustand
• Einträge veröffentlichen und auf Ihre Live-Website bringen
• Die Seitenstruktur abfragen, einschließlich Seiten, Collections und Feldschemata
• Strukturelle und systemweite Änderungen vornehmen über die Designer API

Claude kann Seiten nicht visuell gestalten, so wie ein Mensch es auf der Designer-Arbeitsfläche von Webflow tut. Sehen Sie Claude als leistungsstarken CMS-Operator und Content-Publisher, nicht als visuelles Design-Tool. Teams, die auch bei der visuellen Ebene Unterstützung brauchen, können B2B-SaaS-Agenturen für Web Design oder spezialisierte Experten für B2B-SaaS-Webdesign und UX vergleichen.

Was Sie vor dem Start brauchen

• Ein Webflow-Konto mit mindestens einer Website (jeder Tarif mit CMS-Zugang)
• Installiertes Claude Desktop oder Zugang zu Claude Code
• Ein Webflow API Token mit den passenden Berechtigungen (Scopes)
• Lokal installiertes Node.js (Version 18 oder höher)

So verbinden Sie Claude mit Webflow MCP: Schritt für Schritt

Schritt 1: Webflow API Token erzeugen

1. Melden Sie sich in Ihrem Webflow-Dashboard an
2. Gehen Sie zu Account Settings und dann zu Integrationen
3. Scrollen Sie zu API Access und erzeugen Sie ein neues Token
4. Wählen Sie die benötigten Scopes aus: CMS read/write, Sites read und Pages read/write sind die wichtigsten für Content-Workflows
5. Kopieren Sie das Token und bewahren Sie es sicher auf

Schritt 2: MCP Server in Claude Desktop konfigurieren

Claude Desktop nutzt eine Konfigurationsdatei, um zu wissen, mit welchen MCP Servern es sich verbinden soll. Öffnen Sie die Konfigurationsdatei unter:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Fügen Sie den folgenden Block in die mcpServers ein:

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

Ersetzen your-api-token-here mit dem Token, das Sie in Schritt 1 erzeugt haben.

Schritt 3: Claude Desktop neu starten

Speichern Sie die Konfigurationsdatei, beenden Sie Claude Desktop vollständig und öffnen Sie es erneut. Claude lädt den MCP Server beim Start. Sobald MCP-Tools verfügbar sind, sehen Sie in der Chatoberfläche ein kleines Hammer-Symbol.

Schritt 4: Verbindung prüfen

Geben Sie in Claude Folgendes ein:

"List the Webflow sites connected to my account."

Wenn die Verbindung funktioniert, gibt Claude die Namen und IDs Ihrer Websites zurück. Tritt ein Fehler auf, prüfen Sie noch einmal die Scopes des Tokens und ob Node.js korrekt installiert ist.

Stattdessen Claude Code verwenden

Wenn Sie in einer Terminal-Umgebung arbeiten oder Claude Code gegenüber Claude Desktop bevorzugen, läuft die Einrichtung etwas anders ab.

Starten Sie den MCP Server mit diesem Befehl manuell:

WEBFLOW_TOKEN=your-api-token npx -y @webflow/mcp-server

Konfigurieren Sie anschließend Ihre Claude-Code-Umgebung so, dass sie auf diesen laufenden Server zeigt. Das Webflow-GitHub-Repository für den MCP Server (webflow/mcp-server) enthält die vollständige Referenz zu Umgebungsvariablen und erweiterten Konfigurationsoptionen.

Praxis-Workflows: Was Sie damit konkret tun können

Einen neuen Blogbeitrag ins CMS übertragen

Sobald die Verbindung steht, können Sie mit einem einzigen Prompt einen neuen CMS-Eintrag anlegen. Zum Beispiel:

"Create a new item in my Blog Posts collection. Title: 'How SaaS Teams Use AI for Faster Onboarding'. Slug: how-saas-teams-use-ai-faster-onboarding. Set the status to Draft."

Claude ruft die CMS API auf, legt den Eintrag mit der richtigen Feldzuordnung an und gibt die Eintrags-ID zurück. Anschließend können Sie das Body-Feld mit bereits geschriebenem Content befüllen lassen oder Claude den Text direkt entwerfen lassen. Wenn KI-gestütztes Publishing in Ihrem Workflow wichtiger wird, behandelt SaaS Hackers auch verwandte Themen wie die Auswirkungen von AGI auf Marketing, Business und Softwareentwicklung.

Bestehenden CMS-Eintrag aktualisieren

"Find the blog post titled 'Product Update: Q1 2025' and update the excerpt field to: 'A summary of everything we shipped in Q1, including the new onboarding flow and API rate limit increases.'"

Claude fragt die Collection ab, findet den passenden Eintrag und ändert das Feld. Sie müssen die Eintrags-ID nicht vorher kennen.

Einen Entwurfseintrag veröffentlichen

"Publish the blog post with slug 'how-saas-teams-use-ai-faster-onboarding' to the live site."

Dadurch wird die Veröffentlichung über die API ausgelöst. Der Eintrag geht vom Entwurf in den Live-Zustand, ohne dass Sie den Designer öffnen.

Das CMS auf fehlende Felder prüfen

"Check all items in my Case Studies collection and list any that are missing the 'Client Logo' or 'Industry' fields."

Dies ist ein wirklich nützlicher Workflow für die Qualitätssicherung von Content. Claude liest jeden Eintrag der Collection und gibt eine Liste der Lücken zurück. Über die Webflow-Oberfläche wäre dafür ein erheblicher manueller Aufwand nötig.

Berechtigungen und worauf Sie achten sollten

Einige Punkte sollten Sie kennen, bevor Sie das im Live-Betrieb einsetzen:

Der Scope des Tokens ist wichtig. Ein Token mit Schreibzugriff kann Inhalte anlegen und überschreiben. Wenn Sie experimentieren, erzeugen Sie zuerst ein Token mit reinem Lesezugriff, um die Struktur Ihrer Website ohne Risiko zu erkunden.

Die Veröffentlichung erfolgt sofort. Wenn Claude einen Eintrag veröffentlicht, geht er live. Die API kennt keinen Bestätigungsschritt für den Entwurf. Gewöhnen Sie sich an, Entwurfsinhalte zu prüfen, bevor Sie Veröffentlichungsbefehle erteilen.

CMS-Feldtypen haben Einschränkungen. Referenzfelder, Optionsfelder und Bildfelder erwarten in der API bestimmte Formate. Wenn Claude beim Anlegen oder Aktualisieren einen Fehler meldet, lassen Sie es zuerst das Schema der Collection beschreiben, damit es die Felder korrekt zuordnet.

Es gelten Ratenbegrenzungen. Die Webflow Data API hat je nach Tarif Rate Limits. Bei Massenvorgängen (Aktualisierung von mehr als 50 Einträgen) muss Claude die Paginierung bewältigen, und in niedrigeren Tarifen können Sie an Limits stoßen.

Warum B2B-SaaS-Teams das beachten sollten

Die Geschwindigkeit bei der Content-Produktion ist für die meisten SaaS-Marketingteams ein echter Engpass. Ein typischer Veröffentlichungszyklus für einen Blogbeitrag umfasst Schreiben, Lektorieren, Formatieren im CMS, Metadaten ergänzen und Veröffentlichen. Jeder Schritt ist manuell und langsam.

Mit dem Claude-Webflow-MCP-Setup kann ein Autor einen fertigen Entwurf übergeben und Claude die CMS-Eingabe, das Befüllen der Felder, die Slug-Erstellung und das Auslösen der Veröffentlichung überlassen. So entfallen bei jedem Beitrag 20 bis 30 Minuten mechanischer Arbeit.

Für Teams, die lokalisierte Inhalte, Produkt-Update-Seiten oder umfangreiche Ressourcenbibliotheken verwalten, summieren sich die Zeitersparnisse schnell. Claude kann in einer einzigen Sitzung eine Reihe von Aktualisierungen abarbeiten, die sonst einen ganzen Nachmittag dauern würde. Unternehmen, die diese Workflows über mehrere Akquisekanäle hinweg skalieren, können zusätzlich spezialisierte Partner unter den B2B-SaaS-Agenturen für SEO, den B2B-SaaS-Agenturen für PPC und den B2B-SaaS-Agenturen für Performance Marketing prüfen.

SaaS Hackers behandelt diese Art der Workflow-Automatisierung in einer größeren Reihe zum Einsatz von Claude in B2B-SaaS-Prozessen. Das Ziel ist immer dasselbe: mechanische Arbeit abbauen, damit sich Ihr Team auf die Entscheidungen konzentrieren kann, die tatsächlich menschliches Urteilsvermögen erfordern. Wenn Sie weitere geprüfte Partner und Praktiker kennenlernen möchten, können Sie auch alle Top-Agenturen, Top-Experten oder Ressourcen durchstöbern.

FAQs

Was ist der Webflow-MCP-Server und wie funktioniert er mit Claude?

Der Webflow MCP Server ist eine offizielle Integration, die das Model Context Protocol umsetzt und Claude direkt mit Ihrem Webflow Workspace verbindet. Er gibt Claude über die Webflow API strukturierten Zugriff auf Ihre CMS-Collections, Seiten und Website-Daten. Sie konfigurieren ihn einmal in Claude Desktop oder Claude Code, danach kann Claude Webflow-Inhalte per Prompt in natürlicher Sprache lesen und schreiben.

Kann Claude mit MCP Seiten in Webflow visuell gestalten?

Nein. Claude arbeitet mit Webflow MCP über die API-Ebene, nicht über die visuelle Arbeitsfläche des Designers. Es kann CMS-Inhalte anlegen und aktualisieren, Collection-Einträge verwalten und systemweite Änderungen vornehmen, zieht aber keine Elemente per Drag-and-drop und ordnet sie nicht visuell an, wie es ein Designer tun würde. Nutzen Sie es für Content-Prozesse, nicht für visuelles Design.

Ist der Webflow MCP Server für den Einsatz mit einer Live-Website sicher?

Ja, mit den richtigen Vorsichtsmaßnahmen. Verwenden Sie ein API-Token mit eingeschränktem Umfang, das nur die Berechtigungen enthält, die Ihr Workflow braucht. Vermeiden Sie in der ersten Testphase Schreib- und Veröffentlichungsrechte. Die Veröffentlichung über die API erfolgt sofort. Behandeln Sie Veröffentlichungsbefehle daher genauso wie eine manuelle Veröffentlichung im Designer.

Muss ich programmieren können, um Claude mit Webflow MCP zu nutzen?

Für die Grundeinrichtung und für Content-Workflows ist keine Programmierung nötig. Sie müssen eine JSON-Konfigurationsdatei bearbeiten und Node.js installiert haben, beides ist aber unkompliziert. Der Webflow MCP Server läuft über npx, Sie müssen also nichts entwickeln oder warten.

Welchen Webflow-Tarif brauche ich für den MCP-Zugang?

Der Webflow MCP Server nutzt die Data API, die in Tarifen mit CMS-Zugang verfügbar ist. Die API-Zugangsdetails Ihres aktuellen Tarifs finden Sie in den Einstellungen Ihres Webflow-Kontos. Für die Funktionen der Designer API können je nach gewünschten Aktionen zusätzliche Tarifvoraussetzungen gelten.