drio
Open app

Browser-use MCP Client

Source

A MCP client for browser-use

Catalog onlyCatalog onlySTDIO

Overview

Browser-use MCP Client is a modern React application designed to provide a user-friendly interface for interacting with Model Context Protocol (MCP) servers through Server-Sent Events (SSE).

To use the Browser-use MCP Client, clone the repository, install the dependencies, and start the development server. Ensure you have a running MCP server for connection.

  • Real-time communication with direct SSE connection to MCP servers. - Interactive UI built with React and Tailwind CSS. - Theme support for light and dark modes. - Live browser screenshot previews from MCP server responses. - Persistent chat history with clear message threading. - Request management features including canceling in-progress requests. - Easy server connection configuration.
  1. Interacting with MCP servers for real-time data.
  2. Managing browser automation tasks through a user-friendly interface.
  3. Monitoring and visualizing server responses in real-time.

Add to your AI client

Use these steps to connect Browser-use MCP Client in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "browser-use-mcp-client-linzo99": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-browser-use-mcp-client-linzo99"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "browser-use-mcp-client-linzo99": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-browser-use-mcp-client-linzo99"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "browser-use-mcp-client-linzo99": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-browser-use-mcp-client-linzo99"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "browser-use-mcp-client-linzo99": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-browser-use-mcp-client-linzo99"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "browser-use-mcp-client-linzo99": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-browser-use-mcp-client-linzo99"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "browser-use-mcp-client-linzo99": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-browser-use-mcp-client-linzo99"
      ]
    }
  }
}

FAQ

What are the prerequisites for using the Browser-use MCP Client?

You need Node.js (v18 or later), pnpm, and a running MCP server.

Can I customize the UI?

Yes! The application supports theme customization.

Is there a demo available?

Yes! A demo is available on the project's GitHub page.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2280,"uuid":"2d8e66fb-2fd9-4301-baea-45c2561d4ddf","name":"browser-use-mcp-client","title":"Browser-use MCP Client","description":"A MCP client for browser-use","avatar_url":"https://avatars.githubusercontent.com/u/42393658?v=4","created_at":"2025-03-09T07:20:40.641+00:00","updated_at":"2025-03-12T10:21:15.154+00:00","status":"created","author_name":"Linzo99","author_avatar_url":"https://avatars.githubusercontent.com/u/42393658?v=4","tags":"automation,mcp,mcp-server,mcp-client,browser-use","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/Linzo99/browser-use-mcp-client","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"7\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-06 17:20:40\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools