Webflow MCP Server

chính thức

Tương tác với API Webflow để liệt kê và chỉnh sửa dữ liệu trang web và CMS của bạn.

GitHub
132

Tài liệu

Máy chủ MCP của Webflow

Một máy chủ Node.js triển khai Giao thức Ngữ cảnh Mô hình (MCP) cho Webflow sử dụng Webflow JavaScript SDK. Cho phép các tác nhân AI tương tác với các API của Webflow. Tìm hiểu thêm về Data API của Webflow trong tài liệu dành cho nhà phát triển.

npm shield Webflow

Điều kiện tiên quyết

🚀 Cài đặt từ xa

Bắt đầu bằng cách cài đặt máy chủ MCP từ xa của Webflow. Máy chủ từ xa sử dụng OAuth để xác thực với các trang Webflow của bạn, cùng một ứng dụng đồng hành đồng bộ canvas trực tiếp của bạn với tác nhân AI.

Yêu cầu

  • Node.js 22.3.0 trở lên

Lưu ý: Máy chủ MCP hiện hỗ trợ Node.js 22.3.0 trở lên. Nếu bạn gặp vấn đề về phiên bản, hãy xem hướng dẫn tương thích Node.js.

Cursor

Thêm máy chủ MCP vào Cursor

  1. Đi tới Settings → Cursor Settings → MCP & Integrations.
  2. Trong MCP Tools, nhấp vào + New MCP Server.
  3. Dán cấu hình sau vào .cursor/mcp.json (hoặc thêm phần webflow vào cấu hình hiện có của bạn):
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

Mẹo: Bạn có thể tạo mcp.json cấp dự án để tránh lặp lại lời nhắc xác thực trên nhiều cửa sổ Cursor. Xem tài liệu của Cursor về vị trí cấu hình.

  1. Lưu và đóng tệp. Cursor sẽ tự động mở trang đăng nhập OAuth nơi bạn có thể ủy quyền các trang Webflow để sử dụng với máy chủ MCP.

Mở Webflow Designer

  • Mở trang của bạn trong Webflow Designer, hoặc yêu cầu tác nhân AI của bạn:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Mở Ứng dụng MCP Webflow

  1. Trong Designer, mở bảng Apps (nhấn E).
  2. Khởi chạy "Webflow MCP Bridge App" đã xuất bản của bạn.
  3. Đợi ứng dụng kết nối với máy chủ MCP.

Viết lời nhắc đầu tiên của bạn

Hãy thử những điều này trong trò chuyện AI của bạn:

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 desktop

Thêm máy chủ MCP vào Claude desktop

  1. Bật chế độ nhà phát triển: Help → Troubleshooting → Enable Developer Mode.
  2. Mở cài đặt nhà phát triển: File → Settings → Developer.
  3. Nhấp vào Get Started hoặc chỉnh sửa cấu hình để mở claude_desktop_config.json và thêm:
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. Lưu và khởi động lại Claude Desktop (Cmd/Ctrl + R). Một trang đăng nhập OAuth sẽ mở ra để ủy quyền các trang.

Mở Webflow Designer

  • Mở trang của bạn trong Webflow Designer, hoặc yêu cầu tác nhân AI của bạn:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Mở Ứng dụng MCP Webflow

  1. Trong Designer, mở bảng Apps (nhấn E).
  2. Khởi chạy "Webflow MCP Bridge App" đã xuất bản của bạn.
  3. Đợi ứng dụng kết nối với máy chủ MCP.

Viết lời nhắc đầu tiên của bạn

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

Đặt lại mã thông báo OAuth của bạn

Để đặt lại mã thông báo OAuth, hãy chạy lệnh sau trong terminal của bạn.

rm -rf ~/.mcp-auth

Tương thích Node.js

Vui lòng xem hướng dẫn tương thích trên tài liệu nhà phát triển của Webflow.

Cài đặt cục bộ

Bạn cũng có thể cấu hình máy chủ MCP để chạy cục bộ. Điều này yêu cầu:

  • Tạo và đăng ký Ứng dụng MCP Bridge của riêng bạn trong không gian làm việc Webflow với quyền Admin
  • Cấu hình máy khách AI của bạn để khởi động máy chủ MCP cục bộ với mã thông báo API Webflow

1. Tạo và xuất bản ứng dụng cầu nối MCP

Trước khi kết nối máy chủ MCP cục bộ với máy khách AI, bạn phải tạo và xuất bản Webflow MCP Bridge App trong không gian làm việc của mình.

