Webflow MCP Server
Webflow MCPサーバーでClaudeがCMS管理・自動更新
npx @webflow/mcp-server概要
Webflow MCP Serverの設定方法と使い方。
ノーコードWebデザインツール「Webflow」をClaudeから操作できるMCPサーバー。
CMSコレクションのアイテム取得・作成・更新、サイト情報の確認、コレクション一覧の取得が可能。
ClaudeとWebflowのMCPサーバー連携により、CMSコンテンツの生成・投稿・更新業務を自動化できる。
Claudeが記事コンテンツを生成してWebflow CMSに直接アイテムとして登録するため、コピー&ペーストによる手動投稿作業を排除できる。
ノーコードサイト運用のコンテンツ管理をAIで効率化したいWebflowユーザーに最適で、設定方法はAPIトークンを取得するだけのシンプルな手順で完結する。
料金・APIキー情報
料金
無料プランありAPIキー
🔑 必要🔑 APIキーの取得方法
- 1
https://webflow.com/dashboard/account/integrations にアクセスしてWebflowにログイン
- 2
「API Access」セクションで「Generate API token」をクリック
- 3
トークン名とスコープを設定して「Generate token」をクリック
- 4
生成されたAPIトークンをコピーして保存（再表示不可）
- 5
コピーしたAPIトークンを保存する（再表示不可のため必ず保存すること）
こんな使い方ができます
WebflowのCMSにClaudeが生成したコンテンツを直接アイテムとして追加できる
既存CMSアイテムをClaudeに取得させてコンテンツをリライト・更新できる
コレクションの構造をClaudeに読み込ませてデータ管理の最適化提案を受けられる
セットアップ手順
- 1
Webflow（webflow.com）にアクセスしてアカウントを作成・ログインする
- 2
「Account Settings」→「Integrations」→「API access」→「Generate API token」でAPIトークンを発行・コピーする
- 3
ターミナルで以下のコマンドを実行してClaude Codeに追加する：claude mcp add webflow -e WEBFLOW_API_TOKEN=your-webflow-api-token-here -- npx -y @webflow/mcp-server
設定ファイル
コピー前に確認
Webflow APIトークン必須。Account Settings > Integrations > API Access Token から取得可能
claude mcp add webflow -e WEBFLOW_API_TOKEN=your-webflow-api-token-here -- npx -y @webflow/mcp-server