Webtools MCP Server

Webtools MCP サーバー

⚠️ 重要な免責事項：このソフトウェアは AI 技術の支援を受けて開発されています。現状のまま提供されており、徹底的なテストと検証を行わずに本番環境で使用しないでください。コードには、エラー、セキュリティ上の脆弱性、または予期しない動作が含まれている可能性があります。研究、学習、開発目的に限り、ご自身の責任でご利用ください。

HTML 抽出、Markdown 変換、スクリーンショット機能、デバッグコンソール、高度なパフォーマンス分析、パフォーマンス、アクセシビリティ、SEO などの Lighthouse を活用したウェブ監査など、包括的なウェブ分析ツールを提供する Model Context Protocol サーバーです。

前提条件

• Node.js：バージョン 14 以降
• Chrome/Chromium：Puppeteer によって自動的に提供されます
  • サーバーは Puppeteer に同梱されている Chrome を使用します
  • Chrome を別途インストールする必要はありません

機能

コアツール

• webtool_gethtml：生の HTML コンテンツの抽出
  • JavaScript レンダリングに対応
  • プロキシに対応
  • 自動再試行
• webtool_readpage：Markdown への変換
  • コンテンツをクリーンに抽出
  • リンクを保持
  • 画像を処理
  • カスタムセレクターに対応
• webtool_screenshot：スクリーンショットの撮影
  • ページ全体のスクリーンショット
  • 要素を指定した撮影
  • デバイスエミュレーション
  • カスタムビューポート設定
• webtool_debug：デバッグコンソール
  • コンソール出力の取得
  • ネットワークリクエストの監視
  • エラー追跡
  • パフォーマンス指標
  • レイアウトスラッシングの検出
• webtool_lighthouse：包括的なウェブ監査
  • パフォーマンス分析
  • アクセシビリティテスト
  • SEO 評価
  • ベストプラクティスの確認
  • プログレッシブウェブアプリの評価
  • デバイスエミュレーションに対応

パフォーマンス分析ツール

• webtool_performance_trace：高度なパフォーマンス分析
  • レイアウトスラッシングの検出
  • CSS 変数の影響分析
  • レイアウトとの相関を含む JavaScript 実行タイムライン
  • 長時間タスクの内訳と原因分析
  • メモリと DOM サイズの分析
  • リソース読み込みの最適化
• webtool_network_monitor：ネットワークアクティビティ分析
  • リクエストとレスポンスの詳細な分析
  • リソースのタイミング情報
  • ウォーターフォール可視化データ
  • 最適化の推奨事項
  • サードパーティリクエストの分析
  • キャッシュ分析
• webtool_coverage_analysis：コードカバレッジ分析
  • JavaScript と CSS のカバレッジ分析
  • 未使用コードの特定
  • コード分割の推奨事項
  • サードパーティコードの分析
• webtool_web_vitals：Core Web Vitals 分析
  • LCP（Largest Contentful Paint）分析
  • CLS（Cumulative Layout Shift）分析
  • FID/INP（First Input Delay/Interaction to Next Paint）分析
  • TTFB（Time to First Byte）分析
  • 要素ごとの分析
• webtool_performance_test：デバイス横断およびネットワークテスト
  • 複数デバイスでのテスト
  • ネットワーク状況のシミュレーション
  • 比較分析
  • ベースラインとの比較
  • デバイスごとの推奨事項

MCP プロンプト

• analyze-website：包括的なウェブサイト分析
  • パフォーマンス、アクセシビリティ、SEO、UX の分析
  • デバイスタイプの選択（モバイル／デスクトップ）
  • デバイスタイプに合わせた詳細な推奨事項
  • 実行可能な知見を含む包括的な分析レポート
• get-website-content：コンテンツ抽出
  • あらゆるウェブページからメインコンテンツを抽出
  • クリーンな Markdown への変換
  • ナビゲーション、広告、不要な要素を除去
  • 重要な書式と構造を保持
• screenshot-website：スクリーンショットの撮影
  • ウェブページを視覚的に表示
  • ページ全体を撮影
  • URL を指定するだけのシンプルなインターフェース
