MCP Server

Getting started

The Webflow MCP server connects your AI agent directly to your Webflow projects. In this guide, you’ll install the remote MCP server, authorize your sites, and start building with natural language prompts.

Setup overview

The installation process takes about 5 minutes and includes:

  1. Configure your AI tool - Add the Webflow connector to Claude Desktop or add the MCP server to Claude Code, Cursor, or Windsurf
  2. Authorize sites - Connect the MCP server to your Webflow account via OAuth
  3. Launch companion app - Open the bridge app in the Webflow Designer for real-time syncing
  4. Start prompting - Use natural language to interact with your sites

What you’ll need

Estimated time: 5 minutes

Companion app installation

The MCP companion app installs automatically during OAuth authorization. It’s not available on the public Webflow app marketplace.

For local installation options, see the NPM package documentation.

Installation

Select your AI tool below to begin:

Webflow provides a connector that you can use in Claude Desktop. It provides direct access to the MCP server.

1

Open the list of connectors

In the Claude chat window, click the + symbol and then click Add connectors.

Add connector option in the drop-down list
2

Find the Webflow connector

Search for the Webflow connector by name. You may need to select All instead of Featured to see it.

3

Select the Webflow connector

Click the Webflow connector and then click Connect to install it.

4

Grant access

Grant Claude access to your Webflow account and log in to your Webflow account if you are prompted to do so.

5

Select sites or Workspaces

Select the Webflow sites and Workspaces to give Claude access to and then click Authorize App.

Add connector option in the drop-down list
6

Write your first prompt

Start interacting with the MCP server in your AI agent’s chat window. Try prompts like:

List all my collections and show me their field structures
Audit my site for broken links, missing alt text, and incomplete meta descriptions
Create a responsive hero section with a headline, description, and CTA button

Next steps

Now that you’ve installed the MCP server, explore what you can do:

Explore the prompt library

Browse ready-to-use prompts for image optimization, SEO audits, style refactoring, and more.

Review available tools

See the complete list of Data API and Designer API tools you can use with your AI agent.

Learn how it works

Understand the architecture, authentication, and how the MCP server connects to Webflow’s APIs.