Webflow MCP Server

공식

Webflow API와 상호작용하여 사이트 및 CMS 데이터를 나열하고 편집합니다.

GitHub
132

문서

Webflow의 MCP 서버

Webflow JavaScript SDK를 사용하여 Webflow를 위한 모델 컨텍스트 프로토콜(MCP)을 구현하는 Node.js 서버입니다. AI 에이전트가 Webflow API와 상호 작용할 수 있도록 합니다. Webflow의 Data API에 대한 자세한 내용은 개발자 문서에서 확인하세요.

npm shield Webflow

사전 준비 사항

🚀 원격 설치

Webflow의 원격 MCP 서버를 설치하여 시작하세요. 원격 서버는 OAuth를 사용하여 Webflow 사이트를 인증하고, 라이브 캔버스를 AI 에이전트와 동기화하는 동반 앱을 사용합니다.

요구 사항

  • Node.js 22.3.0 이상

참고: MCP 서버는 현재 Node.js 22.3.0 이상을 지원합니다. 버전 문제가 발생하면 Node.js 호환성 가이드를 참조하세요.

Cursor

Cursor에 MCP 서버 추가

  1. Settings → Cursor Settings → MCP & Integrations로 이동합니다.
  2. MCP 도구에서 + New MCP Server을 클릭합니다.
  3. 다음 구성을 .cursor/mcp.json에 붙여넣습니다(또는 기존 구성에 webflow 부분을 추가합니다):
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

팁: 여러 Cursor 창에서 반복되는 인증 프롬프트를 피하려면 프로젝트 수준의 mcp.json을 생성할 수 있습니다. 구성 위치에 대한 Cursor 문서를 참조하세요.

  1. 파일을 저장하고 닫습니다. Cursor가 자동으로 OAuth 로그인 페이지를 열어 MCP 서버와 함께 사용할 Webflow 사이트를 승인할 수 있습니다.

Webflow Designer 열기

  • Webflow Designer에서 사이트를 열거나 AI 에이전트에게 요청하세요:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

MCP Webflow 앱 열기

  1. Designer에서 앱 패널을 엽니다(E 누르기).
  2. 게시된 "Webflow MCP Bridge App"을 실행합니다.
  3. 앱이 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 데스크톱

Claude 데스크톱에 MCP 서버 추가

  1. 개발자 모드 활성화: Help → Troubleshooting → Enable Developer Mode.
  2. 개발자 설정 열기: File → Settings → Developer.
  3. Get Started을 클릭하거나 구성을 편집하여 claude_desktop_config.json을 열고 다음을 추가합니다:
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. 저장하고 Claude 데스크톱을 다시 시작합니다(Cmd/Ctrl + R). 사이트를 승인하기 위한 OAuth 로그인 페이지가 열립니다.

Webflow Designer 열기

  • Webflow Designer에서 사이트를 열거나 AI 에이전트에게 요청하세요:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

MCP Webflow 앱 열기

  1. Designer에서 앱 패널을 엽니다(E 누르기).
  2. 게시된 "Webflow MCP Bridge App"을 실행합니다.
  3. 앱이 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 호환성

Webflow 개발자 문서의 Node.js 호환성 가이드를 참조하세요.

로컬 설치

MCP 서버를 로컬에서 실행하도록 구성할 수도 있습니다. 이를 위해서는 다음이 필요합니다:

  • 관리자 권한이 있는 Webflow 워크스페이스에서 자체 MCP Bridge App 생성 및 등록
  • Webflow API 토큰으로 로컬 MCP 서버를 시작하도록 AI 클라이언트 구성

1. MCP 브리지 앱 생성 및 게시

로컬 MCP 서버를 AI 클라이언트에 연결하기 전에 워크스페이스에서 Webflow MCP Bridge App을 생성하고 게시해야 합니다.

단계

  1. Webflow 앱 등록

    • Webflow 워크스페이스로 이동하여 새 앱을 등록합니다.
    • 공식 가이드를 따르세요: 앱 등록.

  2. MCP Bridge App 코드 가져오기

    • 옵션 A: 릴리스 페이지에서 최신 bundle.zip을 다운로드합니다.
    • 옵션 B: 리포지토리를 복제하고 빌드합니다: 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • 그런 다음 리포지토리 지침에 따라 프로젝트를 빌드합니다.

  3. Designer 확장 게시

    • Webflow 대시보드 → 워크스페이스 설정 → 앱 및 통합 → 개발 → 내 앱으로 이동합니다.
    • **“확장 버전 게시”**를 클릭합니다.
    • 빌드된 bundle.zip 파일을 업로드합니다.

  4. Designer에서 앱 열기

    • 게시되면 워크스페이스 내 사이트의 Designer → 앱 패널에서 MCP Bridge App을 엽니다.

2. AI 클라이언트 구성

Cursor

.cursor/mcp.json에 추가:

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

Claude 데스크톱

claude_desktop_config.json에 추가:

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

3. Webflow Designer와 함께 MCP 서버 사용

  • Webflow Designer에서 사이트를 엽니다.
  • 앱 패널을 열고(E 누르기) 게시된 "Webflow MCP Bridge App"을 실행합니다.
  • 앱이 MCP 서버에 연결될 때까지 기다린 다음 AI 클라이언트에서 도구를 사용합니다.
  • Bridge App이 로컬 연결 URL을 요청하면 AI 클라이언트에서 get_designer_app_connection_info 도구를 호출하고 반환된 http://localhost:<port> URL을 붙여넣습니다.

선택 사항: 셸을 통해 로컬에서 실행

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 호환성

Webflow 개발자 문서의 Node.js 호환성 가이드를 참조하세요.

❓ 문제 해결

Cursor 또는 Claude 데스크톱과 같은 MCP 클라이언트에서 서버를 시작하는 데 문제가 있는 경우 다음을 시도해 보세요.

유효한 Webflow API 토큰이 있는지 확인

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

Node 및 NPM이 설치되어 있는지 확인

다음 명령을 실행하여 Node와 NPM이 설치되어 있는지 확인합니다:

node -v
npm -v

NPM 캐시 지우기

때때로 NPM 캐시를 지우면 npx 관련 문제를 해결할 수 있습니다.

npm cache clean --force

NPM 전역 패키지 권한 수정

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

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

🛠️ 사용 가능한 도구

사용 가능한 도구 목록은 ./tools 디렉터리를 참조하세요.

🗣️ 프롬프트 및 리소스

이 구현에는 MCP 사양의 prompts 또는 resources이 포함되지 않습니다. 그러나 인기 있는 MCP 클라이언트에서 더 광범위하게 지원되면 향후 변경될 수 있습니다.

📄 Webflow 개발자 리소스

⚠️ 알려진 제한 사항

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

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