mare browser MCP

mare浏览器mcp

一个精简的、LLM优先的浏览器自动化MCP服务器。为Claude（或任何MCP客户端）提供一个真正的Chromium浏览器，用于导航、交互和调试web应用程序，而无需原始Playwright API的开销。

免费使用。 如果这能节省你的时间， 请我喝杯咖啡 ☕

______________________________________________________________________

安装（推荐）

先决条件： Node.js 18+，pnpm

git clone https://github.com/emadklenka/mare_browser_mcp
cd mare_browser_mcp
pnpm install
npx playwright install chromium

这是运行服务器的最快方法——无需注册表查找即可立即启动。

______________________________________________________________________

替代安装

全局安装 --没有克隆，仍然很快：

pnpm add -g mare-browser-mcp
npx playwright install chromium

______________________________________________________________________

使用克劳德代码注册

如果你克隆了仓库，安装脚本会为你完成：

pnpm run setup

就是这样。脚本会自动检测正确的路径，并使用Claude Code注册MCP。重新启动Claude Code，浏览器工具就准备好了。

手动配置 --添加到 ~/.claude.json 在...之下 mcpServers:

{
  "mcpServers": {
    "mare-browser": {
      "command": "node",
      "args": ["/absolute/path/to/mare_browser_mcp/src/index.js"],
      "env": { "HEADLESS": "false" }
    }
  }
}

如果全局安装：

{
  "mcpServers": {
    "mare-browser": {
      "command": "mare-browser-mcp",
      "env": { "HEADLESS": "false" }
    }
  }
}

______________________________________________________________________

使用OpenCode注册

将此添加到 ~/.config/opencode/opencode.json （全球）或 opencode.json （项目根）：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mare_browser_mcp": {
      "type": "local",
      "command": [
        "node",
        "/absolute/path/to/mare_browser_mcp/src/index.js"
      ]
    }
  }
}

如果全局安装：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mare_browser_mcp": {
      "type": "local",
      "command": ["mare-browser-mcp"]
    }
  }
}

______________________________________________________________________

工具

browser_navigate(url, clear_logs?)

导航到URL.Pass clear_logs: true 启动新任务以清除过时的控制台/网络/对话历史记录时。

browser_act(commands[])

在一次调用中运行一系列操作。支持的操作：

browser_debug()

当事情出错时，从这里开始。 在一次调用中返回：

• 当前URL和页面标题
• 控制台日志（可按类型筛选： error, warning, log, pageerror)
• 网络请求，包括：方法、URL、查询参数、请求正文、请求头（身份验证掩码）、状态代码、响应正文（JSON）和 duration_ms 时机
• 对话历史记录（警报/确认/提示-自动接受，文本捕获）

过滤器 url_filter, method_filter, console_types，或 last_n.

browser_query(selector, all?, fields?, visible_only?, limit?, count_only?)

无需截图即可读取DOM。通过CSS选择器查询任何元素。

browser_eval(code)

安全舱口 对于其他工具未涵盖的任何内容：

• 读取计算样式： getComputedStyle(el).backgroundColor
• 在不清除的情况下将文本附加到输入中
• 逐个字符键入以进行自动补全
• 通过手动DOM事件拖放
• 呼叫 fetch() 直接访问API
• 读取JS应用程序状态(window.__store__等等）
• 检查CSS可见性(display, opacity, visibility)

browser_scroll(direction?, pixels?, selector?, container?)

三种模式：

• 页面滚动： direction: "down", pixels: 500
• 滚动查看： selector: ".my-element"
• 在容器内滚动： container: ".ag-body-viewport", direction: "down", pixels: 300 --用于可滚动的div、网格视口、聊天面板

browser_wait_for_network(url_pattern?, method?, timeout?)

在触发操作后等待特定的网络响应——比猜测更聪明 wait.

browser_screenshot()

返回PNG屏幕截图。 作为最后的手段 --更喜欢 browser_debug 和 browser_query 第一。

browser_upload(selector, files[])

将文件上传到文件输入元素。

browser_restart(url?)

关闭浏览器，重新开始。清除所有日志。重新启动后导航到URL（可选）。

browser_emulate_device(device, orientation?, custom?)

将浏览器切换到设备配置文件以进行响应式QA。在您交换设备或调用之前，模拟会在各个导航中持续存在 browser_restart.

预设（自然肖像视口）：

• iphone-15-pro-max (430×932), iphone-15-pro (393×852), iphone-15 (393×852), iphone-se (375×667)
• galaxy-s24 (360×800)
• ipad-pro-13 (1024×1366), ipad-pro-11 (834×1194), ipad-mini (768×1024)
• galaxy-tab-s9 (800×1280)
• desktop-chrome （1280×800）--重置为桌面
• custom --要求 custom.userAgent + custom.viewport.{width, height}

交换设备会重新创建浏览器上下文，因此Cookie和localStorage会丢失，经过身份验证的页面可能会在登录时登录。 innerWidth: 980 在移动模拟上查看没有 ` 这是Chrome的遗留问题，而不是bug-- pointer_coarse, hasTouch，以及 userAgent 是权威的信号。 browser_debug 在以下条件下显示主动仿真 emulation` 现场。

______________________________________________________________________

工作流程示例

1. browser_navigate("https://myapp.com", clear_logs: true)
2. browser_act([
     { action: "fill", selector: "#email", value: "user@example.com" },
     { action: "fill", selector: "#password", value: "secret" },
     { action: "click", selector: "button[type=submit]" }
   ])
3. browser_wait_for_network({ url_pattern: "/api/session", method: "POST" })
4. browser_debug({ console_types: ["error"] })    { selector: ".ag-row", count: 47 }

模拟移动设备

1. browser_emulate_device({ device: "iphone-15-pro-max" })
2. browser_navigate({ url: "https://www.youtube.com" })
   // redirects to m.youtube.com because of the iPhone UA
3. browser_screenshot()                     // mobile layout
4. browser_emulate_device({ device: "ipad-pro-13", orientation: "landscape" })
5. browser_emulate_device({ device: "desktop-chrome" })  // reset

______________________________________________________________________

环境

浏览器启动缓慢——在第一次工具调用之前不会打开。

______________________________________________________________________

许可证

MIT——免费使用、修改和分发。

如果这个项目对你有帮助， 请我喝杯咖啡 ☕