Webflow MCP + Claude Code: The Integration That Changes Web Development

The Webflow MCP Server is an official integration that exposes Webflow's Designer and Data APIs as tools that Claude can use. Instead of writing API calls manually or navigating the Webflow UI, you describe what you want in natural language and Claude handles the implementation.

What It Enables

Architecture Overview

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  Claude Code    │◄────►│   MCP Server    │◄────►│  Webflow APIs   │
│  (MCP Client)   │     │  (Bridge)       │     │  (Designer/Data)│
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
        │                       │                       │
        └───────────────────────┴───────────────────────┘
                         │
                ┌────────┴─────────┐
                │  Companion App   │
                │  (In Designer)   │
                └──────────────────┘

The companion app runs inside the Webflow Designer and maintains a live connection between Claude and your canvas for real-time synchronization.

Model Context Protocol (MCP) is a standard for connecting AI tools to external services. Understanding the basics helps you use it effectively.

Tool Definition Loading

When you connect an MCP server, its tool definitions are loaded into Claude's context. Each tool has:

• Name: Identifier Claude uses to call it
• Description: What the tool does (helps Claude decide when to use it)
• Parameters: Required and optional inputs
• Returns: What data comes back

Token Implications

MCP tools consume context tokens just by being available:

Context Budget:
├─ System Prompt: ~50 instructions
├─ 
CLAUDE.md
: Variable
├─ MCP Tools: 8-30% (depending on tool count)
└─ Conversation: Remaining

The Webflow MCP server adds multiple tools, each consuming tokens. If you're also using other MCP servers, monitor your context usage with /context.

Real-Time Sync Requirement

Unlike pure API integrations, Webflow's MCP server requires the Designer companion app to be open. This is because:

1. Designer API operations need a live canvas connection
2. Changes sync visually in real-time
3. Undo/redo history integrates with your session

Before installation:

Required

• Node.js 22.3.0 or higher
• Claude Code or Claude Desktop
• Webflow account with site access
• Admin permissions on target workspace

Check Node Version

node --version
# Must be v22.3.0 or higher

# If needed, update via nvm:
nvm install 22
nvm use 22

Webflow offers both a remote (hosted) and local installation option. The remote option is simpler for most users.

Option 1: Remote MCP Server (Recommended)

For Claude Code

claude mcp add webflow --url 
https://mcp.webflow.com/sse

Or manually edit your MCP configuration:

{
  "mcpServers": {
    "webflow": {
      "url": "
https://mcp.webflow.com/sse
"
    }
  }
}

For Claude Desktop

1. Open Claude Desktop settings
2. Navigate to Developer settings
3. Edit claude_desktop_config.json:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "
https://mcp.webflow.com/sse
"]
    }
  }
}

1. Save and restart Claude Desktop

OAuth Authorization

On first connection, an OAuth login page opens:

1. Sign in to your Webflow account
2. Select which sites to authorize
3. Confirm permissions
4. The companion app installs automatically

Security tip: Only authorize the specific sites you need. This limits potential impact if credentials are compromised.

Option 2: Local MCP Server

For more control or air-gapped environments:

Step 1: Create MCP Bridge App

1. Go to Webflow Dashboard → Workspace settings
2. Navigate to Apps & Integrations → Develop
3. Register a new app with Admin permissions
4. Note your API token

Step 2: Configure Local Server

# Clone the official server
git clone 
https://github.com/webflow/mcp-server.git

cd mcp-server

# Install dependencies
npm install

# Build
npm run build

Step 3: Add to Claude Code

{
  "mcpServers": {
    "webflow": {
      "command": "node",
      "args": ["/path/to/mcp-server/build/index.js"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-api-token"
      }
    }
  }
}

Launching the Companion App

After installation:

1. Open your site in the Webflow Designer
2. Press E to open the Apps panel
3. Launch "Webflow MCP Bridge App"
4. Wait for connection confirmation
5. Start prompting Claude

The MCP server exposes two categories of tools:

Designer API Tools

For visual manipulation:

Data API Tools

For CMS and site management:

Workflow 1: Building a New Section

Prompt: "Create a features section with 3 cards. Each card should have 
an icon placeholder, heading, and description. Use a grid layout that 
stacks on mobile."

