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

🚀 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:

```python
#!/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