Webflow's MCP server

A Node.js server implementing Model Context Protocol (MCP) for Webflow using the Webflow JavaScript SDK. Enable AI agents to interact with Webflow APIs. Learn more about Webflow's Data API in the developer documentation.

Необходимые условия

🚀 Удаленная установка

Начните с установки удаленного MCP-сервера Webflow. Удаленный сервер использует OAuth для аутентификации ваших сайтов Webflow, а сопутствующее приложение синхронизирует ваш живой холст с вашим AI-агентом.

Требования

Node.js 22.3.0 или выше

Примечание: MCP-сервер в настоящее время поддерживает Node.js 22.3.0 и выше. Если возникают проблемы с версией, смотрите руководство по совместимости Node.js. (Node.js compatibility guidance)

Cursor

Добавление MCP-сервера в Cursor

Перейдите в Settings → Cursor Settings → MCP & Integrations.
В разделе MCP Tools нажмите + New MCP Server.
Вставьте следующую конфигурацию в файл .cursor/mcp.json (или добавьте раздел webflow к существующей конфигурации):

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

Совет: можно создать файл проекта на уровне проекта mcp.json, чтобы избежать повторных запросов на авторизацию в нескольких окнах Cursor. Смотрите документацию Cursor по расположениям конфигурации

Сохраните и закройте файл. Cursor автоматически откроет страницу входа OAuth, на которой вы сможете разрешить использование сайтов Webflow с MCP-сервером.

Откройте Webflow Designer

Откройте ваш сайт в Webflow Designer или попросите вашего AI-агента:

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


#### Откройте MCP Webflow App

- В Designer откройте панель Apps (нажмите `E`).

- Запустите ваше опубликованное приложение "Webflow MCP Bridge App".

- Подождите, пока приложение подключится к MCP-серверу.

#### Напишите ваш первый запрос

Попробуйте следующие примеры в вашем AI-чате:

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design


### Claude Desktop

#### Добавление MCP-сервера в Claude Desktop

- Включите режим разработчика: `Помощь → Диагностика → Включить режим разработчика`.

- Откройте настройки разработчика: `Файл → Настройки → Разработчик`.

- Нажмите `Get Started` или редактируйте конфигурацию, чтобы открыть `claude_desktop_config.json` и добавьте:

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


- Сохраните и перезапустите Claude Desktop (`Cmd/Ctrl + R`). Откроется страница входа OAuth для авторизации сайтов.

#### Откройте Webflow Designer

- Откройте ваш сайт в Webflow Designer или попросите вашего AI-агента:

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

Откройте MCP Webflow App

В Designer откройте панель Apps (нажмите E).
Запустите ваше опубликованное приложение "Webflow MCP Bridge App".
Подождите, пока приложение подключится к MCP-серверу.

Напишите ваш первый запрос

Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords

Find older blog posts that mention similar topics and add internal links to my latest post

Create a hero section card on my home page with a CTA button and responsive design

Сброс OAuth-токена

Чтобы сбросить OAuth-токен, выполните следующую команду в терминале.

rm -rf ~/.mcp-auth

Совместимость с Node.js

См. руководство по совместимости Node.js в документации разработчика Webflow. (Node.js compatibility)

Локальная установка

Вы также можете настроить MCP-сервер на локальной машине. Это требует:

Создания и регистрации вашего собственного MCP Bridge App в рабочем пространстве Webflow с правами администратора
Настройки вашего AI-клиента на запуск локального MCP-сервера с токеном API Webflow

1. Создайте и опубликуйте MCP Bridge App

Перед подключением локального MCP-сервера к вашему AI-клиенту необходимо создать и опубликовать Webflow MCP Bridge App в вашем рабочем пространстве.

Шаги

Зарегистрируйте Webflow App

Перейдите в ваше рабочее пространство Webflow и зарегистрируйте новое приложение.

Следуйте официальному руководству: Register an App.

Получите код MCP Bridge App

Вариант A: Загрузите последний bundle.zip со страницы релизов: releases page.

Вариант B: Клонируйте репозиторий и соберите его:

git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app

Затем соберите проект, следуя инструкциям репозитория.

Опубликуйте Designer Extension

Перейдите в Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App.

Нажмите “Publish Extension Version”.
Загрузите собранный файл bundle.zip.

Откройте приложение в Designer

После публикации откройте MCP Bridge App из панели Designer → Apps в сайте внутри вашего workspace.

2. Настройте вашего AI-клиента

Cursor

Добавьте в .cursor/mcp.json:

" } } } }">``` { "mcpServers": { "webflow": { "command": "npx", "args": ["-y", "webflow-mcp-server@latest"], "env": { "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>" } } } }


#### Claude Desktop

Добавьте в `claude_desktop_config.json`:

"
      }
    }
  }
}">```
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server@latest"],
      "env": {
        "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
      }
    }
  }
}

3. Используйте MCP-сервер с Webflow Designer

Откройте ваш сайт в Webflow Designer.
Откройте панель Apps (нажмите E) и запустите опубликованное вами “Webflow MCP Bridge App”.
Подождите, пока приложение подключится к MCP-серверу, затем используйте инструменты вашего AI-клиента.
Если Bridge App запрашивает локальный URL соединения, вызовите инструмент get_designer_app_connection_info в вашем AI-клиенте и вставьте полученный URL http://localhost:<port>.

Необязательно: запуск локально через shell

" npx -y webflow-mcp-server@latest">``` WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest


"
npx -y webflow-mcp-server@latest">```
# PowerShell
$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
npx -y webflow-mcp-server@latest

Сброс OAuth-токена

Чтобы сбросить OAuth-токен, выполните следующую команду в терминале.

rm -rf ~/.mcp-auth

Совместимость с Node.js

См. руководство по совместимости Node.js в документации разработчика Webflow. (Node.js compatibility)

❓ Поддержка и устранение неполадок

Если у вас возникают проблемы с запуском сервера в вашем MCP-клиенте, например в Cursor или Claude Desktop, попробуйте следующее.

Убедитесь, что у вас есть действительный токен Webflow API

Перейдите в Webflow's API Playground, войдите и сгенерируйте токен, затем скопируйте токен из генератора запросов
Замените YOUR_WEBFLOW_TOKEN в конфигурации вашего MCP-клиента на скопированный токен
Сохраните и перезапустите ваш MCP-клиент

Убедитесь, что установлены Node и NPM

Node.js
NPM

Выполните следующие команды, чтобы проверить наличие Node и NPM:

node -v
npm -v

Очистка кэша NPM

Иногда очистка кэша NPM cache может решить проблемы с npx.

npm cache clean --force

Исправление разрешений глобальных пакетов NPM

Если npm -v не работает, но sudo npm -v работает, возможно, потребуется исправить разрешения глобальных пакетов NPM. Обратитесь к официальной документации NPM для получения дополнительной информации.

Примечание: если вы вносите изменения в конфигурацию вашего shell, возможно, потребуется перезапустить ваш shell, чтобы изменения вступили в силу.

🛠️ Доступные инструменты

Смотрите директорию ./tools для списка доступных инструментов

🗣️ Промпты и ресурсы

Эта реализация не включает prompts или resources из спецификации MCP. Однако в будущем это может измениться при более широкой поддержке среди популярных MCP-клиентов.

📄 Ресурсы разработчика Webflow

⚠️ Известные ограничения

Обновления содержимого статических страниц

Эндпойнт pages_update_static_content в настоящее время поддерживает обновления только локализованных статических страниц во вторичных локалях. Обновления статического контента в языке по умолчанию не поддерживаются и приведут к ошибкам.