• technical-performance-analysis：技術的なパフォーマンス分析
  • パフォーマンスのボトルネックを詳細に技術分析
  • コード例と最適化の提案
  • 分析対象領域を選択（JavaScript、レンダリング、リソース、ネットワーク）
  • 深刻度の評価を含むパフォーマンス指標
  • 実行可能なコードレベルの推奨事項

インストール

パッケージはグローバルにインストールできます。

npm install -g @bschauer/webtools-mcp-server

または、npx で直接使用できます。

npx @bschauer/webtools-mcp-server

クイックスタート

Claude Desktop ユーザー向け

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "BASIC"
      }
    }
  }
}

この設定では基本的なツールのみを使用し、トークン使用量を 89％削減します。

Claude Code ユーザー向け

# Install with token optimization
claude mcp add webtools-basic --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

インストールのテスト

設定が完了したら、Claude に次のように依頼できます。

• 「https://example.com からメインコンテンツを抽出してください」
• 「https://google.com のスクリーンショットを撮影してください」
• 「https://news.ycombinator.com のパフォーマンスを分析してください」

トークン使用量の最適化

デフォルトでは、すべてのツールが読み込まれます（約 10.3k トークン）。必要なツールのみを有効にすると、トークン使用量を削減できます。

設定オプション

1. 環境変数：ENABLED_TOOLS=<preset|tools>
2. CLI 引数：--tools=<preset|tools>

使用可能なプリセット

プリセット	含まれるツール	トークン使用量	削減率	用途
ALL	すべての 10 個のツール	約 10.3k トークン	0％	すべての機能（デフォルト）
BASIC	gethtml、readpage	約 1k トークン	89％	コンテンツ抽出のみ
WEB	gethtml、readpage、screenshot	約 1.5k トークン	85％	ウェブコンテンツ＋ビジュアル
DEBUG	gethtml、readpage、screenshot、debug	約 2.5k トークン	76％	コンテンツ＋デバッグ
PERFORMANCE	すべてのパフォーマンス分析ツール	約 6k トークン	42％	パフォーマンステストのみ
FULL_ANALYSIS	パフォーマンステストフレームワークを除くすべてのツール	約 9k トークン	13％	完全な分析スイート

個別に使用できるツール：

• webtool_gethtml - HTML の生データを抽出
• webtool_readpage - Markdown に変換
• webtool_screenshot - スクリーンショットを撮影
• webtool_debug - デバッグコンソール＋ネットワーク監視
• webtool_lighthouse - Lighthouse 監査
• webtool_performance_trace - パフォーマンスをトレース
• webtool_coverage_analysis - コードカバレッジ分析
• webtool_web_vitals - Core Web Vitals 指標
• webtool_network_monitor - ネットワークアクティビティ分析
• webtool_performance_test - デバイス間のパフォーマンステスト

例

# Use only basic tools (90% token reduction)
ENABLED_TOOLS=BASIC npx @bschauer/webtools-mcp-server

# Use performance tools only
npx @bschauer/webtools-mcp-server --tools=PERFORMANCE

# Use web + debugging tools
ENABLED_TOOLS=DEBUG npx @bschauer/webtools-mcp-server

# Use specific individual tools
npx @bschauer/webtools-mcp-server --tools=webtool_gethtml,webtool_readpage,webtool_screenshot

# Show all available options
npx @bschauer/webtools-mcp-server --help

# Use environment variable with any command
export ENABLED_TOOLS=WEB
npx @bschauer/webtools-mcp-server

Claude Desktop との連携

基本設定（すべてのツール）

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"]
    }
  }
}

トークンを最適化した設定

基本ツールのみ（トークンを 89％削減）

{
  "mcpServers": {
    "webtools-basic": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "BASIC"
      }
    }
  }
}

ウェブコンテンツ＋スクリーンショット

{
  "mcpServers": {
    "webtools-web": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "WEB"
      }
    }
  }
}

パフォーマンス分析のみ

{
  "mcpServers": {
    "webtools-perf": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "PERFORMANCE"
      }
    }
  }
}

ツールをカスタム選択

{
  "mcpServers": {
    "webtools-custom": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "webtool_gethtml,webtool_readpage,webtool_screenshot,webtool_debug"
      }
    }
  }
}

CLI 引数を使用（別の方法）

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest", "--tools=BASIC"]
    }
  }
}

