JinDaGe - browser-use-mcp-client MCP Details

article

README

🚀 浏览器使用的 MCP 客户端

这是一个现代的 React 应用程序，借助 Server-Sent Events (SSE) 技术，为用户提供了友好的界面，方便与 Model Context Protocol (MCP) 服务器进行交互。

🚀 快速开始

本应用程序能让你轻松地与 MCP 服务器进行交互。以下是启动应用程序的步骤：

克隆仓库

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

安装依赖项
```
pnpm install
```
启动开发服务器
```
pnpm dev
```
启动代理服务器
```
./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 模型的交互式体验。

browser-use-mcp-client