MCP Browser Server

AutoProbeMCP - エージェント向けブラウザー

Playwright を使用してブラウザー自動化機能を提供する Model Context Protocol（MCP）サーバーです。 このサーバーにより、AI アシスタントは標準化されたインターフェースを介してウェブページを操作できます。

以下を含む AI アシスタントを使ったウェブ自動化、テスト、デバッグのワークフローに最適です。

• Chat.fans エージェント - VS Code でのウェブ操作機能を AI エージェントに提供します
• GitHub Copilot Chat - ブラウザー自動化で開発ワークフローを強化します
• あらゆる MCP 対応 AI アシスタント - AI ツール向けの汎用ブラウザー自動化

機能

• マルチブラウザー対応：Chromium、Firefox、WebKit
• 包括的な自動化：移動、クリック、入力、スクリーンショット撮影など
• JavaScript 実行：ブラウザーのコンテキストでカスタムスクリプトを実行
• 要素の操作：要素の表示を待機、テキストコンテンツの取得、フォームの操作
• スクリーンショット機能：ページ全体またはビューポートのスクリーンショットを撮影
• 型安全：TypeScript と Zod による実行時検証を使用して構築

インストール

npm install
npm run build

Playwright のブラウザーがインストールされていることを確認してください。

npx playwright install

システム依存関係をインストールする場合（Linux）：

sudo npx playwright install-deps

使用方法

VS Code との統合

settings.json またはワークスペース設定に追加して、VS Code で MCP サーバーを設定します。

"mcp": {
    "servers": {
      "browser-automation": {
        "command": "node",
        "args": [
          "/home/yourUserName/mcp-browser-server/build/index.js"
        ],
        "env": {}
      }
    }
  }

設定が完了すると、Chat.fans エージェントと GitHub Copilot Chat は、ウェブテスト、スクレイピング、自動化タスクにブラウザー自動化ツールを使用できます。

利用可能な VS Code タスク

• ビルド：Ctrl+Shift+P → "Tasks: Run Task" → "build"
• 開発モード：Ctrl+Shift+P → "Tasks: Run Task" → "dev"
• MCP サーバーのテスト：Ctrl+Shift+P → "Tasks: Run Task" → "test-mcp-server"

利用可能なツール

1. launch_browser - 新しいブラウザーインスタンスを起動
2. navigate - 指定した URL に移動
3. click_element - ページ上の要素をクリック
4. type_text - フォームフィールドにテキストを入力
5. screenshot - ページのスクリーンショットを撮影
6. get_element_text - 要素からテキストを抽出
7. wait_for_element - 要素の表示または非表示を待機
8. evaluate_javascript - カスタム JavaScript を実行
9. get_console_logs - ブラウザーのコンソールログを取得（log、info、warn、error、debug）
10. analyze_screenshot - Gemma3 を使用した AI によるスクリーンショット分析（Ollama が必要）
11. get_page_info - 現在のページ情報を取得
12. close_browser - ブラウザーインスタンスを閉じる
13. scroll - 指定した方向（上／下／左／右）にページをスクロール
14. check_scrollability - ページが指定した方向にスクロール可能か確認

例：ウェブアプリケーションのテスト

// Launch browser in headed mode for visual debugging
await launch_browser({ browser: "chromium", headless: false });

// Navigate to login page
await navigate({ url: "http://localhost:3000/login" });

// Fill in credentials
await type_text({ selector: "input[type='email']", text: "[email protected]" });
await type_text({ selector: "input[type='password']", text: "password123" });

// Submit form
await click_element({ selector: "button[type='submit']" });

// Wait for successful login
await wait_for_element({ selector: ".dashboard", timeout: 10000 });

// Check for any console errors during login
await get_console_logs({ level: "error" });

// Take screenshot of dashboard
await screenshot({ fullPage: true, path: "dashboard.png" });

// Get all console logs for debugging
await get_console_logs();

// Scroll down to see more content
await scroll({ direction: "down", pixels: 500, behavior: "smooth" });

// Check if page can be scrolled vertically
await check_scrollability({ direction: "vertical" });

// Scroll back to top
await scroll({ direction: "up", pixels: 500 });

ページのスクロールとナビゲーション

MCP Browser Server には、長いページの移動やスクロール機能の確認に使える包括的なスクロールツールが含まれています。

スクロールツール

scroll ツールを使うと、細かく制御しながらページを任意の方向にスクロールできます。

// Scroll down by default amount (100px)
await scroll();