Claude Code との連携

Claude Code では、MCP サーバーを追加するためのシンプルなコマンドラインインターフェースが提供されています。

基本インストール（すべてのツール）

# Install with all tools (default)
claude mcp add webtools -- npx -y @bschauer/webtools-mcp-server@latest

トークンを最適化したインストール

# Basic tools only (89% token reduction)
claude mcp add webtools-basic --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

# Web content + screenshots
claude mcp add webtools-web --env ENABLED_TOOLS=WEB -- npx -y @bschauer/webtools-mcp-server@latest

# Performance analysis only
claude mcp add webtools-perf --env ENABLED_TOOLS=PERFORMANCE -- npx -y @bschauer/webtools-mcp-server@latest

# Debug tools
claude mcp add webtools-debug --env ENABLED_TOOLS=DEBUG -- npx -y @bschauer/webtools-mcp-server@latest

# Custom tool selection
claude mcp add webtools-custom --env ENABLED_TOOLS=webtool_gethtml,webtool_readpage,webtool_screenshot -- npx -y @bschauer/webtools-mcp-server@latest

CLI 引数を使用（別の方法）

# Using --tools parameter instead of environment variable
claude mcp add webtools-basic -- npx -y @bschauer/webtools-mcp-server@latest --tools=BASIC
claude mcp add webtools-perf -- npx -y @bschauer/webtools-mcp-server@latest --tools=PERFORMANCE

インストールの管理

# List all MCP servers
claude mcp list

# Get details about the webtools server
claude mcp get webtools-basic

# Remove a server
claude mcp remove webtools-basic

# Check server status in Claude Code
/mcp

プロジェクト全体へのインストール（チームで共有）

# Install for the entire project team
claude mcp add webtools-basic --scope project --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

# This creates a .mcp.json file in your project root that can be committed to version control

設定

~/.mcp/webtools-mcp-server.config.json に設定ファイルを作成します。

{
  "proxy": {
    "enabled": false,
    "url": "http://your-proxy-server:port",
    "timeout": 10000
  },
  "browser": {
    "ignoreSSLErrors": false,
    "defaultViewport": {
      "width": 1920,
      "height": 1080
    }
  },
  "devices": {
    "mobile": {
      "width": 375,
      "height": 812,
      "deviceScaleFactor": 3,
      "isMobile": true,
      "hasTouch": true,
      "isLandscape": false,
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
    },
    "tablet": {
      "width": 768,
      "height": 1024,
      "deviceScaleFactor": 2,
      "isMobile": true,
      "hasTouch": true,
      "isLandscape": false,
      "userAgent": "Mozilla/5.0 (iPad; CPU OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
    },
    "desktop": {
      "width": 1920,
      "height": 1080,
      "deviceScaleFactor": 1,
      "isMobile": false,
      "hasTouch": false,
      "isLandscape": true,
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
    }
  },
  "networkConditions": {
    "Slow 3G": {
      "downloadThroughput": 500000,
      "uploadThroughput": 300000,
      "latency": 400
    },
    "Fast 3G": {
      "downloadThroughput": 1500000,
      "uploadThroughput": 750000,
      "latency": 300
    },
    "4G": {
      "downloadThroughput": 4000000,
      "uploadThroughput": 2000000,
      "latency": 100
    },
    "WiFi": {
      "downloadThroughput": 10000000,
      "uploadThroughput": 5000000,
      "latency": 20
    },
    "Fiber": {
      "downloadThroughput": 100000000,
      "uploadThroughput": 50000000,
      "latency": 5
    }
  }
}

環境変数

環境変数を使用してサーバーを設定することもできます。

• USE_PROXY：プロキシサポートを有効にします（true/false）
• PROXY_URL：プロキシサーバーの URL
• PROXY_TIMEOUT：プロキシのタイムアウト（ミリ秒）
• IGNORE_SSL_ERRORS：すべてのツールで SSL 証明書エラーをデフォルトで無視します（true/false）。DDEV などの開発環境で役立ちます。

ツールの使用例

HTML コンテンツの抽出

webtool_gethtml({
  url: "https://example.com",
  useJavaScript: true,
  useProxy: false,
  ignoreSSLErrors: false,
});

ページの読み込み（Markdown 変換）

