Webflow MCP Server

resmi

Berinteraksi dengan API Webflow untuk mendaftar dan mengedit data situs dan CMS Anda.

GitHub
132

Dokumentasi

Server MCP Webflow

Server Node.js yang mengimplementasikan Model Context Protocol (MCP) untuk Webflow menggunakan Webflow JavaScript SDK. Memungkinkan agen AI berinteraksi dengan API Webflow. Pelajari lebih lanjut tentang Data API Webflow di dokumentasi pengembang.

npm shield Webflow

Prasyarat

🚀 Instalasi jarak jauh

Mulailah dengan menginstal server MCP jarak jauh Webflow. Server jarak jauh menggunakan OAuth untuk mengautentikasi dengan situs Webflow Anda, dan aplikasi pendamping yang menyinkronkan kanvas langsung Anda dengan agen AI Anda.

Persyaratan

  • Node.js 22.3.0 atau lebih tinggi

Catatan: Server MCP saat ini mendukung Node.js 22.3.0 atau lebih tinggi. Jika Anda mengalami masalah versi, lihat panduan kompatibilitas Node.js.

Cursor

Tambahkan server MCP ke Cursor

  1. Buka Settings → Cursor Settings → MCP & Integrations.
  2. Di bawah MCP Tools, klik + New MCP Server.
  3. Tempelkan konfigurasi berikut ke dalam .cursor/mcp.json (atau tambahkan bagian webflow ke konfigurasi Anda yang sudah ada):
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

Tips: Anda dapat membuat mcp.json tingkat proyek untuk menghindari permintaan autentikasi berulang di beberapa jendela Cursor. Lihat dokumen Cursor tentang lokasi konfigurasi.

  1. Simpan dan tutup file. Cursor akan secara otomatis membuka halaman login OAuth tempat Anda dapat mengotorisasi situs Webflow untuk digunakan dengan server MCP.

Buka Webflow Designer

  • Buka situs Anda di Webflow Designer, atau tanyakan kepada agen AI Anda:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Buka Aplikasi Webflow MCP

  1. Di Designer, buka panel Apps (tekan E).
  2. Luncurkan "Webflow MCP Bridge App" yang telah Anda publikasikan.
  3. Tunggu hingga aplikasi terhubung ke server MCP.

Tulis prompt pertama Anda

Coba ini di obrolan AI Anda:

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

Tambahkan server MCP ke Claude desktop

  1. Aktifkan mode pengembang: Help → Troubleshooting → Enable Developer Mode.
  2. Buka pengaturan pengembang: File → Settings → Developer.
  3. Klik Get Started atau edit konfigurasi untuk membuka claude_desktop_config.json dan tambahkan:
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. Simpan dan mulai ulang Claude Desktop (Cmd/Ctrl + R). Halaman login OAuth akan terbuka untuk mengotorisasi situs.

Buka Webflow Designer

  • Buka situs Anda di Webflow Designer, atau tanyakan kepada agen AI Anda:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

Buka Aplikasi Webflow MCP

  1. Di Designer, buka panel Apps (tekan E).
  2. Luncurkan "Webflow MCP Bridge App" yang telah Anda publikasikan.
  3. Tunggu hingga aplikasi terhubung ke server MCP.

Tulis prompt pertama Anda

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

Atur ulang token OAuth Anda

Untuk mengatur ulang token OAuth Anda, jalankan perintah berikut di terminal Anda.

rm -rf ~/.mcp-auth

Kompatibilitas Node.js

Silakan lihat panduan kompatibilitas Node.js di dokumen pengembang Webflow.

Instalasi Lokal

Anda juga dapat mengonfigurasi server MCP untuk berjalan secara lokal. Ini memerlukan:

  • Membuat dan mendaftarkan Aplikasi MCP Bridge Anda sendiri di ruang kerja Webflow dengan izin Admin
  • Mengonfigurasi klien AI Anda untuk memulai server MCP lokal dengan token API Webflow

1. Buat dan publikasikan aplikasi MCP bridge

Sebelum menghubungkan server MCP lokal ke klien AI Anda, Anda harus membuat dan mempublikasikan Webflow MCP Bridge App di ruang kerja Anda.

