Browser-use-claude-mcp

Browser-use-claude-mcp

Claude や Gemini 2.5 などの AI モデルが、自然言語を使ってウェブを閲覧できるようにするブラウザー自動化 MCP サーバーです。

概要

このプロジェクトは、AI モデルにブラウザー自動化機能を提供する Model Context Protocol（MCP）サーバーを実装しています。AI アシスタントは、自然言語のコマンドを使ってウェブを閲覧し、ウェブサイトを操作し、情報を抽出できます。

主な機能

🌐 ブラウザー自動化機能

• ブラウザーの完全な自動化（ページ移動、フォーム入力、クリックなど）
• ウェブ検索機能
• 視覚的な理解に役立つスクリーンショットの撮影
• コンテンツの抽出と分析

🤖 AI 機能

• 複数の AI プロバイダーに対応：
  • Google Gemini 2.5（主な対象）
  • Anthropic Claude
  • OpenAI
• 画像分析（ビジョン）機能
• AI を活用したコンテンツ分析

🔧 技術的な機能

• 高い信頼性を実現する TypeScript 製
• 関心事を明確に分離したモジュール型アーキテクチャ
• 包括的なログ記録とエラー処理
• 環境変数による簡単な設定

利用可能なツール

ツール名	説明
browse_webpage	URL に移動して、そのコンテンツを抽出します
search_web	ウェブ検索を実行し、結果を返します
take_screenshot	現在のページのスクリーンショットを撮影します
click_element	テキストまたはセレクターで指定した要素をクリックします
fill_form	指定した値をフォームフィールドに入力します
extract_content	ウェブページから特定のコンテンツを抽出します
analyze_content	AI を活用してウェブページのコンテンツを分析します

はじめに

インストールとセットアップの詳しい手順については、INSTALL.md を参照してください。

クイックスタート

1. リポジトリをクローンします

   git clone https://github.com/jasondsmith72/Browser-use-claude-mcp.git
   cd Browser-use-claude-mcp
   

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

   npm install
   

3. .env ファイルを作成します（テンプレートとして .env.example を使用してください）

   cp .env.example .env
   

4. プロジェクトをビルドします

   npm run build
   

5. サーバーを起動します

   npm start
   

設定

サーバーは、.env ファイル内の環境変数で設定できます：

# Browser configuration
CHROME_PATH=
CHROME_USER_DATA=
CHROME_DEBUGGING_PORT=9222

# AI provider (GEMINI, ANTHROPIC, OPENAI)
MCP_MODEL_PROVIDER=GEMINI

# API keys (use the one for your chosen provider)
GOOGLE_API_KEY=your_google_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here
OPENAI_API_KEY=your_openai_api_key_here

Claude Desktop での使用

1. Claude Desktop の設定ファイルを確認します：

   • Windows：%APPDATA%/Claude/claude_desktop_config.json
   • MacOS：~/Library/Application Support/Claude/claude_desktop_config.json

2. この MCP サーバーを設定に追加します：

   {
     "mcpServers": {
       "browser-use-claude-mcp": {
         "command": "node",
         "args": [
           "/path/to/Browser-use-claude-mcp/dist/index.js"
         ],
         "env": {
           "CHROME_PATH": "",
           "CHROME_USER_DATA": "",
           "MCP_MODEL_PROVIDER": "GEMINI",
           "GOOGLE_API_KEY": "your_google_api_key_here"
         }
       }
     }
   }
   

3. 変更を反映するため、Claude Desktop を再起動します。

使用例

基本的なウェブ閲覧

browse_webpage(url="https://example.com")

ウェブ検索

search_web(query="best programming languages 2025")

フォームへの入力

fill_form(fields={
  "name": "John Doe",
  "email": "[email protected]",
  "message": "Hello world!"
}, submit=true)

AI によるコンテンツ分析

analyze_content(
  url="https://en.wikipedia.org/wiki/Artificial_intelligence",
  instructions="Summarize the key developments in AI in the last decade"
)

開発

# Run in development mode
npm run dev

# Run tests
npm test

# Lint code
npm run lint

ライセンス

MIT

クレジット

このプロジェクトは、browser-use やその他の MCP サーバー実装の成果を基盤としています。