browser-use-mcp-client
A MCP client for browser-use
Documentation
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-client2. Install Dependencies
pnpm install3. Start the Development Server
pnpm dev4. Start the Proxy Server
./proxy/index.jsThe 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.
Frequently asked questions
What is browser-use-mcp-client?
browser-use-mcp-client is A MCP client for browser-use
How do I install browser-use-mcp-client?
Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.
Is browser-use-mcp-client open source?
Yes โ it is hosted on GitHub at https://github.com/Linzo99/browser-use-mcp-client and has 38 stars.
Related MCP tools
A Unified MCP Server Management App TypeScript-based implementation. Trusted by 800+ developers. Trusted by 800+ developers.
AWS MCP Servers โ helping you get the most out of AWS, wherever you use MCP. Python-based implementation. Trusted by 6900+ developers.
ๅผ็ๅณ็จ็ไผ้ ็ฎก็mcpๆๅก | ็ปๅAgentๆกๆถ | ไฝ่ ๅฌๅ | ๅทฒๅๅธpypi | Vue้กต้ขdemo Python-based implementation.
A MCP for Claude Desktop / Claude Code / Windsurf / Cursor to build n8n workflows for you
AI Agents & MCPs & AI Workflow Automation โข (~400 MCP servers for AI agents) โข AI Automation / AI Agent with MCPs โข AI Workflows & AI Agents โข MCPs for AI Ag...
Mcp-use is the easiest way to interact with mcp servers with custom agents TypeScript-based implementation. Trusted by 8100+ developers.
Run your own MCP server? See who uses it and what to fix.
Measure it with TrackMCP