项目简介

本项目是一个基于 Model Context Protocol (MCP) 的服务器实现，旨在通过 Playwright 库提供浏览器自动化能力。它允许 LLM 客户端（如 Claude Desktop）通过 MCP 协议调用预定义好的工具，从而远程控制浏览器执行各种操作，例如页面导航、元素点击、信息填写、截图以及执行 JavaScript 代码等。此外，服务器还提供获取浏览器控制台日志和屏幕截图等资源的功能，增强 LLM 在处理网页内容时的上下文感知能力。

主要功能点

资源管理: 提供浏览器控制台日志和屏幕截图等资源，允许 LLM 客户端获取网页执行过程中的信息。
工具调用: 支持一系列基于 Playwright 的浏览器操作工具，包括：
- 网页导航 (navigate)
- 元素点击 (click)
- 文本填写 (fill)
- 元素选择 (select)
- 悬停操作 (hover)
- JavaScript 代码执行 (evaluate)
- 网页截图 (screenshot)
- HTTP 请求 (get, post, put, patch, delete)
可扩展性: 易于扩展新的浏览器自动化工具和资源类型。
集成 Claude Desktop: 提供详细的 Claude Desktop 集成配置指南。

安装步骤

克隆仓库:

git clone https://github.com/hrmeetsingh/mcp-browser-automation.git
cd mcp-browser-automation

安装依赖: 确保已安装 Node.js 和 npm，然后运行：
```
npm install
```
构建项目:
```
npm run build
```
构建完成后，可执行文件 'index.js' 将位于 'dist' 文件夹中。

服务器配置

要将此 MCP 服务器与 MCP 客户端（例如 Claude Desktop）集成，您需要配置客户端以连接到此服务器。以 Claude Desktop 为例，您需要编辑其配置文件 'claude_desktop_config.json'（通常位于 '~/Application\ Support/Claude/' 目录下，macOS 系统）。

在 'mcpServers' 字段中添加一个新的服务器配置，配置信息如下：

{
  "mcpServers": {
    "mcp-browser-automation": {  // 服务器名称，客户端用此名称引用
      "command": "node",       // 启动服务器的命令，这里使用 Node.js
      "args": [                 // 命令参数
        "/path/to/mcp-browser-automation/dist/index.js" //  'index.js' 文件的绝对路径，请替换为实际路径
      ]
    }
  }
}

请注意:

'/path/to/mcp-browser-automation/dist/index.js' 需要替换为 'dist/index.js' 文件在您本地文件系统中的绝对路径。例如，如果您的项目克隆在 '/Users/yourname/Documents/mcp-browser-automation'，则路径可能为 '/Users/yourname/Documents/mcp-browser-automation/dist/index.js'。
Claude Desktop 需要重启才能加载新的服务器配置。

基本使用方法

启动 Claude Desktop (或您使用的 MCP 客户端)。
开始新的对话。
在对话中，您可以指示 Claude 使用 "mcp-browser-automation" 服务器提供的工具来操作浏览器。 例如，您可以指示 Claude 执行以下操作：
- "打开浏览器并访问 https://www.example.com" （对应 'playwright_navigate' 工具）
- "在搜索框中输入 'Playwright' 并点击搜索按钮" （对应 'playwright_fill' 和 'playwright_click' 工具）
- "截取当前页面的屏幕截图并保存" （对应 'playwright_screenshot' 工具）

Claude Desktop (或其他 MCP 客户端) 将解析您的指令，并根据配置调用 "mcp-browser-automation" 服务器提供的工具来执行相应的浏览器自动化操作。服务器执行操作后，会将结果返回给 Claude Desktop，Claude Desktop 可以根据结果继续与您对话或执行后续操作。

示例:

仓库的 'README.md' 文件中提供了使用示例图片，展示了如何在 Claude Desktop 中选择 MCP Server 工具以及如何使用服务器控制浏览器导航和输入文本。您可以参考这些图片来了解实际使用场景。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息