Skip to main content
Glama

Webflow MCP サーバー

鍛冶屋のバッジ

この MCP サーバーにより、Claude は Webflow の API と対話できるようになります。

前提条件

  • Node.js (v16 以上)

  • クロードデスクトップアプリ

  • Webflowアカウント

  • Webflow APIトークン(サイトトークンまたはOAuthアクセストークン)

Related MCP server: SharePoint Online MCP Server

セットアップ手順

1. Webflow APIトークンを作成する

  • Webflowアカウントにログイン

  • サイト設定 > アプリと統合に移動します

  • 新しいAPIトークンを生成する

  • トークンの値をコピーします(再度表示することはできません)

あるいは、OAuth アクセス トークンを生成することもできます。

2. プロジェクトの初期設定

依存関係をインストールします:

npm install

3. 環境変数を設定する

ローカル開発用の.envファイルを作成します (このファイルはコミットしないでください)。

WEBFLOW_API_TOKEN=your-api-token

4. Claudeデスクトップを設定する

Claude Desktop 構成ファイルを開きます。

MacOSの場合:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windowsの場合:

code %AppData%\Claude\claude_desktop_config.json

構成を追加または更新します。

{ "mcpServers": { "webflow": { "command": "node", "args": [ "/ABSOLUTE/PATH/TO/YOUR/build/index.js" ], "env": { "WEBFLOW_API_TOKEN": "your-api-token" } } } }

ファイルを保存し、Claude Desktop を再起動します。

Smithery経由でインストール

Smithery経由で Claude Desktop 用の Webflow MCP Server を自動的にインストールするには:

npx -y @smithery/cli install @kapilduraphe/webflow-mcp-server --client claude

利用可能なツール

サーバーは現在、次のツールを提供しています。

get_sites

認証されたユーザーがアクセスできるすべてのWebflowサイトのリストを取得します。以下の詳細情報を返します。

  • サイトの表示名と短縮名

  • サイトIDとワークスペースID

  • 作成日、最終更新日、最終公開日

  • プレビューURL

  • タイムゾーン設定

  • カスタムドメインの構成

  • ローカリゼーション設定(プライマリロケールとセカンダリロケール)

  • データ収集の設定

get_site

ID で特定の Webflow サイトの詳細情報を取得します。siteId パラメータが必要で、単一のサイトに対して get_sites と同じ詳細情報を返します。

型定義

interface WebflowApiError { status?: number; message: string; code?: string; } interface WebflowCustomDomain { id: string; url: string; lastPublished: string; } interface WebflowLocale { id: string; cmsLocaleId: string; enabled: boolean; displayName: string; redirect: boolean; subdirectory: string; tag: string; } interface WebflowSite { id: string; workspaceId: string; createdOn: string; displayName: string; shortName: string; lastPublished: string; lastUpdated: string; previewUrl: string; timeZone: string; parentFolderId?: string; customDomains: WebflowCustomDomain[]; locales: { primary: WebflowLocale; secondary: WebflowLocale[]; }; dataCollectionEnabled: boolean; dataCollectionType: string; }

エラー処理

サーバーはさまざまなエラー シナリオを処理します。

環境エラー

  • WEBFLOW_API_TOKENがありません

  • 無効なAPIトークン

トラブルシューティング

よくある問題

クロードにツールが表示されない

  • Claude Desktopのログを確認する

  • WEBFLOW_API_TOKENが正しく設定されていることを確認する

  • index.jsへのパスが絶対パスかつ正しいことを確認してください

認証エラー

  • APIトークンが有効であることを確認してください

  • トークンに必要な権限があるかどうかを確認する

  • トークンの有効期限が切れていないことを確認する

ログの表示

サーバー ログを表示するには:

MacOS/Linuxの場合:

tail -n 20 -f ~/Library/Logs/Claude/mcp*.log

Windowsの場合:

Get-Content -Path "$env:AppData\Claude\Logs\mcp*.log" -Wait -Tail 20

環境変数

環境変数エラーが発生した場合は、以下を確認してください。

  • WEBFLOW_API_TOKEN : 有効なAPIトークンである必要があります

セキュリティに関する考慮事項

  • APIトークンを安全に保つ

  • バージョン管理に資格情報をコミットしない

  • 機密データには環境変数を使用する

  • APIトークンを定期的にローテーションする

  • Webflow で API の使用状況を監視する

  • APIトークンに必要な最小限の権限を使用する

サポート

問題が発生した場合:

  • 上記のトラブルシューティングセクションを確認してください

  • Claude Desktopのログを確認する

  • サーバーのエラー出力を調べる

  • WebflowのAPIドキュメントを確認する

ライセンス

MIT ライセンス - 詳細については LICENSE ファイルを参照してください。

One-click Deploy
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

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/kapilduraphe/webflow-mcp-server'

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