Webflow MCP Server

आधिकारिक

Webflow APIs के साथ इंटरैक्ट करके अपनी साइट और CMS डेटा को सूचीबद्ध और संपादित करें।

GitHub
132

दस्तावेज़

Webflow का MCP सर्वर

एक Node.js सर्वर जो Webflow JavaScript SDK का उपयोग करके Webflow के लिए Model Context Protocol (MCP) लागू करता है। AI एजेंटों को Webflow APIs के साथ इंटरैक्ट करने में सक्षम बनाएँ। Webflow के Data API के बारे में डेवलपर दस्तावेज़ में अधिक जानें।

npm shield Webflow

पूर्वापेक्षाएँ

🚀 रिमोट इंस्टॉलेशन

Webflow के रिमोट MCP सर्वर को इंस्टॉल करके शुरुआत करें। रिमोट सर्वर आपकी Webflow साइटों के साथ प्रमाणीकरण के लिए OAuth का उपयोग करता है, और एक सहयोगी ऐप जो आपके लाइव कैनवास को आपके AI एजेंट के साथ सिंक करता है।

आवश्यकताएँ

  • Node.js 22.3.0 या उच्चतर

नोट: MCP सर्वर वर्तमान में Node.js 22.3.0 या उच्चतर का समर्थन करता है। यदि आपको संस्करण संबंधी समस्याएँ आती हैं, तो Node.js संगतता मार्गदर्शन देखें।

Cursor

Cursor में MCP सर्वर जोड़ें

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

सुझाव: एकाधिक Cursor विंडो में बार-बार प्रमाणीकरण संकेतों से बचने के लिए आप प्रोजेक्ट-स्तरीय mcp.json बना सकते हैं। कॉन्फ़िगरेशन स्थानों पर Cursor के दस्तावेज़ देखें।

  1. फ़ाइल सहेजें और बंद करें। Cursor स्वचालित रूप से एक OAuth लॉगिन पेज खोलेगा जहाँ आप MCP सर्वर के साथ उपयोग करने के लिए Webflow साइटों को अधिकृत कर सकते हैं।

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 डेस्कटॉप

