Webflow MCP Server

resmi

Webflow API'leri ile sitenizi ve CMS verilerinizi listelemek ve düzenlemek için etkileşim kurun.

GitHub
132

Dokümantasyon

Webflow MCP sunucusu

Node.js ile Webflow için Model Bağlam Protokolü (MCP) uygulayan bir sunucu, Webflow JavaScript SDK kullanır. Yapay zeka ajanlarının Webflow API'leriyle etkileşime girmesini sağlar. Webflow Data API hakkında daha fazla bilgiyi geliştirici dokümantasyonunda bulabilirsiniz.

npm shield Webflow

Ön koşullar

🚀 Uzaktan kurulum

Webflow'un uzak MCP sunucusunu kurarak başlayın. Uzak sunucu, Webflow sitelerinizle kimlik doğrulaması yapmak için OAuth kullanır ve canlı tuvalinizi yapay zeka ajanınızla senkronize eden bir yardımcı uygulama içerir.

Gereksinimler

  • Node.js 22.3.0 veya üstü

Not: MCP sunucusu şu anda Node.js 22.3.0 veya üstünü destekler. Sürüm sorunlarıyla karşılaşırsanız Node.js uyumluluk rehberine bakın.

Cursor

MCP sunucusunu Cursor'a ekleme

  1. Settings → Cursor Settings → MCP & Integrations adresine gidin.
  2. MCP Araçları altında + New MCP Server düğmesine tıklayın.
  3. Aşağıdaki yapılandırmayı .cursor/mcp.json içine yapıştırın (veya webflow kısmını mevcut yapılandırmanıza ekleyin):
{
  "mcpServers": {
    "webflow": {
      "url": "https://mcp.webflow.com/sse"
    }
  }
}

İpucu: Birden fazla Cursor penceresinde tekrarlanan kimlik doğrulama istemlerini önlemek için proje düzeyinde bir mcp.json oluşturabilirsiniz. Yapılandırma konumları hakkında Cursor belgelerine bakın.

  1. Dosyayı kaydedip kapatın. Cursor, MCP sunucusuyla kullanmak üzere Webflow sitelerini yetkilendirebileceğiniz bir OAuth giriş sayfasını otomatik olarak açacaktır.

Webflow Designer'ı açma

  • Sitenizi Webflow Designer'da açın veya yapay zeka ajanınıza sorun:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

MCP Webflow Uygulamasını açma

  1. Designer'da Uygulamalar panelini açın (E tuşuna basın).
  2. Yayınlanmış "Webflow MCP Bridge App" uygulamanızı başlatın.
  3. Uygulamanın MCP sunucusuna bağlanmasını bekleyin.

İlk isteminizi yazın

Yapay zeka sohbetinizde şunları deneyin:

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 sunucusunu Claude desktop'a ekleme

  1. Geliştirici modunu etkinleştirin: Help → Troubleshooting → Enable Developer Mode.
  2. Geliştirici ayarlarını açın: File → Settings → Developer.
  3. Get Started düğmesine tıklayın veya claude_desktop_config.json dosyasını açmak için yapılandırmayı düzenleyin ve şunu ekleyin:
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}
  1. Kaydedin ve Claude Desktop'ı yeniden başlatın (Cmd/Ctrl + R). Siteleri yetkilendirmek için bir OAuth giriş sayfası açılacaktır.

Webflow Designer'ı açma

  • Sitenizi Webflow Designer'da açın veya yapay zeka ajanınıza sorun:
Give me a link to open <MY_SITE_NAME> in the Webflow Designer

MCP Webflow Uygulamasını açma

  1. Designer'da Uygulamalar panelini açın (E tuşuna basın).
  2. Yayınlanmış "Webflow MCP Bridge App" uygulamanızı başlatın.
  3. Uygulamanın MCP sunucusuna bağlanmasını bekleyin.

İlk isteminizi yazı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

OAuth jetonunuzu sıfırlama

OAuth jetonunuzu sıfırlamak için terminalinizde aşağıdaki komutu çalıştırın.

rm -rf ~/.mcp-auth

Node.js uyumluluğu

Lütfen Webflow geliştirici belgelerindeki Node.js uyumluluk rehberine bakın.

Yerel Kurulum

MCP sunucusunu yerel olarak çalışacak şekilde de yapılandırabilirsiniz. Bu şunları gerektirir:

  • Yönetici izinlerine sahip bir Webflow çalışma alanında kendi MCP Bridge App uygulamanızı oluşturma ve kaydetme
  • Yapay zeka istemcinizi, bir Webflow API jetonu ile yerel MCP sunucusunu başlatacak şekilde yapılandırma

1. MCP köprü uygulamasını oluşturma ve yayınlama

