Webflow MCP Server

เซิร์ฟเวอร์ MCP ของ Webflow

เซิร์ฟเวอร์ Node.js ที่ใช้ Model Context Protocol (MCP) สำหรับ Webflow โดยใช้ Webflow JavaScript SDK ช่วยให้เอเจนต์ AI สามารถโต้ตอบกับ Webflow APIs ได้ เรียนรู้เพิ่มเติมเกี่ยวกับ Data API ของ Webflow ได้ใน เอกสารสำหรับนักพัฒนา

ข้อกำหนดเบื้องต้น

• Node.js
• NPM
• บัญชี Webflow

🚀 การติดตั้งแบบรีโมต

เริ่มต้นด้วยการติดตั้งเซิร์ฟเวอร์ MCP แบบรีโมตของ Webflow เซิร์ฟเวอร์รีโมตใช้ OAuth เพื่อยืนยันตัวตนกับไซต์ Webflow ของคุณ และมีแอปคู่หูที่ซิงค์แคนวาสสดของคุณกับเอเจนต์ AI

ข้อกำหนด

• Node.js 22.3.0 หรือสูงกว่า

หมายเหตุ: ปัจจุบันเซิร์ฟเวอร์ MCP รองรับ Node.js 22.3.0 หรือสูงกว่า หากคุณพบปัญหาเกี่ยวกับเวอร์ชัน โปรดดู คำแนะนำความเข้ากันได้ของ Node.js

Cursor

เพิ่มเซิร์ฟเวอร์ MCP ลงใน Cursor

1. ไปที่ Settings → Cursor Settings → MCP & Integrations
2. ภายใต้ MCP Tools คลิก + New MCP Server
3. วางการกำหนดค่าต่อไปนี้ลงใน .cursor/mcp.json (หรือเพิ่มส่วน webflow ลงในการกำหนดค่าที่มีอยู่ของคุณ):

{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

เคล็ดลับ: คุณสามารถสร้าง mcp.json ระดับโปรเจกต์เพื่อหลีกเลี่ยงการแจ้งยืนยันตัวตนซ้ำๆ ในหน้าต่าง Cursor หลายหน้าต่าง ดูเอกสารของ Cursor เกี่ยวกับ ตำแหน่งการกำหนดค่า

4. บันทึกและปิดไฟล์ Cursor จะเปิดหน้าล็อกอิน OAuth โดยอัตโนมัติ ซึ่งคุณสามารถอนุญาตให้ไซต์ Webflow ใช้งานกับเซิร์ฟเวอร์ MCP ได้

เปิด Webflow Designer

• เปิดไซต์ของคุณใน Webflow Designer หรือถามเอเจนต์ AI ของคุณ:

Give me a link to open <MY_SITE_NAME> in the Webflow Designer

เปิดแอป MCP Webflow

1. ใน Designer เปิดแผง Apps (กด 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 desktop

เพิ่มเซิร์ฟเวอร์ MCP ลงใน Claude desktop

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"]
    }
  }
}

