Claude

Webflow gives you the canvas, the CMS, and the publishing pipeline. What it does not do on its own is read your traffic data, catch your broken links, or rewrite two hundred meta descriptions because someone renamed the product. That work still costs a person an afternoon of clicking.

Claude does that work against a live Webflow site through the Webflow MCP server: design and build, content and pages, traffic data, audits, and repeatable automation, all from plain language. You can also point Claude at your visitors instead of your team, through a chat widget on your published pages or through the APIs directly.

This fits agencies running dozens of client sites, marketing teams that need copy variants fast, e-commerce operators writing product descriptions at volume, and developers building AI features on Webflow-hosted pages.

How to integrate Claude with Webflow

What is Claude? Claude is Anthropic's AI assistant, available in a browser, in the Claude Desktop app, and as Claude Code in a terminal. It reaches outside systems through the Model Context Protocol, and that is how it works with Webflow.

You have four ways to connect Claude and Webflow, and they answer different questions:

• The Webflow MCP server connects Claude to your sites so it can build layouts, edit CMS content, read traffic data, and audit pages from a prompt.
• Third-party chatbot widgets added through Code Embed put visitor-facing Claude chat on your published pages.
• Zapier and Make hand Webflow form submissions and CMS events to Claude for background processing.
• The Webflow Data API v2 and Anthropic's APIs give you full control over CMS writes, form handling, and live chat, with the server-side work on you.

Most teams start with the MCP server and add one of the other three when visitors need to talk to Claude directly.

1. Connect Claude to the Webflow MCP server

This is the official route and the one that reaches the most of your site. The Webflow MCP server runs remotely, authorizes over OAuth, and stores no API keys on your machine.

It implements Anthropic's Model Context Protocol, exposing Webflow's own Data and Designer APIs as tools Claude can call. Every action stays inside the Webflow permissions and roles you already have, and every change lands in the site activity log.

In Claude Desktop, add it as a connector:

1. In the Claude chat window, click the plus symbol, then click Add connectors.
2. Search for the Webflow connector by name, switching the list from Featured to All if you do not see it.
3. Click the Webflow connector, click Connect, and grant Claude access to your Webflow account.
4. Pick the sites and Workspaces Claude should reach, then click Authorize App.

Only site owners and admins can authorize a site, so anything you do not own appears greyed out. In Claude Code, skip the connector and run claude mcp add --transport http webflow https://mcp.webflow.com/mcp, then run /mcp and authorize in the browser window that opens. Webflow also documents a manual connector setup and other MCP clients.

The same server powers site management from ChatGPT, Codex, Cursor, and Windsurf, and it is Gemini-compatible, so the capability is not tied to one tool.

What the MCP server does

Webflow documents the tools in groups, and Claude picks the right ones from your prompt.

• Design and build: Build responsive sections and grids, add and edit elements, create classes and combo classes, write site and page custom code, author components with props, variants, and slots, and work in isolated page branches.
• Design systems: Define variables, color schemes, typography scales, and spacing systems, and upload, replace, or remove a site's custom font files.
• Content and pages: Create collections, define fields, run bulk item updates, publish and unpublish the items that feed your Collection Lists, manage assets and forms, edit meta titles and descriptions, control sitemap inclusion, handle schema markup, and read or add comments.
• Audits: Scan pages and CMS items for broken links, missing alt text, and outdated information, then apply the corrections Claude can make safely.
• Analyze: Read sessions, users, and pageviews over a date range, rank top pages, break traffic down by country, browser, or source, and measure engagement events and time on page.
• Automate: Chain steps into repeatable runs, migrating legacy styles into design variables, checking accessibility and performance, and applying the same change across several sites.
• Governance: Give a site its own Agent Instructions, keep every agent inside your existing permissions and roles, and review what changed in the site activity log.

The Analyze group reads from Webflow Analyze, an add-on available on paid Site plans. The rest works on any site you can authorize.

Two extras cut the prompting work. Webflow publishes a prompt library covering SEO metadata audits, keyword optimization, variable refactors, link fixing, and breakpoint work, plus a set of installable agent skills that Claude invokes on its own when a request matches: bulk CMS update, site audit, asset audit, link checker, accessibility audit, and safe publish among them. Install the skills with npx skills add webflow/webflow-skills.

When Claude needs your site open

