> This page is for MCP Server.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Claude Code

> Install and configure Webflow's MCP server in Claude Code so your AI coding agent can build, manage, and update your Webflow sites from the terminal.

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

#### Install Claude Code CLI

If you haven't installed Claude Code yet, follow the [installation guide](https://github.com/anthropics/claude-code#installation).

Verify the installation:

```bash
claude --version
```

#### Add the Webflow MCP server

Use the CLI to add the Webflow MCP server:

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

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

#### Authorize the MCP server and app

Start Claude Code:

```bash
claude
```

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

```bash
/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](/mcp/reference/how-it-works#webflow-mcp-bridge-app).

#### 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:

   ```bash
   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:

   ![The project-specific MCP server connection in VSCode, needing authentication](/_fern-img/825ab906379ecbfe7aded859ba26eeeeb42c783e8dcd33423df7a32172dc32e5.webp)

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

   ![The project-specific MCP server connection in a terminal window, needing authentication](/_fern-img/2b696502b0b31a628f23ee363225f47318cc60e309f9cd3d95aebd5c3871d480.webp)

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](/mcp/examples)

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

#### [Use skills](/mcp/reference/skills)

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

#### [Learn how it works](/mcp/reference/how-it-works)

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