Skip to main content
Glama
deenesjakoruzh

Webflow

Official
by webflow
npmGitHub
TypeScript
MIT License
243
51
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Webflowの公式MCPサーバー

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

ℹ 前提条件

▶️ クイックスタート（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
A
quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all tools

Webflow サイト、ページ、コレクションを操作します。

  1. ℹ 前提条件
    1. ▶️ クイックスタート（Cloudflareワーカーでホスト）
      1. ▶️ クイックスタート（ローカルインストール）
        1. ❓ トラブルシューティング
          1. 有効なWebflow APIトークンがあることを確認してください
          2. NodeとNPMがインストールされていることを確認してください
          3. NPMキャッシュをクリアする
          4. NPM グローバル パッケージ権限を修正
        2. 🛠️ 利用可能なツール
          1. サイト
          2. ページ
          3. コンポーネント
          4. CMS
          5. カスタムコード
        3. 🗣️ プロンプトとリソース
          1. 🚧 開発モード
            1. 📄 Webflow 開発者リソース
            2. ⚠️ 既知の制限事項

          Related Resources

          Related MCP Servers

          • mcp-twikit

            adhikasp
            -
            security
            A
            license
            -
            quality
            Interact with Twitter search and timeline
            Last updated -
            4
            41
            Python
            MIT License

          • Webflow MCP Server

            kapilduraphe
            A
            security
            A
            license
            A
            quality
            Enables Claude to interact with Webflow's APIs for managing sites, retrieving information, and executing tasks using natural language.
            Last updated -
            2
            4
            TypeScript
            MIT License
            • Apple
            • Linux

          • Confluence Communication Server

            KS-GEN-AI
            A
            security
            A
            license
            A
            quality
            Enables querying and retrieving content from Confluence through CQL searches and page content fetching, allowing Claude to seamlessly access information stored in Confluence workspaces.
            Last updated -
            2
            10
            JavaScript
            MIT License
            • Apple

          • Webflow MCP Server

            TimKJones
            -
            security
            A
            license
            -
            quality
            Enables Claude to interact with Webflow's APIs, allowing access to site information, collections, and other Webflow resources.
            Last updated -
            TypeScript
            MIT License
            • Apple

          View all related MCP servers

          Appeared in Searches

          New MCP Servers

          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