Современное приложение React, которое обеспечивает удобный интерфейс для взаимодействия с серверами протокола Model Context Protocol (MCP) через события Server-Sent (SSE).

Демо

[[Т0]]

Feature Особенности

• Коммуникация в реальном времени: Прямое соединение SSE с серверами MCP Интерактивный интерфейс: Чистый и отзывчивый интерфейс, построенный с помощью React и Tailwind CSS ** Тематическая поддержка**: светлый и темный режим с системой обнаружения предпочтений Screenshot Preview: Живые скриншоты браузера из ответов MCP-сервера История сообщений: постоянная история чата с четким потоком сообщений Управление запросами: Отмените запросы и четкую историю чата Управление связью: Легкая конфигурация серверного соединения

Предпосылки

Node.js (v18 или более поздняя версия)

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

Начало работы

1. Клон Репозитория

2. ** Установить зависимости**

3. ** Запуск сервера разработки**

4. ** Запустите прокси-сервер**

Заявка будет доступна по адресу http://localhost:5173

Использование

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

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

🚀 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

1. Clone the Repository

   git clone 
   cd browser-use-mcp-client
   

2. Install Dependencies

   pnpm install
   

3. Start the Development Server

   pnpm dev
   

4. 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."""