Browser Use MCP Client

🚀 MCP Client for Browser

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

🎥 Demo Video

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

✨ Features

• Real-time Communication: Direct SSE connection to the MCP server.
• Interactive UI: A clean and responsive interface built with React and Tailwind CSS.
• Theme Support: Light and dark modes with system preference detection.
• Screenshot Preview: Real-time browser screenshots of MCP server responses.
• Message History: Persistent chat logs with clear message threads.
• Request Management: Cancel ongoing requests and clear chat history.
• Connection Management: Simple server connection configuration.

📋 Prerequisites

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

🚀 Quick Start

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 Examples

Basic Usage

#!/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 the .env file
load_dotenv()

# Initialize the 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 an 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, "args": args}
        )

    return "Search completed.", step_handler


@mcp.tool()
async def clear_search_history(task: str, context: Context):
    """Clear the search history."""
    # Implement the logic to clear the search history
    pass

# Other tools are similar...


if __name__ == "__main__":
    mcp.run()

📚 Documentation

• MCP Protocol: View Documentation
• Browser Usage: Learn More

This project demonstrates how to build a feature-rich MCP client using React and related technology stacks to achieve an interactive experience between the browser and AI models.