Most of this runs with no browser tab open at all. Creating and editing elements, components, styles, and variables, and managing CMS content, pages, assets, and fonts all go through the Data API.

A short list of capabilities depends on a live design session, and those need the MCP Bridge App running from the Apps panel: capturing visual snapshots of elements, and reading or changing the current selection, page, mode, branch, canvas, and breakpoints. The Bridge App installs itself to your authorized sites during OAuth, so there is nothing extra to hunt down. You launch it only when you want one of those few things, and it can sit minimized once it connects. For an unattended run, have Claude publish to a staging domain and check the result there instead.

What the MCP server cannot do

The limits are documented, and they matter before you plan a workflow around this.

• Interactions: Claude cannot create or apply Webflow Interactions (IX3), so build and edit those by hand.
• Fonts: Only uploaded custom font files are managed here. Google and Adobe Fonts stay in site settings, though you can download Google font files and upload them.
• Localization: Existing CMS items and static content in secondary locales are readable and editable, but Claude cannot create new localized CMS items.
• Access settings: Claude cannot add users or assign roles on a site or Workspace. It works within the permissions you already hold.
• One workspace per authorization: Switching workspaces means re-authenticating, which for a connector client like Claude means removing the connector and installing it again.

Publishing works the way it always has: Claude's edits sit in your site until you publish, exactly like your own.

2. Add a Claude-powered chatbot with Code Embed elements

To put a visitor-facing Claude chatbot on your pages, use a third-party chatbot platform that calls the Claude API from its own backend and hands you an embed script. Your Anthropic API key stays on the vendor's servers and never appears in your page source. You need a paid Site plan that supports custom code in the head and body tags.

Three platforms have documented Webflow integration with Claude as a selectable model.

Voiceflow

Voiceflow is a chatbot platform with a visual conversation builder that calls the Claude API from its backend and generates a custom embed script for your site. Your key lives with Voiceflow, not in your published HTML, so you can safely run visitor-facing AI chat on Webflow pages.

Voiceflow lists Claude Opus and Sonnet as selectable models.

Social Intents

Social Intents puts live chat and AI chatbots on your Webflow site and routes visitor conversations into collaboration tools like Microsoft Teams, Slack, Google Chat, and Zoom, so agents can reply without switching dashboards.

It supports Claude through a bring-your-own-key setup and lets you train chatbots on website URLs, sitemaps, PDFs, and spreadsheets without writing code. The bot resolves common visitor questions on its own and escalates the harder ones to a human in your existing team channels.

Botpress

Botpress offers Claude as a selectable model behind its webchat widget, and the same rule applies: the key stays with the vendor, outside your Webflow site.

All three hand you an embed you can publish, which leaves you two placement decisions.

Embedding a chatbot site-wide

Site-wide placement puts the chatbot on every page of your published site. This works well for general customer support or FAQ bots.

To add a chatbot to your entire site:

1. Create an account on your chosen chatbot platform and configure the bot with Claude as the model.
2. Train the bot on your content by pasting URLs or uploading documents.
3. Copy the provided <script> embed code from the platform's deploy section.
4. Go to Project Settings > Custom Code > Footer Code, paste the script, and click Save.
5. Publish your site.

Custom code only executes on published sites, not in preview. Test your chatbot on your live domain after publishing.

Embedding a chatbot on a specific page

Page-specific placement lets you add the chatbot only where it's needed, such as on a pricing page or in a support section.

To add a chatbot to a single page:

1. Copy the <script> embed code from your chatbot platform.
2. Open the target page and drag a Code Embed element from the Add panel onto the canvas.
3. Paste the code into the Code Embed editor and click Save & Close.
4. Publish your site.

This keeps the widget on the pages where visitors are most likely to need it.

Code Embed elements support up to 50,000 characters of HTML, CSS, and JavaScript. They don't support server-side languages like PHP, Python, or Ruby. To store secrets or run backend logic, you'll need a separate backend.

3. Connect with Zapier or Make

Automation platforms connect Webflow events to Claude for background processing, the asynchronous work that happens after someone fills in a form or an item appears in a collection. Data flows one way, from your Webflow trigger through Claude to a downstream action.

Claude has no trigger modules on Zapier or Make. A Webflow event or another service starts the automation, and Claude responds inside that workflow.

Four patterns cover most of what teams build here:

