browser-use-mcp-client

MCP.Pizza Chef: Linzo99

browser-use-mcp-client is a modern React application designed as a Model Context Protocol (MCP) client. It provides a user-friendly, interactive interface for real-time communication with MCP servers via Server-Sent Events (SSE). Featuring a responsive UI built with React and Tailwind CSS, it supports light/dark themes, live screenshot previews, persistent message history, and request management. This client simplifies connecting to and interacting with MCP servers, making it ideal for developers building AI-enhanced workflows and agents.

Use This MCP client To

Connect to MCP servers using real-time Server-Sent Events View live browser screenshots from MCP server responses Manage and cancel in-progress MCP requests Maintain persistent chat history with message threading Switch between light and dark UI themes automatically Configure and manage MCP server connections easily

README

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

  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.

browser-use-mcp-client FAQ

How do I connect browser-use-mcp-client to an MCP server?
You configure the server URL in the client interface and establish a real-time SSE connection to the MCP server for communication.
What technologies is browser-use-mcp-client built with?
It is built using React for the UI and Tailwind CSS for styling, ensuring a responsive and modern interface.
Can I cancel requests once they are sent through browser-use-mcp-client?
Yes, the client supports canceling in-progress requests to manage communication efficiently.
Does browser-use-mcp-client support theme customization?
Yes, it supports light and dark modes with automatic system preference detection.
Is message history preserved in browser-use-mcp-client?
Yes, it maintains persistent chat history with clear message threading for better context.
What are the prerequisites for running browser-use-mcp-client?
You need Node.js v18 or later, pnpm package manager, and a running MCP server to connect to.
Can browser-use-mcp-client display live screenshots from MCP server responses?
Yes, it features live browser screenshot previews based on MCP server data.
How does browser-use-mcp-client handle server connection management?
It provides an easy-to-use interface for configuring and managing MCP server connections.