Browser Use

Browser Use предоставляет React UI для серверов Model Context Protocol (MCP). Общение в реальном времени, живые скриншоты браузера, история сообщений и многое другое! Попробуйте сейчас.

Автоматизация браузера Веб-скрапинг и сбор данных Инструменты разработчика ★ 18 GitHub (18 ★)

Клиент Browser Use MCP — это React-приложение, предназначенное для обеспечения бесшовного и интерактивного взаимодействия с серверами Model Context Protocol (MCP). Используя Server-Sent Events (SSE) для общения в реальном времени, клиент предлагает удобный интерфейс с такими функциями, как поддержка светлой/тёмной темы, предпросмотр скриншотов в реальном времени с сервера MCP, история сообщений, управление запросами и простая настройка подключения к серверу. Он упрощает взаимодействие с MCP-серверами, облегчая управление и мониторинг задач автоматизации браузера.

Ключевые возможности

01Предпросмотр скриншотов браузера в реальном времени

02Поддержка светлой и тёмной темы с определением системных предпочтений

03Интерактивный React UI с Tailwind CSS

0418 звёзд на GitHub

05Общение в реальном времени через Server-Sent Events (SSE)

06Постоянная история сообщений с группировкой по темам

Browser-use MCP Client

A modern React application that provides a user-friendly interface for interacting with Model Context Protocol (MCP) servers through Server-Sent Events (SSE).

🎥 Demo

demo.mp4

🚀 Features

Real-time Communication: Direct SSE connection to MCP servers
Interactive UI: Clean and responsive interface built with React and Tailwind CSS
Theme Support: Light and dark mode with system preference detection
Screenshot Preview: Live browser screenshots from MCP server responses
Message History: Persistent chat history with clear message threading
Request Management: Cancel in-progress requests and clear chat history
Connection Management: Easy server connection configuration

📋 Prerequisites

Node.js (v18 or later)
pnpm (recommended package manager)
A running MCP server for connection
Python 3.8+ (for running the example server)

🚀 Getting Started

Clone the Repository

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

Install Dependencies
```
pnpm install
```
Start the Development Server
```
pnpm dev
```
Start the Proxy Server
```
./proxy/index.js
```

The application will be available at http://localhost:5173

💻 Usage

🤖 Example MCP Server

Here's an example of a Python-based MCP server that uses browser automation:

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

🤝 Contributing

Fork the repository
Create a feature branch
Commit your changes
Push to the branch
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Browser Use MCP Client

Современный React-интерфейс для взаимодействия с MCP-серверами через Server-Sent Events (SSE). Предоставляет удобную панель управления с визуализацией скриншотов браузера и историей сообщений.

Возможности

Реальное время — прямое SSE-соединение с MCP-сервером.
Удобный интерфейс — на React + Tailwind CSS, с тёмной и светлой темой (автоопределение).
Скриншоты — просмотр живых снимков экрана браузера из ответов сервера.
История — сохраняется с группировкой по сессиям.
Управление запросами — отмена текущего запроса, очистка истории.
Настройка подключения — простой ввод адреса сервера.

Требования

Node.js v18+
pnpm (рекомендуемый менеджер пакетов)
Python 3.8+ (для запуска примера MCP-сервера)
Запущенный MCP-сервер для подключения

Установка и запуск

# 1. Клонируйте репозиторий
git clone <repository-url>
cd browser-use-mcp-client

# 2. Установите зависимости
pnpm install

# 3. Запустите прокси-сервер
./proxy/index.js

# 4. Запустите клиент
pnpm dev

После запуска откройте в браузере http://localhost:5173.

Пример MCP-сервера (Python)

Для работы с автоматизацией браузера предоставляется пример сервера на FastMCP. Он использует библиотеки browser-use и langchain-google-genai.

Установка зависимостей сервера:

pip install -r requirements.txt

Файл .env:

GOOGLE_API_KEY=<ваш ключ Gemini>

Запуск сервера:

python server.py

Код сервера реализует два инструмента:

perform_search(task) — запускает агента браузера для выполнения задачи.
stop_search() — останавливает текущего агента.

При каждом шаге агента клиент получает скриншот и текст результата через SSE.

Важные моменты

Для работы с Chrome требуется указать путь к исполняемому файлу с флагом --remote-debugging-port=9222 (см. chrome_instance_path в примере).
По умолчанию браузер запускается в безголовом режиме (headless=True).
Модель по умолчанию — gemini-2.0-flash; её можно заменить на другую из Google или OpenAI, изменив ChatGoogleGenerativeAI.
Транспорт MCP-сервера обязательно должен быть sse (не stdio).

Участие в разработке

Форкните репозиторий.
Создайте ветку для новой функции.
Закоммитьте изменения.
Отправьте пулл-реквест.

Лицензия

Проект распространяется по лицензии MIT. Подробнее — в файле LICENSE.

Источник: https://mcpmarket.com/server/browser-use-14