webtool_readpage({
  url: "https://example.com",
  useJavaScript: true,
  useProxy: false,
  selector: "main",
  ignoreSSLErrors: false,
});

スクリーンショットの撮影

webtool_screenshot({
  url: "https://example.com",
  selector: ".content",
  useProxy: false,
  deviceConfig: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1,
    isMobile: false,
  },
});

デバッグコンソール

webtool_debug({
  url: "https://example.com",
  captureConsole: true,
  captureNetwork: true,
  captureErrors: true,
  captureLayoutThrashing: true, // Enable layout thrashing detection
  timeoutMs: 15000,
});

// レイアウトスラッシングの検出に重点を置く

webtool_debug({
  url: "https://example.com",
  captureConsole: false,
  captureNetwork: false,
  captureErrors: true,
  captureLayoutThrashing: true,
  timeoutMs: 15000,
});

Lighthouse によるウェブ監査

webtool_lighthouse({
  url: "https://example.com",
  categories: ["performance", "accessibility", "best-practices", "seo", "pwa"],
  device: "mobile", // or "desktop"
  ignoreSSLErrors: false,
});

// 特定のカテゴリの監査のみを実行

webtool_lighthouse({
  url: "https://example.com",
  categories: ["performance", "seo"], // Only performance and SEO
  device: "desktop",
});

高度なパフォーマンス分析

webtool_performance_trace({
  url: "https://example.com",
  timeoutMs: 15000,
  captureCPUProfile: true,
  captureNetworkActivity: true,
  captureJSProfile: true,
  captureRenderingPerformance: true,
  captureMemoryProfile: true,
  deviceConfig: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1,
    isMobile: false,
  },
});

// 特定のパフォーマンス項目に重点を置く

webtool_performance_trace({
  url: "https://example.com",
  captureRenderingPerformance: true, // Focus on layout and rendering
  captureMemoryProfile: true, // Include memory analysis
  deviceConfig: {
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
  },
});

ネットワークアクティビティ分析

webtool_network_monitor({
  url: "https://example.com",
  timeoutMs: 15000,
  waitAfterLoadMs: 2000,
  includeThirdParty: true,
  disableCache: true,
  captureHeaders: true,
  captureTimings: true,
  deviceName: "mobile", // Use predefined device
  networkConditionName: "4G", // Use predefined network condition
});

コードカバレッジ分析

webtool_coverage_analysis({
  url: "https://example.com",
  timeoutMs: 15000,
  waitAfterLoadMs: 2000,
  includeThirdParty: true,
  disableCache: true,
  deviceName: "desktop",
});

Core Web Vitals の分析

webtool_web_vitals({
  url: "https://example.com",
  timeoutMs: 15000,
  waitAfterLoadMs: 3000,
  interactWithPage: true,
  deviceName: "mobile",
  networkConditionName: "4G",
});

デバイス間およびネットワークのテスト

webtool_performance_test({
  url: "https://example.com",
  timeoutMs: 30000,
  devices: ["desktop", "mobile", "tablet"],
  networkConditions: ["WiFi", "4G", "3G"],
  tests: ["web_vitals", "network", "coverage"],
  compareResults: true,
  baselineDevice: "desktop",
  baselineNetwork: "WiFi",
  includeScreenshots: true,
});

レスポンス形式

すべてのツールは、次の形式でレスポンスを返します。

{
  "content": [
    {
      "type": "text",
      "text": "..." // Markdown formatted report
    }
  ]
}

スクリーンショットの場合：

{
  "content": [
    {
      "type": "image",
      "data": "...", // Base64 encoded PNG
      "mimeType": "image/png"
    }
  ]
}

Lighthouse 監査の場合：

{
  "content": [
    {
      "type": "text",
      "text": "..." // Markdown formatted report with audit results
    }
  ]
}

ベストプラクティス