Yerel MCP sunucusunu yapay zeka istemcinize bağlamadan önce, çalışma alanınızda Webflow MCP Bridge App uygulamasını oluşturmalı ve yayınlamalısınız.

Adımlar

  1. Bir Webflow Uygulaması Kaydedin

    • Webflow Çalışma Alanınıza gidin ve yeni bir uygulama kaydedin.
    • Resmi kılavuzu izleyin: Bir Uygulama Kaydedin.

  2. MCP Bridge App kodunu edinin

    • Seçenek A: Sürümler sayfasından en son bundle.zip dosyasını indirin.
    • Seçenek B: Depoyu klonlayın ve derleyin: 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • Ardından depo talimatlarını izleyerek projeyi derleyin.

  3. Designer Eklentisini Yayınlayın

    • Webflow Dashboard → Çalışma alanı ayarları → Uygulamalar ve Entegrasyonlar → Geliştir → Uygulamanız yoluna gidin.
    • “Eklenti Sürümünü Yayınla” düğmesine tıklayın.
    • Derlenmiş bundle.zip dosyanızı yükleyin.

  4. Uygulamayı Designer'da Açın

    • Yayınlandıktan sonra, çalışma alanınızdaki bir sitede Designer → Uygulamalar panelinden MCP Bridge App uygulamasını açın.

2. Yapay zeka istemcinizi yapılandırın

Cursor

.cursor/mcp.json dosyasına ekleyin:

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

Claude desktop

claude_desktop_config.json dosyasına ekleyin:

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

3. MCP sunucusunu Webflow Designer ile kullanma

  • Sitenizi Webflow Designer'da açın.
  • Uygulamalar panelini açın (E tuşuna basın) ve yayınlanmış “Webflow MCP Bridge App” uygulamanızı başlatın.
  • Uygulamanın MCP sunucusuna bağlanmasını bekleyin, ardından yapay zeka istemcinizden araçları kullanın.
  • Bridge App yerel bir bağlantı URL'si isterse, yapay zeka istemcinizden get_designer_app_connection_info aracını çağırın ve döndürülen http://localhost:<port> URL'sini yapıştırın.

İsteğe bağlı: Kabuk üzerinden yerel olarak çalıştırma

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 Jetonunuzu Sıfırlama

OAuth jetonunuzu sıfırlamak için terminalinizde aşağıdaki komutu çalıştırın.

rm -rf ~/.mcp-auth

Node.js uyumluluğu

Lütfen Webflow geliştirici belgelerindeki Node.js uyumluluk rehberine bakın.

❓ Sorun Giderme

MCP istemcinizde (örn. Cursor veya Claude Desktop) sunucuyu başlatırken sorun yaşıyorsanız, lütfen aşağıdakileri deneyin.

Geçerli bir Webflow API jetonunuz olduğundan emin olun

  1. Webflow API Playground adresine gidin, giriş yapın ve bir jeton oluşturun, ardından İstek Oluşturucudan jetonu kopyalayın
  2. MCP istemci yapılandırmanızdaki YOUR_WEBFLOW_TOKEN kısmını kopyaladığınız jetonla değiştirin
  3. Kaydedin ve MCP istemcinizi yeniden başlatın

Node ve NPM'in yüklü olduğundan emin olun

Node ve NPM'in yüklü olduğunu doğrulamak için aşağıdaki komutları çalıştırın:

node -v
npm -v

NPM önbelleğinizi temizleyin

Bazen NPM önbelleğinizi temizlemek npx ile ilgili sorunları çözebilir.

npm cache clean --force

NPM global paket izinlerini düzeltin

Eğer npm -v sizin için çalışmıyor ancak sudo npm -v çalışıyorsa, NPM global paket izinlerini düzeltmeniz gerekebilir. Daha fazla bilgi için resmi NPM belgelerine bakın.

Not: Kabuk yapılandırmanızda değişiklik yapıyorsanız, değişikliklerin etkili olması için kabuğunuzu yeniden başlatmanız gerekebilir.

🛠️ Kullanılabilir araçlar

Kullanılabilir araçların listesi için ./tools dizinine bakın

🗣️ İstemler ve kaynaklar

Bu uygulama, MCP spesifikasyonundan prompts veya resources içermez. Ancak, popüler MCP istemcileri arasında daha geniş destek olduğunda bu gelecekte değişebilir.

📄 Webflow geliştirici kaynakları

⚠️ Bilinen sınırlamalar

Statik sayfa içerik güncellemeleri

pages_update_static_content uç noktası şu anda yalnızca ikincil yerel ayarlardaki yerelleştirilmiş statik sayfalara yapılan güncellemeleri destekler. Varsayılan yerel ayardaki statik içerik güncellemeleri desteklenmez ve hatalara neden olur.