Skip to main content
Glama
deenesjakoruzh
webflow

Webflow

Official
by webflow
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

Webflowの公式MCPサーバー

Webflow JavaScript SDKを使用してWebflow用のモデルコンテキストプロトコル（MCP）を実装したNode.jsサーバーです。AIエージェントがWebflow APIとやり取りできるようにします。WebflowのデータAPIの詳細については、開発者向けドキュメントをご覧ください。

npmシールド シダの盾

ℹ 前提条件

Related MCP server: Webflow MCP Server

▶️ クイックスタート（Cloudflareワーカーでホスト）

カーソルの場合:

  1. Settings → Cursor Settings → MCPに移動します

  2. + Add New Global MCP Serverクリック

  3. 次の設定を貼り付けます（または、既存の設定にwebflow部分を追加します）。

{
  "mcpServers": {
    "webflow": {
      "command": "npx mcp-remote https://mcp.webflow.com/sse"
    }
  }
}

  1. 保存すると、カーソルは自動的に新しいブラウザ ウィンドウを開き、MCP サーバーがアクセスできるようにする Webflow サイトを承認するための OAuth ログイン ページを表示します。

Claude Desktopの場合:

  1. Settings → Developer向けを開く

  2. Edit Configクリック

  3. コード エディターでclaude_desktop_config.jsonを開き、次の構成を貼り付けます (または、既存の構成にwebflow部分を追加します)。

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}

  1. ファイルを保存し、Claude Desktopを再起動します（command/ctrl + R）。Claudeが再起動すると、新しいブラウザウィンドウが自動的に開き、MCPサーバーにアクセスを許可するWebflowサイトを認証するためのOAuthログインページが表示されます。

ウィンドサーフィンの場合:

  1. Windsurf - Settings → Advanced Settingsに移動します

  2. Cascadeセクションまでスクロールダウン→ Add Server → Add custom server +

  3. 次の設定を貼り付けます（または、既存の設定にwebflow部分を追加します）。

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
    }
  }
}

  1. Saveクリックすると、Windsurf は自動的に新しいブラウザ ウィンドウを開き、MCP サーバーがアクセスできるようにする Webflow サイトを承認するための OAuth ログイン ページを表示します。

重要な注意事項

これらの方法はすべて、2025年4月30日現在まだ試験的なnpmパッケージであるmcp-remoteに依存しています。問題が発生し、OAuthトークンをリセットしたい場合は、MCPクライアントを再起動する前に次のコマンドを実行してください。

rm -rf ~/.mcp-auth

▶️ クイックスタート（ローカルインストール）

  1. Webflow APIトークンを取得する

  1. AIエディターに追加する

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

カーソルの場合:

  1. 設定→カーソル設定→MCPに移動します

  2. + Add New Global MCP Serverクリック

  3. 設定を貼り付ける

  4. YOUR_WEBFLOW_TOKEN先ほどコピーしたトークンに置き換えます。

  5. 保存してカーソルを再起動

Claude Desktopの場合:

  1. 設定→開発者向けを開く

  2. Edit Configクリック

  3. コードエディタでclaude_desktop_config.jsonを開き、設定を貼り付けます。

  4. YOUR_WEBFLOW_TOKEN先ほどコピーしたトークンに置き換えます。5.保存してClaudeを再起動します。

❓ トラブルシューティング

MCP クライアント (Cursor や Claude Desktop など) でサーバーの起動に問題がある場合は、次の操作を試してください。

有効な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 の公式ドキュメントをご覧ください。

注意: シェルの設定を変更する場合、変更を有効にするにはシェルを再起動する必要がある場合があります。

🛠️ 利用可能なツール

サイト

sites - list; // List all sites
sites - get; // Get site details
sites - publish; // Publish site changes

ページ

pages - list; // List all pages
pages - get - metadata; // Get page metadata
pages - update - page - settings; // Update page settings
pages - get - content; // Get page content
pages - update - static - content; // Update page content

コンポーネント

components - list // List all components in a site
components - get - content // Get component content (text, images, nested components)
components - update - content // Update component content for localization
components - get - properties // Get component properties (default values)
components - update - properties // Update component properties for localization

CMS

collections - list; // List collections
collections - get; // Get collection details
collections - create; // Create a collection
collection - fields - create - static; // Create a static field
collection - fields - create - option; // Create an option field
collection - fields - create - reference; // Create a reference field
collection - fields - update; // Update a custom field
collections - items - create - item - live; // Create items
collections - items - update - items - live; // Update items
collections - items - list - items; // List collection items
collections - items - create - item; // Create collection items (staged)
collections - items - update - items; // Update collection items (staged)
collections - items - publish - items; // Publish collection items

カスタムコード

custom code - add - inline - site - script // Register an inline script for a site
custom code - get - registered - site - script - list // List all scripts registered to a site
custom code - get - applied - site - script - list //Get all scripts applied to a site
custom code - delete site custom code // Remove scripts from a site

🗣️ プロンプトとリソース

この実装には、MCP仕様のpromptsやresources含まれていません。ただし、将来的に、一般的なMCPクライアントでのサポートが拡大されれば、状況は変わる可能性があります。

🚧 開発モード

サーバーを開発モードで実行する場合は、次のコマンドを使用して依存関係をインストールし、サーバーを実行できます。

  1. クローンしてインストール:

git clone git@github.com:webflow/mcp-server.git
cd mcp-server
npm install

  1. プロジェクトのルートにある.envファイルにトークンを追加します。

# .env
WEBFLOW_TOKEN=<YOUR_WEBFLOW_TOKEN>

  1. 開発サーバーを起動します:

npm start

📄 Webflow 開発者リソース

⚠️ 既知の制限事項

静的ページコンテンツの更新

pages_update_static_content エンドポイントは現在、セカンダリロケールのローカライズされた静的ページの更新のみをサポートしています。デフォルトロケールの静的コンテンツの更新はサポートされておらず、エラーが発生します。

Install Server
A
security – no known vulnerabilities
A
license - permissive license
-
quality - not tested

How are these scores calculated?

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/webflow/mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server