Webflow의 공식 MCP 서버

Name: Webflow
Author: webflow

Webflow JavaScript SDK를 사용하여 Webflow용 모델 컨텍스트 프로토콜(MCP)을 구현하는 Node.js 서버입니다. AI 에이전트가 Webflow API와 상호 작용할 수 있도록 지원합니다. 개발자 문서 에서 Webflow의 데이터 API에 대해 자세히 알아보세요.

npm 쉴드 고사리 방패

ℹ 필수 조건

Related MCP server: Webflow MCP Server

▶️ 빠른 시작(Cloudflare Workers에서 호스팅)

커서의 경우:

Settings → Cursor Settings → MCP 로 이동하세요.
+ Add New Global MCP Server 클릭하세요
다음 구성을 붙여넣으세요(또는 기존 구성에 webflow 부분을 추가하세요)

지엑스피1

저장, 커서는 자동으로 새 브라우저 창을 열어 MCP 서버에서 액세스할 수 있는 Webflow 사이트를 인증하는 OAuth 로그인 페이지를 표시합니다.

Claude Desktop의 경우:

Settings → Developer 엽니다.
Edit Config 클릭하세요
코드 편집기에서 claude_desktop_config.json 열고 다음 구성을 붙여넣습니다(또는 기존 구성에 webflow 부분을 추가합니다).

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

파일을 저장하고 Claude Desktop을 다시 시작합니다(command/ctrl + R). Claude가 다시 시작되면 새 브라우저 창이 자동으로 열리고 MCP 서버가 액세스할 Webflow 사이트를 인증하는 OAuth 로그인 페이지가 표시됩니다.

윈드서핑의 경우:

Windsurf - Settings → Advanced Settings 으로 이동합니다.
Cascade 섹션으로 스크롤 → Add Server → Add custom server +
다음 구성을 붙여넣으세요(또는 기존 구성에 webflow 부분을 추가하세요)

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

Save 클릭하면 Windsurf에서 자동으로 새 브라우저 창이 열리고 MCP 서버에서 액세스할 수 있는 Webflow 사이트를 인증하는 OAuth 로그인 페이지가 표시됩니다.

중요 참고 사항

이 모든 방법은 2025년 4월 30일 기준으로 아직 실험 단계로 간주되는 mcp-remote npm 패키지를 사용합니다. 문제가 발생하여 OAuth 토큰을 재설정하려면 MCP 클라이언트를 다시 시작하기 전에 다음 명령을 실행하세요.

rm -rf ~/.mcp-auth

▶️ 빠른 시작(로컬 설치)

Webflow API 토큰을 받으세요

Webflow의 API Playground 로 이동
로그인하고 토큰을 생성하세요
요청 생성기에서 토큰을 복사합니다.

AI 편집기에 추가

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

커서의 경우:

설정 → 커서 설정 → MCP로 이동하세요.
+ Add New Global MCP Server 클릭하세요
구성 붙여넣기
YOUR_WEBFLOW_TOKEN 이전에 복사한 토큰으로 바꾸세요.
커서를 저장하고 다시 시작하세요

Claude Desktop의 경우:

설정 → 개발자를 엽니다.
Edit Config 클릭하세요
코드 편집기에서 claude_desktop_config.json 열고 구성을 붙여넣습니다.
YOUR_WEBFLOW_TOKEN 이전에 복사한 토큰으로 바꾸세요. 5. 저장하고 Claude를 다시 시작하세요.

❓ 문제 해결

MCP 클라이언트(예: Cursor 또는 Claude Desktop)에서 서버를 시작하는 데 문제가 있는 경우 다음을 시도해 보세요.

유효한 Webflow API 토큰이 있는지 확인하세요.

Webflow의 API Playground 로 이동하여 로그인하고 토큰을 생성한 다음 요청 생성기에서 토큰을 복사합니다.
MCP 클라이언트 구성에서 YOUR_WEBFLOW_TOKEN 복사한 토큰으로 바꾸세요.
MCP 클라이언트를 저장하고 다시 시작하세요.

Node와 NPM이 설치되어 있는지 확인하세요.

다음 명령을 실행하여 Node와 NPM이 설치되었는지 확인하세요.

node -v
npm -v

NPM 캐시를 지우세요

때로는 NPM 캐시를 지우면 npx 문제가 해결될 수 있습니다.

npm cache clean --force

NPM 글로벌 패키지 권한 수정

npm -v 명령어가 작동하지 않지만 sudo npm -v 작동한다면 NPM의 전역 패키지 권한을 수정해야 할 수 있습니다. 자세한 내용은 공식 NPM 문서를 참조하세요.

참고: 셸 구성을 변경하는 경우 변경 사항을 적용하려면 셸을 다시 시작해야 할 수 있습니다.

🛠️ 사용 가능한 도구

사이트

sites - list; // List all sites
sites - get; // Get site details
sites - publish; // Publish site changes

페이지

pages - list; // List all pages
pages - get - metadata; // Get page metadata
pages - update - page - settings; // Update page settings
pages - get - content; // Get page content
pages - update - static - content; // Update page content

구성 요소

components - list // List all components in a site
components - get - content // Get component content (text, images, nested components)
components - update - content // Update component content for localization
components - get - properties // Get component properties (default values)
components - update - properties // Update component properties for localization

CMS

collections - list; // List collections
collections - get; // Get collection details
collections - create; // Create a collection
collection - fields - create - static; // Create a static field
collection - fields - create - option; // Create an option field
collection - fields - create - reference; // Create a reference field
collection - fields - update; // Update a custom field
collections - items - create - item - live; // Create items
collections - items - update - items - live; // Update items
collections - items - list - items; // List collection items
collections - items - create - item; // Create collection items (staged)
collections - items - update - items; // Update collection items (staged)
collections - items - publish - items; // Publish collection items

사용자 정의 코드

custom code - add - inline - site - script // Register an inline script for a site
custom code - get - registered - site - script - list // List all scripts registered to a site
custom code - get - applied - site - script - list //Get all scripts applied to a site
custom code - delete site custom code // Remove scripts from a site

🗣️ 프롬프트 및 리소스

이 구현에는 MCP 사양의 prompts 나 resources 포함되어 있지 않습니다 . 하지만 향후 널리 사용되는 MCP 클라이언트에서 더 광범위한 지원이 제공되면 이 부분이 변경될 수 있습니다.

🚧 개발 모드

개발 모드에서 서버를 실행하려면 다음 명령을 사용하여 종속성을 설치하고 서버를 실행할 수 있습니다.

복제하고 설치하세요:

git clone git@github.com:webflow/mcp-server.git
cd mcp-server
npm install

프로젝트 루트에 있는 .env 파일에 토큰을 추가합니다.

# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>

개발 서버 시작:

npm start

📄 Webflow 개발자 리소스

⚠️ 알려진 제한 사항

정적 페이지 콘텐츠 업데이트

pages_update_static_content 엔드포인트는 현재 보조 로캘의 지역화된 정적 페이지에 대한 업데이트만 지원합니다. 기본 로캘의 정적 콘텐츠에 대한 업데이트는 지원되지 않으며 오류가 발생합니다.

Webflow