Anthropic Claude

Generate CMS content, run SEO audits, qualify leads, and power visitor chat — all by connecting your Webflow site to Anthropic Claude. Through an official MCP connector, third-party chat widgets, automation workflows, and direct API calls, Claude plugs into your site at whatever level you need.

This integration fits agency teams managing dozens of client sites, marketing managers who need copy variants fast, e-commerce operators generating product descriptions at scale, and developers building custom AI features on Webflow-hosted pages.

How to integrate Anthropic Claude with Webflow

What is Anthropic Claude? Anthropic Claude is an AI assistant and large language model platform developed by Anthropic. If you build on Webflow, you have two main access modes: Claude.ai for the consumer and team chat interface, and the Claude API at platform.claude.com for building applications.

Claude handles text generation, code writing, image analysis, multilingual input and output, and multi-turn conversations. You can choose from multiple model variants for different tasks, including high-volume chat with Haiku and long-form content generation with Opus. Developers access Claude through a pay-per-token API, while Claude.ai offers chat-based access with separate subscription plans.

Connect Claude and your Webflow site when you need to scale content production, automate repetitive CMS tasks, or add interactive AI features to published pages. A real estate agency might generate 50 property listing pages in 30 minutes. A SaaS marketing team might process every inbound form submission through Claude for lead qualification. An e-commerce store might deploy a support chatbot trained on product documentation.

You have four main ways to connect Anthropic Claude and Webflow:

• The Webflow connector in Claude handles site management, CMS operations, and SEO audits through natural language prompts without writing code.
• Third-party chatbot widgets via Code Embed elements let you add visitor-facing AI chat to your published pages.
• Zapier and Make connect Webflow form submissions and CMS events to Claude for background content generation and data processing.
• The Webflow Data API v2 and Anthropic Claude APIs give you full control over CMS content creation, form processing, and real-time chat, but you'll need to handle server-side development.

Most implementations combine two or more of these methods depending on how complex your setup is.

Use the Webflow connector in Claude

The Webflow connector in Claude is an official integration launched in partnership with Anthropic in February 2026. It connects Claude Desktop directly to your Webflow site through the Webflow MCP Server, which implements Anthropic's Model Context Protocol specification. Designers and developers use it for site management tasks. Use it to manage your own site through Claude Desktop. You need a Webflow account with at least one accessible site, and the MCP Bridge App installs automatically during OAuth authorization (it is not available in the public Webflow Apps Marketplace).

To set up the connector:

1. Download the Claude Desktop app and open it.
2. Go to Settings > Connectors, browse for Webflow, click +, and configure your permissions.
3. Restart Claude Desktop. An OAuth browser window opens where you log in to Webflow and authorize specific sites.
4. Open your site in the Designer, press E, and launch the MCP Bridge App.
5. Enter a natural-language prompt such as "Update all blog post meta descriptions to be under 160 characters."

The connector supports these operations:

• Manage bulk CMS updates across multiple Collection List
• Run SEO, content, and usability audits and apply recommendations directly
• Keep design system consistency across names, variables, and classes
• Create elements, styles, and variables on the canvas
• Manage collections, custom code, assets, and other site data

The connector also works with Claude Code, Cursor, Postman, and Windsurf. Because it operates through the Designer and Data APIs, any changes Claude makes follow the same publishing rules as your manual edits. You still need to publish your site for changes to go live.

Add a Claude-powered chatbot with Code Embed elements

To add a visitor-facing Claude chatbot to your pages, use a third-party chatbot platform that connects to the Claude API on its backend and generates an embed script for your site. Your Anthropic API key stays on the chatbot vendor's servers and never appears in your site code. You need a paid site plan that supports custom code in head and body tags.

Three platforms have documented Webflow integration with Claude as a selectable AI backend:

• Voiceflow has Claude Sonnet 4.5 and Claude Opus 4.1 as selectable models and a visual conversation flow builder
• Social Intents has Claude with a bring-your-own-key setup and the most detailed Webflow-specific documentation
• Botpress has a webchat widget you can embed via a single script tag

These platforms keep the Claude connection outside your site and give you an embed you can publish.

Embed 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 AI backend.
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 the Designer preview. Test your chatbot on your live domain after publishing.

Embed a chatbot on a specific page

Page-specific placement lets you add the chatbot only where it's needed, such as a pricing page or 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 approach keeps the widget limited to 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. Use page-specific embeds for widgets and published-page code. To store secrets or run backend logic, you'll need a separate backend.

Connect with Zapier or Make

Automation platforms let you connect Webflow events to Claude for background processing. These workflows handle async tasks like form-triggered content generation, lead classification, and CMS population. Data flows one way from your Webflow trigger through Claude and into a downstream action.

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

Common Webflow triggers and Claude actions you can combine:

• A form submission triggers Claude to analyze, classify, or draft a response to the submission
• A new CMS item triggers Claude to generate enriched content (meta descriptions, summaries, translations) and write it back to the item
• An external data source triggers Claude to generate structured content, then creates a new live CMS item in your site

These patterns fit background processing better than a live chat interface.

Set up a Webflow-to-Claude workflow on Zapier

Zapier has Claude actions including Send Message, Upload File, and Download File. Webflow triggers on Zapier include New Form Submission (Instant), New Order (Instant), Updated Order (Instant), New Comment (Instant), and New Resolved Comment Thread.

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 trigger Webflow > New Form Submission.
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 (such as Create Live Item or Create Item) on Zapier.

Set up a Webflow-to-Claude workflow on Make

Make has 16 Claude modules (13 actions, 3 searches) and 40 Webflow modules (2 triggers, 26 actions, 12 searches). The dedicated Webflow and Claude connection page lists available 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.

Build with the Webflow and Anthropic 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.

Use these APIs together:

• Anthropic Messages API handles text generation, streaming chat, and batch content processing
• Webflow Data API v2 handles CMS collections, items, forms, and site publishing
• Webflow webhooks trigger real-time events like form submissions, new CMS items, and site publishes

Together, these APIs cover the core patterns in custom Claude-Webflow builds.

API v1 reached end of life on March 31, 2025. Use v2 endpoints only.

Add 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-4-6",
    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 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.

Generate and publish 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 that instructs Claude to return valid JSON matching 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-4-6",
    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 exactly match your collection's configured field slugs. 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) gives you a 50% cost reduction compared to sequential calls.

Process form submissions with Claude

A webhook-driven pipeline triggers Claude whenever someone submits a form on your site, then routes the AI-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 can you build with the Anthropic Claude Webflow integration?

Integrating Anthropic Claude with your site lets you automate content production and add AI-powered 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 connector 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.
• Automated SEO audits with direct fixes: Claude reads your CMS pages through the MCP connector, 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.
• Visitor-facing support chatbots: Deploy a Claude-powered chatbot on your published site that answers questions based on your content. An e-commerce company (Olimp Labs) reported a 70% reduction in support tickets forwarded to their team after adding a Claude chatbot via a third-party widget on their site.
• Form-triggered content generation: Process form submissions through Claude using Zapier or Make, then route the output to your CMS, email, or CRM. A contact form submission can trigger Claude to classify the lead, draft a personalized response, and create a CMS item for your sales team to review.

If you need more control over real-time personalization or complex multi-step processing, the API integration path gives you that control.