Site Cloner MCP Server

Site Cloner MCP Server

これは、ウェブサイトのアセットを取得、分析、ダウンロードするツールを提供し、LLM（Claude など）によるウェブサイトのクローン作成を支援するために設計された MCP（Model Context Protocol）サーバーです。

機能

• 任意の URL から HTML コンテンツを取得
• HTML コンテンツからアセット（CSS、JavaScript、画像、フォントなど）を抽出
• 個々のアセットをローカルディレクトリにダウンロード
• CSS ファイルを解析して、リンクされたアセット（フォント、画像）を抽出
• ウェブサイトのサイトマップを作成
• ページの構造とレイアウトを分析

必要条件

• システムに Docker がインストールされていること

使用方法

Docker で実行する

1. Docker イメージをビルドします。

   docker build -t site-cloner-mcp .
   

2. コンテナを実行します。

   docker run -i --rm site-cloner-mcp
   

ダウンロードしたファイルを永続的に保存するには、ボリュームをマウントします。

docker run -i --rm -v $(pwd)/downloaded_sites:/app/downloaded_site site-cloner-mcp

Cursor に接続する

Cursor でこの MCP サーバーを設定する方法は 2 つあります。

1. プロジェクト固有の設定

プロジェクトのルートに .cursor/mcp.json ファイルを作成し、次の内容を記述します。

{
  "mcpServers": {
    "site-cloner": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "site-cloner-mcp"
      ]
    }
  }
}

2. グローバル設定

Cursor で MCP サーバーをグローバルに利用できるようにするには、Cursor Settings → MCP → Add new Global MCP Server に移動し、次の設定を追加します。

{
  "mcpServers": {
    "site-cloner": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "site-cloner-mcp"
      ]
    }
  }
}

利用可能なツール

1. fetch_page

ウェブページの HTML コンテンツを取得します。

Args:
    url: The URL of the webpage to fetch

2. extract_assets

HTML コンテンツからアセットへのリンクを抽出します。

Args:
    url: The URL of the webpage (used for resolving relative URLs)
    html_content: The HTML content to parse

3. download_asset

URL からアセットをダウンロードし、指定したディレクトリに保存します。

Args:
    url: The URL of the asset to download
    output_dir: The directory to save the asset to (default: downloaded_site)

4. parse_css_for_assets

CSS コンテンツを解析し、フォントや画像など、参照されているアセットの URL を抽出します。

Args:
    css_url: The URL of the CSS file (used for resolving relative URLs)
    css_content: The CSS content to parse (if None, it will be fetched from css_url)

5. create_site_map

指定された URL を起点に、ウェブサイトのサイトマップを作成します。

Args:
    url: The starting URL to crawl
    max_depth: Maximum depth to crawl (default: 1)

6. analyze_page_structure

HTML ページの構造を分析し、主要なコンポーネントを抽出します。

Args:
    html_content: The HTML content to analyze

Claude での使用例

1. Claude にウェブサイトのクローン作成を依頼します。「example.com のウェブサイトをクローンしてください」
2. Claude は利用可能なツールを使って、次の処理を行います。
   • HTML コンテンツを取得
   • アセットを抽出
   • 必要なファイルをダウンロード
   • 構造を分析
   • サイトのローカルコピーを作成

トラブルシューティング

Cursor にサーバーが表示されない

1. Cursor を再起動します。
2. 設定ファイルの構文を確認します。
3. Docker がインストールされ、正しく実行されていることを確認します。docker --version
4. Cursor の MCP ログでエラーを確認します。
   • Output → ドロップダウンから Cursor MCP を選択
5. エラーを確認するために、サーバーを手動で実行してみます。

   docker run -i --rm site-cloner-mcp
   

モジュールが見つからないエラー

「ModuleNotFoundError: No module named 'site_cloner'」エラーが発生した場合：

1. pyproject.toml 内のパッケージ名が正しいことを確認します。
2. Python ファイル内の import 文に「src.」プレフィックスが含まれていないことを確認します。
3. 変更を加えた後、Docker イメージを再ビルドします。

   docker build --no-cache -t site-cloner-mcp .
   

Docker ログの確認

Docker ログでエラーを確認するには：

docker logs $(docker ps -q --filter ancestor=site-cloner-mcp)

注意事項

• サーバーは、ダウンロードしたアセットをコンテンツの種類（html、css、js、images、fonts、videos、other）に基づいて、自動的にサブディレクトリに整理します。
• サイトをクローンする際は、著作権と利用規約による制限に注意してください。
• 自動リクエストをブロックするウェブサイトもあります。その場合は、コード内のユーザーエージェント文字列を調整する必要があるかもしれません。