Webflow MCP 서버 통합

“Webflow” MCP 서버란 무엇을 하나요?

Webflow MCP 서버는 Claude와 같은 AI 어시스턴트가 Webflow의 API와 상호작용할 수 있게 해주는 통합 계층입니다. AI 모델을 Webflow에 연결함으로써, 개발자와 AI 기반 도구가 Webflow 사이트 데이터를 프로그래밍 방식으로 접근, 조회, 조작할 수 있습니다. 주요 기능으로는 사이트 이름, ID, 도메인, 로컬라이제이션 설정 등 Webflow 사이트의 상세 정보를 불러오는 것이 있습니다. 이를 통해 자동화된 사이트 관리, 데이터 분석, 맥락형 상호작용이 AI 플랫폼에서 직접 가능해지며, 팀이 Webflow 리소스를 다양한 도구 및 자동화 파이프라인에 쉽게 통합할 수 있습니다.

프롬프트 목록

저장소에 프롬프트 템플릿이 명시되어 있지 않습니다.

리소스 목록

사용 가능한 문서나 코드베이스에 명시적인 리소스가 없습니다.

도구 목록

• get_sites

  • 인증된 사용자가 접근 가능한 모든 Webflow 사이트 목록을 조회합니다. 표시 이름, 약칭, 사이트 및 워크스페이스 ID, 생성·업데이트 날짜, 미리보기 URL, 시간대, 커스텀 도메인, 로컬라이제이션 설정, 데이터 수집 환경설정 등의 정보를 반환합니다.

• get_site

  • 지정된 siteId로 특정 Webflow 사이트의 상세 정보를 조회합니다. 반환 정보는 get_sites와 동일하지만 단일 사이트에 국한됩니다.

이 MCP 서버의 활용 사례

• Webflow 사이트 탐색
  • 개발자 또는 AI 에이전트가 계정 내 모든 Webflow 사이트를 빠르게 조회하여 여러 웹 프로젝트를 효율적으로 관리할 수 있습니다.
• 자동 사이트 관리
  • 한 개 또는 여러 Webflow 사이트의 메타데이터(발행일, 커스텀 도메인, 로케일 등)를 조회·모니터링하여 관리 작업을 간소화합니다.
• 맥락형 AI 상호작용
  • AI 어시스턴트가 상세 사이트 정보를 불러와 사용자 질문에 답하거나 실시간 사이트 설정 기반의 자동화 플로우를 구동할 수 있습니다.
• CI/CD 파이프라인과의 통합
  • 사이트 정보를 자동화된 배포, 퍼블리싱, 분석 워크플로우 내에서 활용할 수 있습니다.

설정 방법

Windsurf

저장소에 Windsurf 관련 별도 지침이 없습니다.

Claude

1. 사전 준비
   • Node.js(v16+)가 설치되어 있는지 확인하세요.
   • Claude 데스크톱 앱을 설치하세요.
   • Webflow API 토큰을 발급받으세요.
2. 의존성 설치
   • npm install 명령어를 실행하세요.
3. 환경 변수 설정
   • 아래 내용을 포함한 .env 파일을 생성하세요:

     WEBFLOW_API_TOKEN=your-api-token
     

4. Claude 데스크톱 설정
   • Claude 설정 파일을 엽니다:
     • MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
     • Windows: %AppData%\Claude\claude_desktop_config.json
   • 아래 항목을 추가/수정하세요:

     {
         "mcpServers": {
             "webflow": {
                 "command": "node",
                 "args": [
                     "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
                 ],
                 "env": {
                     "WEBFLOW_API_TOKEN": "your-api-token"
                 }
             }
         }
     }
     

   • 저장 후 Claude 데스크톱을 재시작하세요.

API 키 안전하게 관리하기 (env 예시):

{
    "mcpServers": {
        "webflow": {
            "command": "node",
            "args": [
                "/ABSOLUTE/PATH/TO/YOUR/build/index.js"
            ],
            "env": {
                "WEBFLOW_API_TOKEN": "your-api-token"
            }
        }
    }
}

Cursor

저장소에 Cursor 관련 별도 지침이 없습니다.

Cline

저장소에 Cline 관련 별도 지침이 없습니다.

Smithery를 통한 설치

• 아래 명령어를 실행하세요:

  npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude
  

MCP를 플로우에서 사용하는 방법

FlowHunt에서 MCP 사용하기

FlowHunt 워크플로우에 MCP 서버를 통합하려면, 플로우에 MCP 컴포넌트를 추가하고 AI 에이전트와 연결하세요:

MCP 컴포넌트를 클릭하면 설정 창이 열립니다. 시스템 MCP 설정 영역에 아래와 같은 JSON 형식으로 MCP 서버 정보를 입력하세요:

{
  "webflow": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

설정이 완료되면, AI 에이전트가 해당 MCP의 모든 기능과 역량을 도구로 활용할 수 있게 됩니다. “webflow” 부분을 실제 MCP 서버 이름으로, URL은 본인 MCP 서버의 주소로 바꿔 입력하세요.

개요

위 두 표에 따르면, Webflow MCP 서버는 Webflow/AI 통합을 위한 명확하고 유용한 도구를 제공하지만, 프롬프트 템플릿, 리소스 정의, 루트 및 샘플링에 대한 명시적 지원은 부족합니다. Claude에 대한 설정 및 문서는 탄탄하지만, 다른 플랫폼에 대한 안내는 제공하지 않습니다.

MCP 점수