Skip to main content
Glama
TimKJones

Webflow MCP Server

by TimKJones

Webflow MCP サーバー

鍛冶屋のバッジ

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

前提条件

  • Node.js (v16 以上)

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

  • Webflowアカウント

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

Related MCP server: Webflow

セットアップ手順

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 と同じ詳細情報を返します。

get_collections

特定のWebflowサイトのすべてのコレクションのリストを取得します。siteIdパラメータが必要で、各コレクションに関する以下の詳細情報を返します。

  • コレクション名とID

  • 作成日と最終更新日

  • アイテム数

  • コレクションスラッグ

  • コレクションの設定と構成

型定義

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;
}

interface WebflowCollection {
    _id: string;
    lastUpdated: string;
    createdOn: string;
    name: string;
    slug: string;
    singularName: string;
    itemCount: number;
}

interface WebflowCollectionsResponse {
    collections: WebflowCollection[];
}

エラー処理

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

環境エラー

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

A
license - permissive license
Not graded
quality - not tested
D
maintenance

Maintenance

UpdatingMaintainers
UpdatingResponse time
Release cycle
0Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • AI-powered design and management for Webflow Sites

  • Read, edit, publish, and preview your pepita websites from Claude.

  • Live SEO workflow tools for Claude Code, Codex, and AI agents.

View all MCP Connectors

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

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