• Form triage: A form submission triggers Claude to analyze, classify, or draft a reply to the submission before a human sees it.
• CMS enrichment: A new CMS item triggers Claude to write meta descriptions, summaries, or translations and write them back to the item.
• Content from external data: An outside data source triggers Claude to produce structured content, then creates a new live CMS item on your site.
• Downstream routing: Claude's output goes on to a CRM, a spreadsheet, or an email, so the result lands where the team already works.

These patterns suit background processing better than a live chat interface, and both platforms handle them.

Setting up a Webflow-to-Claude workflow on Zapier

Zapier has Claude actions for sending a message and moving files, and Webflow triggers for new form submissions, new and updated orders, and comment activity. Check the connection page for the current module list before you build.

To build a form-to-Claude workflow:

1. Create accounts on Zapier and Anthropic's API platform (you need an API key for Zapier).
2. Create a new Zap with the Webflow > New Form Submission trigger.
3. Add the action Anthropic (Claude) > Send Message and map your form fields into the prompt.
4. Add a final action to route Claude's output, such as sending a Gmail reply or creating an Airtable row.
5. Test and activate the Zap.

To write Claude's output back to your CMS, you need a paid plan with CMS access and a CMS write action on Zapier.

Setting up a Webflow-to-Claude workflow on Make

Make exposes Claude actions and searches alongside Webflow triggers, actions, and searches, so both sides of the flow have explicit modules.

To build a CMS enrichment workflow:

1. Create a new scenario on Make with the trigger Webflow > Watch Form Submissions or Watch Items.
2. Add a Claude > Create a Prompt module and configure it with a system prompt and mapped Webflow data.
3. Add a Webflow > Update an Item module to write Claude's response back to a CMS field.
4. Test the scenario and set it to run on a schedule or in real time.

Choose Make when you want a visual automation builder and explicit Webflow modules on both sides of the flow.

4. Build with the Webflow and Claude APIs

For full control over how Claude and your site interact, build custom integrations using both APIs directly. You'll handle the server-side development. You also need a serverless proxy (Cloudflare Workers, Netlify Functions, or Vercel Functions) to keep your Claude API key secure, since site hosting is static and can't store environment variables or run backend code.

You can use these APIs together:

• The Anthropic Messages API handles text generation, streaming chat, and batch content processing.
• The Webflow Data API v2 handles CMS collections, items, forms, and site publishing.
• Webflow webhooks fire on real-time events like form submissions, new CMS items, and site publishes.
• API v1 reached end of life on March 31, 2025, so use v2 endpoints only.

Together these cover the core patterns in custom Claude and Webflow builds, and the three below account for most of them.

Adding a streaming chatbot to your Webflow site

A real-time chatbot can call the Claude Messages API with "stream": true and display responses progressively as they arrive. The serverless proxy sits between your frontend and Claude's API.

To implement a streaming chatbot:

1. Create a serverless function on Cloudflare Workers, Netlify, or Vercel. Store your Anthropic API key as an environment variable.
2. In the function, call POST /v1/messages with "stream": true and forward the Server-Sent Events (SSE) stream to the client.
3. Add a Code Embed element with JavaScript that sends user messages to your proxy URL and renders streamed text as it arrives.
4. Publish your site and test on the live domain.

// Serverless proxy example (Cloudflare Worker / Netlify Function)
import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

export async function handler(req, res) {
 const { userMessage, conversationHistory } = await req.json();

 const stream = await client.messages.stream({
   model: "claude-sonnet-5",
   max_tokens: 1024,
   system: "You are a helpful assistant for [Company Name].",
   messages: [
     ...conversationHistory,
     { role: "user", content: userMessage }
   ],
 });

 res.setHeader("Content-Type", "text/event-stream");
 for await (const text of stream.text_stream) {
   res.write(`data: ${JSON.stringify({ text })}\n\n`);
 }
 res.end();
}



The Claude API is stateless. Your frontend has to maintain the conversation history and pass it in full with every request. When response latency matters for your chatbot, Cloudflare Workers (JavaScript) give you effectively zero cold starts thanks to their V8 isolate architecture.

Generating and publishing CMS content

A content generation pipeline calls Claude to produce structured content, then writes it directly to a CMS collection on your site and publishes it.

To implement CMS content generation:

