What is Browser Use Mcp Client

The browser-use-mcp-client is a modern React application designed to provide a user-friendly interface for interacting with Model Context Protocol (MCP) servers using Server-Sent Events (SSE).

Use cases

Use cases include live chat systems, collaborative document editing, real-time notifications, and any application that benefits from instant updates from an MCP server.

How to use

To use the browser-use-mcp-client, clone the repository, install dependencies using pnpm, and start the development server. Then, run the proxy server to connect to the MCP server.

Key features

Key features include real-time communication via SSE, an interactive UI built with React and Tailwind CSS, theme support, live screenshot previews, persistent message history, request management, and easy server connection configuration.

Where to use

The browser-use-mcp-client can be used in web applications that require real-time data communication, such as chat applications, collaborative tools, and monitoring dashboards.

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 <repository-url>
   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."""
    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

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

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