웹플로우 | Glama

Webflow의 공식 MCP 서버

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

ℹ 필수 조건

▶️ 빠른 시작(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 엔드포인트는 현재 보조 로캘의 지역화된 정적 페이지에 대한 업데이트만 지원합니다. 기본 로캘의 정적 콘텐츠에 대한 업데이트는 지원되지 않으며 오류가 발생합니다.

You must be authenticated.

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all tools

Webflow 사이트, 페이지 및 컬렉션과 상호 작용합니다.

Related Resources

Reddit Discussion about this server

Related MCP Servers

Puppeteer MCP Server
merajmehrabi
A
security
A
license
A
quality
Enables browser automation with Puppeteer, supporting navigation, form interactions, and connection to active Chrome instances for comprehensive web page interaction.
Last updated -
8
470
8
TypeScript
MIT License
Webflow MCP Server
kapilduraphe
A
security
A
license
A
quality
Enables Claude to interact with Webflow's APIs for managing sites, retrieving information, and executing tasks using natural language.
Last updated -
2
4
TypeScript
MIT License
Wordware MCP Server
hugobiais
-
security
A
license
-
quality
A Model Context Protocol server implementation that integrates Wordware flows as tools directly within Claude conversations, supporting features like founder research, lead enrichment, Notion integration, and task solving with Google search.
Last updated -
50
JavaScript
MIT License
AWS CodePipeline MCP Server
cuongdev
-
security
F
license
-
quality
A Model Context Protocol server that integrates with AWS CodePipeline, allowing users to manage pipelines through Windsurf and Cascade using natural language commands.
Last updated -
4
TypeScript

View all related MCP servers

Webflow