Webflow MCP Server

официальный

Взаимодействуйте с API Webflow для просмотра и редактирования данных вашего сайта и CMS.

Документация

MCP-сервер Webflow

Сервер на Node.js, реализующий протокол Model Context Protocol (MCP) для Webflow с использованием Webflow JavaScript SDK. Позволяет AI-агентам взаимодействовать с API Webflow. Узнайте больше о Data API Webflow в документации для разработчиков.

Предварительные требования

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

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

Требования

Node.js версии 22.3.0 или выше

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

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-агента:

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

Открытие приложения MCP Webflow

В 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

Включите режим разработчика: Help → Troubleshooting → Enable Developer Mode.
Откройте настройки разработчика: File → Settings → Developer.
Нажмите 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-агента:

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

Открытие приложения MCP Webflow

В 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.

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

Вы также можете настроить MCP-сервер для локального запуска. Для этого требуется:

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

1. Создание и публикация приложения MCP Bridge App

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

Шаги

Зарегистрируйте приложение Webflow
- Перейдите в рабочую область Webflow и зарегистрируйте новое приложение.
- Следуйте официальному руководству: Регистрация приложения.
Получите код приложения MCP Bridge App
- Вариант A: Загрузите последнюю версию bundle.zip со страницы релизов.
- Вариант B: Клонируйте репозиторий и соберите его:
```
git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
```
  - Затем соберите проект, следуя инструкциям в репозитории.
Опубликуйте расширение Designer
- Перейдите в Webflow Dashboard → Workspace settings → Apps & Integrations → Develop → Your App.
- Нажмите «Publish Extension Version».
- Загрузите собранный файл bundle.zip.
Откройте приложение в Designer
- После публикации откройте MCP Bridge App из панели Designer → Apps на сайте в вашей рабочей области.

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

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" 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.

❓ Устранение неполадок

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

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

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

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

Node.js
NPM

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

node -v
npm -v

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

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

npm cache clean --force

Исправьте права доступа для глобальных пакетов NPM

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

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

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

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

🗣️ Запросы и ресурсы

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

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

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

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

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