Browser Use MCP Client

🚀 ブラウザで使用する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 で利用できます。

💻 使用例

基本的な使用法

#!/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

# 从 .env 文件加载环境变量
load_dotenv()

# 初始化 FastMCP 服务器
mcp = FastMCP("browser-use")

浏览器 = 浏览器(
    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):
    """在后台执行实际搜索。"""
    async def step_handler(state, *args):
        如果 len(args) 不等于 2:
            返回
        await context.session.send_log_message(
            level="info",
            data={"screenshot": state, "args": args}
        )

    return "Search completed."，step_handler


@mcp.tool()
async def clear_search_history(task: str, context: Context):
    """清除搜索历史。"""
    # 实现清空搜索历史的逻辑
    pass

# 其他工具类似...


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

📚 ドキュメント

• MCPプロトコル：ドキュメントを参照
• Browserの使用方法：詳細を確認

このプロジェクトは、Reactと関連する技術スタックを用いて、機能豊富なMCPクライアントを構築し、ブラウザとAIモデルのインタラクティブなエクスペリエンスを実現する方法を示しています。