Browser-use MCP Client

Browser-use MCP 客户端

一个现代化的 React 应用，通过服务器发送事件（SSE）提供友好的界面，用于与模型上下文协议（MCP）服务交互。

🎥 演示

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

🚀 功能

• 实时通信：直接通过 SSE 连接到 MCP 服务
• 交互式界面：使用 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. Fork 仓库
2. 创建功能分支
3. 提交更改
4. 将更改推送到分支
5. 创建 Pull Request

📄 许可证

本项目根据 MIT 许可证授权，详情请参阅 LICENSE 文件。