Các bước

  1. Đăng ký Ứng dụng Webflow

    • Đi tới Không gian làm việc Webflow của bạn và đăng ký một ứng dụng mới.
    • Làm theo hướng dẫn chính thức: Đăng ký Ứng dụng.

  2. Lấy mã Ứng dụng MCP Bridge

    • Tùy chọn A: Tải xuống bundle.zip mới nhất từ trang phát hành.
    • Tùy chọn B: Sao chép kho lưu trữ và xây dựng nó: 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • Sau đó xây dựng dự án theo hướng dẫn của kho lưu trữ.

  3. Xuất bản Tiện ích mở rộng Designer

    • Đi tới Bảng điều khiển Webflow → Cài đặt không gian làm việc → Ứng dụng & Tích hợp → Phát triển → Ứng dụng của bạn.
    • Nhấp vào “Xuất bản Phiên bản Tiện ích mở rộng”.
    • Tải lên tệp bundle.zip đã xây dựng của bạn.

  4. Mở Ứng dụng trong Designer

    • Sau khi xuất bản, mở Ứng dụng MCP Bridge từ Designer → Bảng Apps trong một trang thuộc không gian làm việc của bạn.

2. Cấu hình máy khách AI của bạn

Cursor

Thêm vào .cursor/mcp.json:

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

Claude desktop

Thêm vào claude_desktop_config.json:

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

3. Sử dụng máy chủ MCP với Webflow Designer

  • Mở trang của bạn trong Webflow Designer.
  • Mở bảng Apps (nhấn E) và khởi chạy “Webflow MCP Bridge App” đã xuất bản của bạn.
  • Đợi ứng dụng kết nối với máy chủ MCP, sau đó sử dụng các công cụ từ máy khách AI của bạn.
  • Nếu Ứng dụng Bridge yêu cầu URL kết nối cục bộ, hãy gọi công cụ get_designer_app_connection_info từ máy khách AI của bạn và dán URL http://localhost:<port> được trả về.

Tùy chọn: Chạy cục bộ qua shell

WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>" npx -y webflow-mcp-server@latest

# PowerShell
$env:WEBFLOW_TOKEN="<YOUR_WEBFLOW_TOKEN>"
npx -y webflow-mcp-server@latest

Đặt lại Mã thông báo OAuth của bạn

Để đặt lại mã thông báo OAuth, hãy chạy lệnh sau trong terminal của bạn.

rm -rf ~/.mcp-auth

Tương thích Node.js

Vui lòng xem hướng dẫn tương thích trên tài liệu nhà phát triển của Webflow.

❓ Khắc phục sự cố

Nếu bạn gặp sự cố khi khởi động máy chủ trong máy khách MCP của mình, ví dụ: Cursor hoặc Claude Desktop, vui lòng thử các cách sau.

Đảm bảo bạn có mã thông báo API Webflow hợp lệ

  1. Truy cập Webflow's API Playground, đăng nhập và tạo mã thông báo, sau đó sao chép mã thông báo từ Trình tạo Yêu cầu
  2. Thay thế YOUR_WEBFLOW_TOKEN trong cấu hình máy khách MCP của bạn bằng mã thông báo bạn đã sao chép
  3. Lưu và khởi động lại máy khách MCP của bạn

Đảm bảo bạn đã cài đặt Node và NPM

Chạy các lệnh sau để xác nhận bạn đã cài đặt Node và NPM:

node -v
npm -v

Xóa bộ nhớ cache NPM của bạn

Đôi khi việc xóa bộ nhớ cache NPM có thể giải quyết các vấn đề với npx.

npm cache clean --force

Sửa quyền gói toàn cục NPM

Nếu npm -v không hoạt động với bạn nhưng sudo npm -v thì có, bạn có thể cần sửa quyền gói toàn cục NPM. Xem tài liệu NPM chính thức để biết thêm thông tin.

Lưu ý: nếu bạn đang thực hiện thay đổi đối với cấu hình shell của mình, bạn có thể cần khởi động lại shell để các thay đổi có hiệu lực.

🛠️ Công cụ có sẵn

Xem thư mục ./tools để biết danh sách các công cụ có sẵn

🗣️ Lời nhắc & tài nguyên

Triển khai này không bao gồm prompts hoặc resources từ đặc tả MCP. Tuy nhiên, điều này có thể thay đổi trong tương lai khi có sự hỗ trợ rộng rãi hơn trên các máy khách MCP phổ biến.

📄 Tài nguyên nhà phát triển Webflow

⚠️ Hạn chế đã biết

Cập nhật nội dung trang tĩnh

Điểm cuối pages_update_static_content hiện chỉ hỗ trợ cập nhật cho các trang tĩnh đã bản địa hóa trong các ngôn ngữ phụ. Cập nhật nội dung tĩnh trong ngôn ngữ mặc định không được hỗ trợ và sẽ dẫn đến lỗi.