WebflowのJavaScript SDKを用いたWebflow向けのModel Context Protocol(MCP)を実装するNode.jsサーバーです。AIエージェントがWebflow APIとやり取りできるようにします。WebflowのデータAPIについては開発者ドキュメントで詳しくご覧ください。

前提条件

• Node.js
• NPM
• Webflowアカウント

🚀 リモートインストール

まずはWebflowのリモートMCPサーバーをインストールして始めましょう。リモートサーバーはOAuthを使ってWebflowサイトと認証し、ライブキャンバスとAIエージェントを同期するアプリも使います。

要件

• Node.js 22.3.0以上

注:MCPサーバーは現在、Node.js 22.3.0以上をサポートしています。バージョンの問題が発生した場合は、Node.js互換性ガイダンスを参照してください。

カーソル

MCPサーバーをカーソルに追加

1. Settings → Cursor Settings → MCP & Integrationsへ行く。
2. MCPツールの「+ New MCP Server」をクリックします。
3. 以下の構成を.cursor/mcp.jsonに貼り付けるか、webflow部分を既存の構成に追加する):

のヒント:複数のカーソルウィンドウで繰り返される認証プロンプトを避けるために、プロジェクトレベルのmcp.jsonを作成することができます。設定場所についてはカーソルのドキュメントをご覧ください。

4. ファイルを保存して閉じる。

Webflow’s MCP server

A Node.js server implementing Model Context Protocol (MCP) for Webflow using the Webflow JavaScript SDK. Enable AI agents to interact with Webflow APIs. Learn more about Webflow’s Data API in the developer documentation.

Prerequisites

• Node.js
• NPM
• A Webflow Account

🚀 Remote installation

Get started by installing Webflow’s remote MCP server. The remote server uses OAuth to authenticate with your Webflow sites, and a companion app that syncs your live canvas with your AI agent.

Requirements

• Node.js 22.3.0 or higher

Note: The MCP server currently supports Node.js 22.3.0 or higher. If you run into version issues, see the Node.js compatibility guidance.

Cursor

Add MCP server to Cursor

1. Go to Settings → Cursor Settings → MCP & Integrations.
2. Under MCP Tools, click + New MCP Server.
3. Paste the following configuration into .cursor/mcp.json (or add the webflow part to your existing configuration):

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

Tip: You can create a project-level mcp.json to avoid repeated auth prompts across multiple Cursor windows. See Cursor’s docs on configuration locations.

4. Save and close the file. Cursor will automatically open an OAuth login page where you can authorize Webflow sites to use with the MCP server.

Open the Webflow Designer

• Open your site in the Webflow Designer, or ask your AI agent:

Give me a link to open  in the Webflow Designer

Open the MCP Webflow App

1. In the Designer, open the Apps panel (press E).
2. Launch your published “Webflow MCP Bridge App”.
3. Wait for the app to connect to the MCP server.

Write your first prompt

Try these in your AI chat:

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

Add MCP server to Claude desktop

1. Enable developer mode: Help → Troubleshooting → Enable Developer Mode.
2. Open developer settings: File → Settings → Developer.