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 점수