Claude Code

To connect Claude Code to the Webflow MCP server, follow these steps.

1

Install Claude Code CLI

If you haven’t installed Claude Code yet, follow the installation guide.

Verify the installation:

$
claude --version

2

Add the Webflow MCP server

Use the CLI to add the Webflow MCP server:

$
claude mcp add --transport http webflow https://mcp.webflow.com/mcp

This command adds the Webflow MCP server to your Claude Code configuration.

3

Authorize the MCP server and app

Start Claude Code:

$
claude

When Claude Code is running, use the /mcp command to manage MCP servers:

$
/mcp list

Select the Webflow MCP server from the list. If you haven’t authenticated yet, Claude Code automatically opens a browser window that shows an OAuth login page where you can authorize the Webflow sites you want the MCP server to access and install the MCP Bridge App.

4

Open the Webflow Designer

Open your site in the Webflow Designer.

Or, type this prompt in Claude Code:

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

5

Open the Webflow MCP Bridge App

1. In the designer, open the Apps panel by pressing the E key.
2. Launch the “Webflow MCP Bridge App”. This app was automatically installed during the OAuth authorization process.
3. Wait for the App to connect to the MCP Server.

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

Managing multiple Claude Code connections

You can set up separate projects in Claude Code to manage authentication and settings for different sites. For example, if you are working on multiple Webflow sites, you can create a separate project for each, which keeps the authentication for each project separate and can help you track your token usage for each site.

Follow these general steps to set up projects in Claude Code and give them access to specific Webflow sites or Workspaces:

1. Create a folder on your computer for the Claude Code project. This project doesn’t need to have any site-related code in it; instead, it holds the Claude Code configuration for the project.

2. In the project folder, open Claude Code and run this command to connect to the Webflow MCP server in a configuration file that is limited to this folder:

   $
   claude mcp add --transport http $PROJECT_NAME https://mcp.webflow.com/mcp -s project

   Replace the variable $PROJECT_NAME with a name for the project, such as webflow-1 or my-webflow-site.

   The -s project argument tells Claude Code to add this MCP server to a configuration file that is scoped to this folder, instead of adding the server to the global Claude Code configuration.

3. Reload Claude Code:

   • If you are using Claude Code in a terminal window, exit and reopen Claude Code.

   • If you are using Claude Code in an IDE, reload the IDE window. For example, if you are using VSCode, press Ctrl+Shift+P and run the command Developer: Reload Window.

   Claude Code does not have access to the updated local configuration until you reload Claude Code.

4. In a Claude Code window, run the command /mcp to list the MCP servers.

5. Select the Webflow MCP server and authenticate to it as usual, including selecting the Webflow sites or Workspaces to give the Claude Code project access to.

   Be sure to select the MCP server in the project and not one of the default servers in the claude.ai domain.

   For example, this screenshot shows the project-specific MCP server configuration in VSCode:

   

   Similarly, this screenshot shows the project-specific MCP server configuration in Claude Code in a terminal window:

   

6. Verify that the instance of Claude Code has access to only the scope that you authenticated it to, such as by asking it to list the sites it has access to or the CMS collections in that site.

Now you can create multiple project folders, each with different access permissions to Webflow sites and Workspaces.

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.

Use skills

Install skills that help you accomplish common Webflow tasks through natural language.

Learn how it works

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