Claude डेस्कटॉप में MCP सर्वर जोड़ें

  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"]
    }
  }
}
  1. सहेजें और Claude डेस्कटॉप को पुनरारंभ करें (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 के डेवलपर दस्तावेज़ों पर Node.js संगतता मार्गदर्शन देखें।

स्थानीय इंस्टॉलेशन

आप MCP सर्वर को स्थानीय रूप से चलाने के लिए भी कॉन्फ़िगर कर सकते हैं। इसके लिए आवश्यक है:

  • व्यवस्थापक अनुमतियों के साथ Webflow कार्यक्षेत्र में अपना स्वयं का MCP Bridge App बनाना और पंजीकृत करना
  • Webflow API टोकन के साथ स्थानीय MCP सर्वर शुरू करने के लिए अपने AI क्लाइंट को कॉन्फ़िगर करना

1. MCP ब्रिज ऐप बनाएँ और प्रकाशित करें

स्थानीय MCP सर्वर को अपने AI क्लाइंट से कनेक्ट करने से पहले, आपको अपने कार्यक्षेत्र में Webflow MCP Bridge App बनाना और प्रकाशित करना होगा।

चरण

  1. एक Webflow ऐप पंजीकृत करें

    • अपने Webflow कार्यक्षेत्र पर जाएँ और एक नया ऐप पंजीकृत करें।
    • आधिकारिक गाइड का पालन करें: एक ऐप पंजीकृत करें।

  2. MCP Bridge App कोड प्राप्त करें

    • विकल्प A: रिलीज़ पेज से नवीनतम bundle.zip डाउनलोड करें।
    • विकल्प B: रिपॉजिटरी क्लोन करें और इसे बिल्ड करें: 
      git clone https://github.com/virat21/webflow-mcp-bridge-app
cd webflow-mcp-bridge-app
      • फिर रिपॉजिटरी निर्देशों का पालन करते हुए प्रोजेक्ट बिल्ड करें।

  3. Designer एक्सटेंशन प्रकाशित करें

    • Webflow डैशबोर्ड → कार्यक्षेत्र सेटिंग्स → ऐप्स और एकीकरण → विकसित करें → आपका ऐप पर जाएँ।
    • “एक्सटेंशन संस्करण प्रकाशित करें” पर क्लिक करें।
    • अपनी बिल्ड की गई bundle.zip फ़ाइल अपलोड करें।

  4. Designer में ऐप खोलें

    • एक बार प्रकाशित होने के बाद, अपने कार्यक्षेत्र के भीतर किसी साइट में Designer → Apps पैनल से MCP Bridge App खोलें।

2. अपना AI क्लाइंट कॉन्फ़िगर करें

Cursor

.cursor/mcp.json में जोड़ें:

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

Claude डेस्कटॉप

claude_desktop_config.json में जोड़ें:

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

3. Webflow Designer के साथ MCP सर्वर का उपयोग करें

  • Webflow Designer में अपनी साइट खोलें।
  • Apps पैनल खोलें (E दबाएँ) और अपना प्रकाशित “Webflow MCP Bridge App” लॉन्च करें।
  • ऐप के MCP सर्वर से कनेक्ट होने की प्रतीक्षा करें, फिर अपने AI क्लाइंट से टूल का उपयोग करें।
  • यदि Bridge App स्थानीय कनेक्शन URL के लिए संकेत देता है, तो अपने AI क्लाइंट से get_designer_app_connection_info टूल को कॉल करें और लौटाए गए http://localhost:<port> URL को पेस्ट करें।

वैकल्पिक: शेल के माध्यम से स्थानीय रूप से चलाएँ

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 के डेवलपर दस्तावेज़ों पर Node.js संगतता मार्गदर्शन देखें।

❓ समस्या निवारण

यदि आपको अपने MCP क्लाइंट जैसे Cursor या Claude डेस्कटॉप में सर्वर शुरू करने में समस्या आ रही है, तो कृपया निम्न प्रयास करें।

सुनिश्चित करें कि आपके पास एक मान्य Webflow API टोकन है

  1. Webflow के API प्लेग्राउंड पर जाएँ, लॉग इन करें और एक टोकन जनरेट करें, फिर अनुरोध जनरेटर से टोकन कॉपी करें
  2. अपने MCP क्लाइंट कॉन्फ़िगरेशन में YOUR_WEBFLOW_TOKEN को आपके द्वारा कॉपी किए गए टोकन से बदलें
  3. सहेजें और अपने MCP क्लाइंट को पुनरारंभ करें

सुनिश्चित करें कि आपके पास Node और NPM इंस्टॉल हैं

यह पुष्टि करने के लिए कि आपके पास Node और NPM इंस्टॉल हैं, निम्न कमांड चलाएँ:

node -v
npm -v

अपना NPM कैश साफ़ करें

कभी-कभी अपना NPM कैश साफ़ करने से npx के साथ समस्याएँ हल हो सकती हैं।

npm cache clean --force

NPM वैश्विक पैकेज अनुमतियाँ ठीक करें

यदि npm -v आपके लिए काम नहीं करता है लेकिन sudo npm -v करता है, तो आपको NPM वैश्विक पैकेज अनुमतियाँ ठीक करने की आवश्यकता हो सकती है। अधिक जानकारी के लिए आधिकारिक NPM दस्तावेज़ देखें।

नोट: यदि आप अपने शेल कॉन्फ़िगरेशन में परिवर्तन कर रहे हैं, तो परिवर्तनों को प्रभावी होने के लिए आपको अपने शेल को पुनरारंभ करने की आवश्यकता हो सकती है।

🛠️ उपलब्ध टूल

उपलब्ध टूल की सूची के लिए ./tools निर्देशिका देखें

🗣️ प्रॉम्प्ट और संसाधन

इस कार्यान्वयन में MCP विनिर्देश से prompts या resources शामिल नहीं हैं। हालाँकि, भविष्य में जब लोकप्रिय MCP क्लाइंट में व्यापक समर्थन होगा तो यह बदल सकता है।

📄 Webflow डेवलपर संसाधन

⚠️ ज्ञात सीमाएँ

स्थैतिक पृष्ठ सामग्री अपडेट

pages_update_static_content एंडपॉइंट वर्तमान में केवल द्वितीयक स्थानों में स्थानीयकृत स्थैतिक पृष्ठों के अपडेट का समर्थन करता है। डिफ़ॉल्ट स्थान में स्थैतिक सामग्री के अपडेट समर्थित नहीं हैं और इसके परिणामस्वरूप त्रुटियाँ होंगी।