// Scroll in specific directions with custom distances
await scroll({ direction: "down", pixels: 300, behavior: "smooth" });
await scroll({ direction: "up", pixels: 200, behavior: "auto" });
await scroll({ direction: "left", pixels: 150 });
await scroll({ direction: "right", pixels: 150 });

// Smooth scrolling for better user experience
await scroll({ direction: "down", pixels: 500, behavior: "smooth" });

パラメーター：

• direction："up"、"down"、"left"、"right"（デフォルト："down"）
• pixels：スクロールするピクセル数（デフォルト：100）
• behavior："auto" または "smooth"（デフォルト："auto"）

スクロール可能か確認するツール

check_scrollability ツールは、ページを指定した方向にスクロールできるかどうかを判定します。

// Check both vertical and horizontal scrollability
await check_scrollability({ direction: "both" });

// Check only vertical scrolling
await check_scrollability({ direction: "vertical" });

// Check only horizontal scrolling  
await check_scrollability({ direction: "horizontal" });

応答に含まれる内容：

• 現在のスクロール位置
• 最大スクロール距離
• 各方向にスクロール可能かどうか
• 詳細な位置情報

AI によるスクリーンショット分析

analyze_screenshot ツールは、Ollama 経由でローカルの Gemma3 モデルを使用し、ウェブページを AI で分析します。この機能では、ページに表示されている内容の説明、ページ構造の分析、コンテキストに基づく特定の要素の検索ができます。

前提条件

1. Ollama をインストール：ollama.ai からダウンロードします
2. Gemma3 モデルをインストール：

   ollama pull gemma3:4b
   

3. Ollama サービスを起動：

   ollama serve
   

使用例

基本的なスクリーンショット分析

// Take and analyze a screenshot with AI
await analyze_screenshot({ 
  fullPage: true,
  model: "gemma3:4b"
});

詳細な構造分析

// Get detailed analysis of page structure
await analyze_screenshot({ 
  detailed: true,
  pretext: "Focus on navigation elements and form fields"
});

コンテキストに応じた分析

// Look for specific elements or issues
await analyze_screenshot({ 
  pretext: "Check if there are any error messages or broken layouts",
  path: "error-check.png"
});

パラメーター

• fullPage（boolean）：スクロール可能なページ全体をキャプチャするか、ビューポートのみをキャプチャするか
• path（string）：スクリーンショットを保存する任意のファイルパス
• pretext（string）：AI に追加のコンテキストや具体的な指示を提供します
• model（string）：使用する AI モデル（デフォルト："gemma3:4b"）
• detailed（boolean）：詳細な構造分析を要求します

対応モデル

• gemma3:4b（デフォルト。速度と品質のバランスに優れています）
• Ollama のインストール環境で利用可能な、その他のビジョン対応モデル

開発とテスト

クイックセットアップ

# One-command setup (installs dependencies, browsers, and builds)
npm run setup

# Or step by step:
npm install
npx playwright install
npm run build

開発コマンド

# Build the project
npm run build

# Run in development mode
npm run dev

# Start the server
npm run start

# Development helper (shows all available commands)
npm run dev-helper help

テスト

プロジェクトには、tests/ ディレクトリに包括的なテストが含まれています。

# Run basic communication test
npm run test

# Run browser automation demo
npm run test:demo

# Run AI analysis test (requires Ollama)
npm run test:ai-simple

# Check system status
npm run test:status

# Run all tests
npm run test:all

開発ヘルパー

一般的なタスクには、開発ヘルパーを使用してください。

# Show all available commands
npm run dev-helper help

# Quick setup from scratch
npm run dev-helper setup

# Run comprehensive tests
npm run dev-helper test

# Clean generated files
npm run dev-helper clean

テストの詳細については、tests/README.md を参照してください。

プロジェクト構成

mcp-browser-server/
├── src/                 # TypeScript source code
│   └── index.ts        # Main MCP server implementation
├── build/              # Compiled JavaScript output
├── tests/              # Test scripts and documentation
│   ├── README.md       # Testing documentation
│   ├── simple-test.mjs # Basic communication test
│   ├── demo-test.mjs   # Browser automation demo
│   └── *.mjs          # Additional test files
├── screenshots/        # Generated screenshots from tests
├── package.json        # Project configuration
└── README.md          # This file

ライセンス

デュアルライセンス：

• 個人利用：個人利用、教育目的、非商用利用は無料です
• 商用利用：別途、商用ライセンスが必要です

詳細な条件については、LICENSE を参照してください。商用ライセンスに関するお問い合わせは、当社までご連絡ください。