Browser Use Claude MCP

🚀 ブラウザでのClaude MCPの使用

このプロジェクトは、ClaudeやGemini 2.5などのAIモデルに対して、自然言語指令によるウェブブラウジング機能を提供するブラウザ自動化のMCPサーバーです。

🚀 クイックスタート

このプロジェクトの詳細なインストールと設定手順については、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

✨ 主な機能

🌐 ブラウザ自動化機能

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

🤖 AI関連機能

• 複数のAIプロバイダーをサポート：
  • Google Gemini 2.5（主にサポート）
  • Anthropic Claude
  • OpenAI
• 画像分析（視覚処理）
• AIによるコンテンツ分析

🔧 技術的特性

• 信頼性を確保するためにTypeScriptで記述されています。
• モジュール化されたアーキテクチャで、明確な責務分離が行われています。
• 包括的なログ記録とエラー処理が実装されています。
• 環境変数による設定が簡単に行えます。

📦 インストール

利用可能なツール

設定

.env.exampleファイルを参考に、環境変数を使用して設定を行います。例えば：

• CHROME_PATH: Chromeブラウザのパスを指定します。
• HEADLESS_CHROME: ヘッドレスモードを有効にするかどうかを指定します（true/false）。

Claude Desktopでの使用方法

Claude Desktopでこのプロジェクトを使用するには、以下の手順に従ってください。

1. 通常~/.config/claude/settings.jsonにある設定ファイルを開きます。
2. MCPサーバーの設定を追加します。

{
  "mcpServers": [
    {
      "name": "Browser Use Claude",
      "url": "http://localhost:3000"
    }
  ]
}

3. Claude Desktopを起動し、新しく追加したMCPサーバーを選択します。

💻 使用例

ウェブページの閲覧

// 例：Googleにアクセスする
await browserUseClaude.browseWeb('https://www.google.com');

検索機能

// 例：「人工知能」を検索する
await browserUseClaude.searchWeb('人工知能');

開発とテスト

1. 開発モードで実行します。

npm run dev

2. テストを実行します。

npm test

3. Linterを実行してコードスタイルをチェックします。

npm run lint

📄 ライセンス

このプロジェクトはMIT Licenseの下で公開されています。

謝辞

このプロジェクトが実現できたのは、コミュニティとオープンソースプロジェクトの貢献のおかげです。ここに感謝の意を表します。