1. Call POST /v1/messages with a prompt instructing Claude to return valid JSON that matches your CMS collection fields.
2. Parse the response and send it to POST /v2/collections/{collection_id}/items to create a draft CMS item.
3. Call POST /v2/collections/{collection_id}/items/publish with the new item's ID to publish it.

async function generateAndPublishPost(topic) {
 const response = await anthropic.messages.create({
   model: "claude-sonnet-5",
   max_tokens: 2048,
   messages: [{
     role: "user",
     content: `Write a blog post about "${topic}". Return ONLY valid JSON:
     { "title": string, "body": string (HTML), "slug": string, "metaDescription": string }`
   }]
 });
 const content = JSON.parse(response.content[0].text);

 const createRes = await fetch(
   `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items`,
   {
     method: "POST",
     headers: {
       "Authorization": `Bearer ${WEBFLOW_TOKEN}`,
       "Content-Type": "application/json"
     },
     body: JSON.stringify({
       fieldData: {
         name: content.title,
         slug: content.slug,
         "post-body": content.body,
         "meta-description": content.metaDescription
       }
     })
   }
 );
 const newItem = await createRes.json();

 await fetch(
   `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items/publish`,
   {
     method: "POST",
     headers: {
       "Authorization": `Bearer ${WEBFLOW_TOKEN}`,
       "Content-Type": "application/json"
     },
     body: JSON.stringify({ itemIds: [newItem.id] })
   }
 );
}



Field slugs in fieldData have to match your collection's configured field slugs exactly. Retrieve them first with GET /v2/collections/{collection_id}. Creating via the staged endpoint always produces a draft, so you must explicitly call the publish endpoint.

For bulk operations, the Claude Message Batches API (POST /v1/messages/batches) cuts cost by 50% compared to sequential calls.

Processing form submissions with Claude

A webhook-driven pipeline triggers Claude whenever someone submits a form on your site, then routes the processed result into your CMS or an external service.

To implement form processing:

1. Register a webhook via POST /v2/sites/{site_id}/webhooks with "triggerType": "form_submission" pointing to your serverless function URL.
2. In your function, verify the x-webflow-signature header (HMAC-SHA256) before processing.
3. Extract the form data from the webhook payload and pass it to POST /v1/messages for classification, summarization, or response drafting.
4. Write the result to a CMS collection, send it via email, or route it to a CRM.

const crypto = require('crypto');
function verifyWebflowSignature(secret, timestamp, body, providedSignature) {
 const message = `${timestamp}:${body}`;
 const expectedSignature = crypto
   .createHmac('sha256', secret)
   .update(message)
   .digest('hex');
 return crypto.timingSafeEqual(
   Buffer.from(expectedSignature),
   Buffer.from(providedSignature)
 );
}



Your webhook endpoint has to return a 200 response quickly. Offload slow Claude processing to a queue so you don't hit timeouts. For high-volume form processing, use Claude Haiku 4.5 (claude-haiku-4-5-20251001) to get the fastest response time and lowest cost per token.

What you can build with the Claude Webflow integration

Connecting Claude to your site lets you automate content production and add AI interactivity without rebuilding on a custom stack:

• Bulk CMS content at scale: Generate dozens or hundreds of CMS items from a single prompt session. A real estate agency used the MCP server to produce 50 coherent property listing pages in 30 minutes after Claude analyzed the structure of 10 existing entries. The same pattern works for product pages, team bios, and city-specific landing pages.
• SEO audits with direct fixes: Claude reads your pages and CMS items, identifies meta titles over 60 characters or missing keywords, proposes corrections, and applies them. One agency saved 4 to 6 hours auditing their own site and roughly half a day on an 80-plus-page client site with 200 CMS items.
• Traffic reporting on demand: Ask which pages gained or lost sessions this month, which engagement events fire most, and where visitors spend their time, then have Claude act on the answer in the same session.
• Visitor-facing support chatbots: Deploy a Claude-powered chatbot on your published site that answers questions from your content. An e-commerce company (Olimp Labs) reported a 70% reduction in support tickets forwarded to their team after adding a Claude chatbot through a third-party widget.

The fastest way to start is the Webflow connector in Claude: authorize your sites once, then design, edit, audit, and report in plain language. Add a visitor-facing chatbot or a custom API pipeline when you need real-time chat or multi-step processing on top of that.