Browser Use MCP Client

🚀 瀏覽器使用的 MCP 客戶端

這是一個現代的 React 應用程序，藉助 Server-Sent Events (SSE) 技術，為用戶提供了友好的界面，方便與 Model Context Protocol (MCP) 服務器進行交互。

🚀 快速開始

本應用程序能讓你輕鬆地與 MCP 服務器進行交互。以下是啟動應用程序的步驟：

1. 克隆倉庫

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

2. 安裝依賴項

   pnpm install
   

3. 啟動開發服務器

   pnpm dev
   

4. 啟動代理服務器

   ./proxy/index.js
   

應用程序啟動後，你可以通過 http://localhost:5173 進行訪問。

✨ 主要特性

• 即時通信：通過直接連接到 MCP 服務器的 SSE 連接，實現即時數據交互。
• 交互式 UI：採用 React 和 Tailwind CSS 構建，界面乾淨且響應式，操作體驗流暢。
• 主題支持：支持淺色和深色模式，並能自動檢測系統偏好，為你提供舒適的視覺體驗。
• 截圖預覽：可即時查看 MCP 服務器響應的瀏覽器截圖，直觀瞭解交互結果。
• 消息歷史：持久保存聊天記錄，並帶有清晰的消息線程，方便你回顧和查看歷史對話。
• 請求管理：可以取消正在進行的請求，還能清除聊天曆史，保持界面簡潔。
• 連接管理：提供簡單的服務器連接配置，方便你快速連接到不同的 MCP 服務器。

🎥 演示視頻

點擊下面的鏈接觀看演示視頻： https://github.com/user-attachments/assets/52ab11ad-741f-4506-99ad-9f1972a3aad1

📦 安裝指南

先決條件

在安裝本應用程序之前，請確保你已經具備以下環境：

• Node.js（v18 或更高版本）
• pnpm（推薦使用的包管理器）
• 運行中的 MCP 服務器以供連接
• Python 3.8+（用於運行示例服務器）

💻 使用示例

基礎用法

以下是一個使用瀏覽器自動化功能的 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

# 從 .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 模型的交互式體驗。