remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

Allows Claude to interact with Webflow's APIs to retrieve site information including site details, custom domains, localization settings, and data collection configurations.

Webflow MCP サーバー

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

前提条件

Node.js (v16 以上)
クロードデスクトップアプリ
Webflowアカウント
Webflow APIトークン（サイトトークンまたはOAuthアクセストークン）

セットアップ手順

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 ファイルを参照してください。

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

Claude が Webflow の API と対話して、サイトを管理したり、情報を取得したり、自然言語を使用してタスクを実行したりできるようにします。

Related Resources

Reddit Discussion about this server