Langkah-langkah

  1. Daftarkan Aplikasi Webflow

    • Buka Ruang Kerja Webflow Anda dan daftarkan aplikasi baru.
    • Ikuti panduan resmi: Daftarkan Aplikasi.

  2. Dapatkan kode Aplikasi MCP Bridge

    • Opsi A: Unduh bundle.zip terbaru dari halaman rilis.
    • Opsi B: Kloning repositori dan bangun: 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • Kemudian bangun proyek mengikuti instruksi repositori.

  3. Publikasikan Ekstensi Designer

    • Buka Dasbor Webflow → Pengaturan ruang kerja → Aplikasi & Integrasi → Kembangkan → Aplikasi Anda.
    • Klik “Publikasikan Versi Ekstensi”.
    • Unggah file bundle.zip yang telah Anda bangun.

  4. Buka Aplikasi di Designer

    • Setelah dipublikasikan, buka Aplikasi MCP Bridge dari panel Designer → Apps di situs dalam ruang kerja Anda.

2. Konfigurasikan klien AI Anda

Cursor

Tambahkan ke .cursor/mcp.json:

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

Claude desktop

Tambahkan ke claude_desktop_config.json:

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

3. Gunakan server MCP dengan Webflow Designer

  • Buka situs Anda di Webflow Designer.
  • Buka panel Apps (tekan E) dan luncurkan “Webflow MCP Bridge App” yang telah Anda publikasikan.
  • Tunggu hingga aplikasi terhubung ke server MCP, lalu gunakan alat dari klien AI Anda.
  • Jika Aplikasi Bridge meminta URL koneksi lokal, panggil alat get_designer_app_connection_info dari klien AI Anda dan tempelkan URL http://localhost:<port> yang dikembalikan.

Opsional: Jalankan secara lokal melalui 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

Atur ulang Token OAuth Anda

Untuk mengatur ulang token OAuth Anda, jalankan perintah berikut di terminal Anda.

rm -rf ~/.mcp-auth

Kompatibilitas Node.js

Silakan lihat panduan kompatibilitas Node.js di dokumen pengembang Webflow.

❓ Pemecahan Masalah

Jika Anda mengalami masalah saat memulai server di klien MCP Anda, misalnya Cursor atau Claude Desktop, silakan coba langkah berikut.

Pastikan Anda memiliki token API Webflow yang valid

  1. Buka API Playground Webflow, masuk dan buat token, lalu salin token dari Request Generator
  2. Ganti YOUR_WEBFLOW_TOKEN di konfigurasi klien MCP Anda dengan token yang Anda salin
  3. Simpan dan mulai ulang klien MCP Anda

Pastikan Anda telah menginstal Node dan NPM

Jalankan perintah berikut untuk mengonfirmasi bahwa Anda telah menginstal Node dan NPM:

node -v
npm -v

Bersihkan cache NPM Anda

Terkadang membersihkan cache NPM Anda dapat menyelesaikan masalah dengan npx.

npm cache clean --force

Perbaiki izin paket global NPM

Jika npm -v tidak berfungsi untuk Anda tetapi sudo npm -v berfungsi, Anda mungkin perlu memperbaiki izin paket global NPM. Lihat dokumen NPM resmi untuk informasi lebih lanjut.

Catatan: jika Anda membuat perubahan pada konfigurasi shell Anda, Anda mungkin perlu memulai ulang shell agar perubahan diterapkan.

🛠️ Alat yang tersedia

Lihat direktori ./tools untuk daftar alat yang tersedia

🗣️ Prompt & sumber daya

Implementasi ini tidak menyertakan prompts atau resources dari spesifikasi MCP. Namun, ini dapat berubah di masa mendatang ketika ada dukungan yang lebih luas di seluruh klien MCP populer.

📄 Sumber daya pengembang Webflow

⚠️ Batasan yang diketahui

Pembaruan konten halaman statis

Endpoint pages_update_static_content saat ini hanya mendukung pembaruan pada halaman statis yang dilokalkan di lokal sekunder. Pembaruan pada konten statis di lokal default tidak didukung dan akan mengakibatkan kesalahan.