Webflow MCP Server

Webflow MCP サーバー

この MCP サーバーを使うと、Claude が Webflow の API を利用できます。

前提条件

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

セットアップ手順

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

• Webflow アカウントにログインします
• 「サイト設定」>「アプリとインテグレーション」に移動します
• 新しい API トークンを生成します
• トークンの値をコピーします（再度表示することはできません）

代わりに、OAuth アクセストークンを生成することもできます。

2. プロジェクトの初期セットアップ

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

npm install

3. 環境変数を設定する

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

WEBFLOW_API_TOKEN=your-api-token

4. Claude Desktop を設定する

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 にツールが表示されない

• 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 — 詳細については LICENSE ファイルを参照してください。