1. 高度な分析を行う前に、基本的な HTML 取得から始めてください
2. JavaScript によるレンダリングは必要な場合にのみ使用してください（時間はかかりますが、より完全な結果が得られます）
3. 複雑なページには適切なタイムアウトを設定してください
4. 可能な場合はセレクターを使って、ページ内の特定のセクションを対象にしてください
5. 地域制限のあるコンテンツが必要な場合にのみ、プロキシサポートを有効にしてください
6. Lighthouse の監査では、パフォーマンスを改善するために必要なカテゴリのみを指定してください
7. エラーをよく確認してください。トラブルシューティングに役立つヒントが含まれていることがよくあります
8. デバイスエミュレーションを使用する場合は、正確な結果を得るために実際のデバイス仕様に合わせてください
9. 大規模な Web サイトでは、サイト全体ではなく特定のページに焦点を当ててください
10. 修正を適用する前に、デバッグツールを使って JavaScript エラーの内容を把握してください
11. パフォーマンステストでは、まず基準となるデバイスとネットワーク条件から始めてください
12. デバイス固有の問題を特定するため、異なるデバイスやネットワーク条件で結果を比較してください
13. パフォーマンステストフレームワークを使って、特定のシナリオにおける最適化の機会を特定してください
14. ユーザー体験を最も改善するため、Core Web Vitals の指標に焦点を当ててください
15. コードカバレッジ分析を使って未使用のコードを特定し、バンドルサイズを最適化してください

トラブルシューティング

よくある問題と解決策：

Chrome のインストール

• 注：Chrome は Puppeteer 経由で自動的にインストールされるようになりました。追加の手順は必要ありません
• Chrome 関連の問題が発生した場合は、npm install -g @bschauer/webtools-mcp-server でパッケージを再インストールしてください

接続の問題

• 問題：Web サイトに接続できない
• 解決策：URL の形式や Web サイトの稼働状況を確認するか、プロキシを有効にして試してください

SSL 証明書の問題

• 問題：DDEV またはローカル開発サイトで SSL 証明書エラーが発生する
• 解決策：IGNORE_SSL_ERRORS=true 環境変数を設定するか、個々のツールで ignoreSSLErrors=true パラメーターを使用してください
• 注：本番サイトでは、SSL チェックを回避するのではなく、適切な SSL 証明書設定を行ってください

JavaScript レンダリングの問題

• 問題：JavaScript によるレンダリングを使用するとページのコンテンツが欠落する
• 解決策：タイムアウトを延長し、デバッグ出力でナビゲーションエラーがないか確認してください

スクリーンショットの問題

• 問題：スクリーンショットが空白、または不完全である
• 解決策：セレクターが正しいことを確認し、ビューポートサイズを拡大して、デバッグコンソールを確認してください

Lighthouse 監査のタイムアウト

• 問題：Lighthouse の監査がタイムアウトする
• 解決策：タイムアウト設定を延長し、カテゴリを減らして、より高速な接続で試してください

プロキシ接続の失敗

• 問題：プロキシ経由で接続できない
• 解決策：プロキシ URL を確認し、プロキシ接続のタイムアウトを確認して、プロキシが動作していることを確かめてください

レイアウトスラッシング検出の問題

• 問題：レイアウトスラッシングイベントが検出されない
• 解決策：captureLayoutThrashing が true に設定されていることを確認し、timeoutMs を延長して、別のページで試してください

パフォーマンステストフレームワークの問題

• 問題：パフォーマンステストフレームワークがタイムアウトする
• 解決策：デバイスとネットワーク条件の数を減らし、タイムアウトを延長して、テストを個別に実行してください

ネットワークモニターの問題

• 問題：ネットワークモニターに不完全なデータが表示される
• 解決策：waitAfterLoadMs を延長し、captureTimings が true に設定されていることを確認して、CORS の問題がないか確認してください

コードカバレッジ分析の問題

• 問題：コードカバレッジ分析に結果が表示されない
• 解決策：ページが JavaScript を読み込むことを確認し、waitAfterLoadMs を延長して、スクリプトの読み込みエラーがないか確認してください

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

• このツールは任意の Web サイトにアクセスできます。責任を持って使用してください
• プロキシ機能は慎重に使用し、適用される法令を遵守してください
• SSL 証明書のチェックは、絶対に必要な場合を除き有効にしておいてください
• Web サイトの所有者は、自動アクセスを検知してブロックする場合があります
• 一部の Web サイトでは、利用規約によりスクレイピングが禁止されています

貢献

貢献を歓迎します！お気軽に Pull Request を送信してください。

ライセンス

MIT

作者

bschauer