Claude will:
1. Create a section element
2. Add a container with CSS Grid
3. Create 3 card components
4. Apply responsive breakpoints
5. Set up the visual hierarchy

Workflow 2: CMS Content Migration

Prompt: "I have a JSON file with 50 blog posts. Create them as CMS items 
in my Blog Posts collection. Each has: title, slug, content, author, 
and publishDate."

Claude will:
1. Parse the JSON structure
2. Map fields to your collection schema
3. Create items in batches
4. Report success/failures

Workflow 3: Style System Audit

Prompt: "Audit all heading styles on this site. List any inconsistencies 
in font sizes, weights, or colors. Suggest a unified type scale."

Claude will:
1. Query all text elements
2. Extract typography properties
3. Identify variations
4. Propose a consistent system

Workflow 4: SEO Optimization

Prompt: "Check all images on the homepage for missing alt text. 
Generate appropriate alt descriptions based on the image context 
and surrounding content."

Claude will:
1. Find all image elements
2. Check alt attribute status
3. Analyze image context
4. Suggest/apply alt text

Layout & Structure

"Create a hero section with:
- Full-width background image
- Centered content container (max-width 1200px)
- H1 headline with H2 subheading
- Two CTA buttons (primary and secondary)
- Responsive padding (80px desktop, 40px mobile)"

"Build a footer with 4 columns:
- Column 1: Logo and tagline
- Column 2-4: Navigation link groups
- Bottom bar with copyright and social links
- Stack to single column on mobile"

CMS Operations

"Show me the schema for the 'Team Members' collection. 
Then create 5 placeholder entries with realistic names, 
titles, and bio text."

"Update all blog posts from 2024 to add a 'legacy' tag 
to their categories field."

Styling

"Create a design token system with CSS variables for:
- Primary, secondary, and accent colors
- 5 shades of neutral gray
- Type scale (xs through 4xl)
- Spacing scale (4px base, 8 steps)"

"Refactor all button styles to use a single base class 
with modifier classes for variants (primary, secondary, outline)."

Custom Code

"Add FAQPage schema markup to the FAQ section on the 
About page. Include all Q&A pairs currently on the page."

"Inject a Google Analytics 4 tracking script in the 
site-wide head code. Use this measurement ID: G-XXXXXXXX"

Connection Issues

Problem: MCP server won't connect

# Check Node version
node --version  # Must be 22.3.0+

# Verify MCP configuration
claude mcp list

# Test connection manually
curl 
https://mcp.webflow.com/health

Problem: OAuth keeps failing

1. Clear browser cookies for webflow.com
2. Try incognito/private window
3. Ensure pop-ups aren't blocked
4. Check if workspace permissions allow OAuth apps

Companion App Issues

Problem: Companion app doesn't appear in Apps panel

The app installs during OAuth. If missing:

1. Go to Workspace settings → Apps & Integrations
2. Check if "Webflow MCP Bridge" is listed
3. If not, re-run OAuth authorization

Problem: "Waiting for connection" doesn't resolve

1. Refresh the Designer (Cmd/Ctrl + R)
2. Close and reopen the companion app
3. Check browser console for errors
4. Verify OAuth token hasn't expired

API Errors

Problem: "Rate limit exceeded"

Webflow APIs have rate limits. For bulk operations:

"Create these 100 CMS items in batches of 10 with 
a 2-second delay between batches."

Problem: "Permission denied"

1. Verify your API token has required scopes
2. Check if the site is in the authorized list
3. Ensure you have Editor or Admin role on the site

Current Limitations

What MCP Can't Do (Yet)

• Create new pages or page structures
• Modify site-wide settings (favicon, SEO defaults)
• Access Logic workflows
• Modify e-commerce products directly
• Handle Memberships configuration

For these, use the Webflow UI alongside MCP for what it does well.

Official Documentation

• Webflow MCP Server Overview
• MCP Getting Started Guide
• Webflow Designer API
• Webflow Data API

GitHub Repositories

• webflow/mcp-server - Official MCP server
• Model Context Protocol Specification

Integration Guides

• Webflow + Claude Integration
• MCP Server Prompts Library