Browser-use MCP Client

Browser-use MCP クライアント

Server-Sent Events（SSE）を通じて Model Context Protocol（MCP）サーバーとやり取りするための、使いやすいインターフェースを提供する最新の React アプリケーションです。

🎥 デモ

https://github.com/user-attachments/assets/52ab11ad-741f-4506-99ad-9f1972a3aad1

🚀 機能

• リアルタイム通信：MCP サーバーへの直接 SSE 接続
• インタラクティブな UI：React と Tailwind CSS で構築された、すっきりとしたレスポンシブなインターフェース
• テーマサポート：システム設定の検出機能を備えたライトモードとダークモード
• スクリーンショットプレビュー：MCP サーバーの応答からブラウザーのスクリーンショットをリアルタイム表示
• メッセージ履歴：メッセージのスレッドが明確な、永続的なチャット履歴
• リクエスト管理：処理中のリクエストのキャンセルとチャット履歴の消去
• 接続管理：サーバー接続を簡単に設定

📋 前提条件

• Node.js（v18 以降）
• pnpm（推奨パッケージマネージャー）
• 接続先として稼働中の MCP サーバー
• Python 3.8 以降（サンプルサーバーの実行用）

🚀 はじめに

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

   git clone <repository-url>
   cd browser-use-mcp-client
   

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

   pnpm install
   

3. 開発サーバーを起動する

   pnpm dev
   

4. プロキシサーバーを起動する

   ./proxy/index.js
   

アプリケーションは http://localhost:5173 で利用できます。

💻 使い方

🤖 MCP サーバーの例

以下は、ブラウザー自動化を使用する Python ベースの MCP サーバーの例です。

#!/usr/bin/env python3
import asyncio
from dotenv import load_dotenv
from typing import Awaitable, Callable
from mcp.server.fastmcp import FastMCP, Context
from browser_use import Agent, Browser, BrowserConfig
from langchain_google_genai import ChatGoogleGenerativeAI

# Load environment variables from .env file
load_dotenv()

# Initialize FastMCP server
mcp = FastMCP("browser-use")

browser = Browser(
    config=BrowserConfig(
        chrome_instance_path="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222",
        headless=True
    )
)

llm = ChatGoogleGenerativeAI(model="gemini-2.0-flash")
agent = None


@mcp.tool()
async def perform_search(task: str, context: Context):
    """Perform the actual search in the background."""
    async def step_handler(state, *args):
        if len(args) != 2:
            return
        await context.session.send_log_message(
            level="info",
            data={"screenshot": state.screenshot, "result": args[0]}
        )

    asyncio.create_task(
        run_browser_agent(task=task, on_step=step_handler)
    )
    return "Processing Request"


@mcp.tool()
async def stop_search(*, context: Context):
    """Stop a running browser agent search by task ID."""
    if agent is not None:
        await agent.stop()
    return "Running Agent stopped"


async def run_browser_agent(task: str, on_step: Callable[[], Awaitable[None]]):
    """Run the browser-use agent with the specified task."""
    global agent
    try:
        agent = Agent(
            task=task,
            browser=browser,
            llm=llm,
            register_new_step_callback=on_step,
            register_done_callback=on_step,
        )

        await agent.run()
    except asyncio.CancelledError:
        return "Task was cancelled"

    except Exception as e:
        return f"Error during execution: {str(e)}"
    finally:
        await browser.close()

if __name__ == "__main__":
    mcp.run(transport="sse")

🤝 貢献

1. リポジトリをフォークする
2. 機能ブランチを作成する
3. 変更をコミットする
4. ブランチにプッシュする
5. プルリクエストを作成する

📄 ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細は LICENSE ファイルをご覧ください。