4. บันทึกและรีสตาร์ท Claude Desktop (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 เปิดแผง Apps (กด 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

---

การติดตั้งภายในเครื่อง

คุณยังสามารถกำหนดค่าเซิร์ฟเวอร์ MCP ให้ทำงานภายในเครื่องได้ ซึ่งต้องมี:

• การสร้างและลงทะเบียน MCP Bridge App ของคุณเองในพื้นที่ทำงาน Webflow ที่มีสิทธิ์ผู้ดูแลระบบ
• การกำหนดค่าไคลเอนต์ AI ของคุณให้เริ่มเซิร์ฟเวอร์ MCP ภายในเครื่องด้วยโทเค็น Webflow API

1. สร้างและเผยแพร่แอป MCP bridge

ก่อนเชื่อมต่อเซิร์ฟเวอร์ MCP ภายในเครื่องกับไคลเอนต์ AI ของคุณ คุณต้องสร้างและเผยแพร่ Webflow MCP Bridge App ในพื้นที่ทำงานของคุณ

ขั้นตอน

1. ลงทะเบียนแอป Webflow

   • ไปที่พื้นที่ทำงาน Webflow ของคุณและลงทะเบียนแอปใหม่
   • ทำตามคำแนะนำอย่างเป็นทางการ: ลงทะเบียนแอป

2. รับโค้ด MCP Bridge App

   • ตัวเลือก A: ดาวน์โหลด bundle.zip ล่าสุดจาก หน้า releases
   • ตัวเลือก B: โคลนที่เก็บและสร้าง:

     git clone https://github.com/virat21/webflow-mcp-bridge-app
     cd webflow-mcp-bridge-app
     

     • จากนั้นสร้างโปรเจกต์ตามคำแนะนำของที่เก็บ

3. เผยแพร่ส่วนขยาย Designer

   • ไปที่ Webflow Dashboard → การตั้งค่าพื้นที่ทำงาน → Apps & Integrations → Develop → แอปของคุณ
   • คลิก “เผยแพร่เวอร์ชันส่วนขยาย”
   • อัปโหลดไฟล์ bundle.zip ที่สร้างแล้วของคุณ

4. เปิดแอปใน Designer

   • เมื่อเผยแพร่แล้ว ให้เปิด MCP Bridge App จาก แผง Designer → Apps ในไซต์ภายในพื้นที่ทำงานของคุณ

2. กำหนดค่าไคลเอนต์ AI ของคุณ

Cursor

เพิ่มลงใน .cursor/mcp.json:

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

Claude desktop

เพิ่มลงใน claude_desktop_config.json:

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

3. ใช้เซิร์ฟเวอร์ MCP กับ Webflow Designer

• เปิดไซต์ของคุณใน Webflow Designer
• เปิดแผง Apps (กด E) และเปิด “Webflow MCP Bridge App” ที่เผยแพร่แล้วของคุณ
• รอให้แอปเชื่อมต่อกับเซิร์ฟเวอร์ MCP จากนั้นใช้เครื่องมือจากไคลเอนต์ AI ของคุณ
• หาก Bridge App แจ้งขอ URL การเชื่อมต่อภายในเครื่อง ให้เรียกเครื่องมือ get_designer_app_connection_info จากไคลเอนต์ AI ของคุณและวาง URL http://localhost:<port> ที่ส่งกลับมา

ตัวเลือก: รันภายในเครื่องผ่านเชลล์

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

❓ การแก้ไขปัญหา

หากคุณมีปัญหาในการเริ่มเซิร์ฟเวอร์ในไคลเอนต์ MCP ของคุณ เช่น Cursor หรือ Claude Desktop โปรดลองทำตามขั้นตอนต่อไปนี้

ตรวจสอบว่าคุณมีโทเค็น Webflow API ที่ถูกต้อง

1. ไปที่ Webflow's API Playground เข้าสู่ระบบและสร้างโทเค็น จากนั้นคัดลอกโทเค็นจาก Request Generator
2. แทนที่ YOUR_WEBFLOW_TOKEN ในการกำหนดค่าไคลเอนต์ MCP ของคุณด้วยโทเค็นที่คุณคัดลอก
3. บันทึกและ รีสตาร์ท ไคลเอนต์ MCP ของคุณ

ตรวจสอบว่าคุณได้ติดตั้ง Node และ NPM แล้ว

• Node.js
• NPM

รันคำสั่งต่อไปนี้เพื่อยืนยันว่าคุณได้ติดตั้ง Node และ NPM แล้ว:

node -v
npm -v

ล้างแคช NPM ของคุณ

บางครั้งการล้าง แคช NPM สามารถแก้ไขปัญหาเกี่ยวกับ npx ได้

npm cache clean --force

แก้ไขสิทธิ์แพ็กเกจส่วนกลางของ NPM

หาก npm -v ไม่ทำงานสำหรับคุณ แต่ sudo npm -v ทำงานได้ คุณอาจต้องแก้ไขสิทธิ์แพ็กเกจส่วนกลางของ NPM ดู เอกสาร NPM อย่างเป็นทางการ สำหรับข้อมูลเพิ่มเติม

หมายเหตุ: หากคุณกำลังเปลี่ยนแปลงการกำหนดค่าเชลล์ คุณอาจต้องรีสตาร์ทเชลล์เพื่อให้การเปลี่ยนแปลงมีผล

🛠️ เครื่องมือที่พร้อมใช้งาน

ดูไดเรกทอรี ./tools สำหรับรายการเครื่องมือที่พร้อมใช้งาน

🗣️ พรอมต์และทรัพยากร

การใช้งานนี้ ไม่มี prompts หรือ resources จากข้อกำหนด MCP อย่างไรก็ตาม สิ่งนี้อาจเปลี่ยนแปลงในอนาคตเมื่อมีการสนับสนุนที่กว้างขึ้นในไคลเอนต์ MCP ยอดนิยม

📄 ทรัพยากรสำหรับนักพัฒนา Webflow

• เอกสาร Webflow API
• Webflow JavaScript SDK

⚠️ ข้อจำกัดที่ทราบ

การอัปเดตเนื้อหาหน้าแบบคงที่

ปัจจุบันปลายทาง pages_update_static_content รองรับเฉพาะการอัปเดตหน้าแบบคงที่ที่แปลแล้วในโลแคลรองเท่านั้น การอัปเดตเนื้อหาแบบคงที่ในโลแคลเริ่มต้นไม่รองรับและจะส่งผลให้เกิดข้อผิดพลาด