关键词

浏览器自动化Playwright自动化工具网页操作Claude Desktop

使用说明

项目简介

本项目 'mcp-browser-automation' 是一个 MCP 服务器的示例实现，旨在演示如何使用 Model Context Protocol 框架构建一个能够控制浏览器并与 LLM 客户端交互的应用后端。它利用 Playwright 库实现浏览器自动化，允许 LLM 客户端通过调用预定义的工具来执行网页导航、元素点击、信息填写、截图等操作，并将浏览器的控制台日志和截图作为资源提供给 LLM。

主要功能点

  • 浏览器自动化工具: 提供一系列工具，允许 LLM 客户端控制浏览器执行各种操作，例如：
    • 导航到指定 URL
    • 截取网页或特定元素的屏幕截图
    • 点击网页元素
    • 在输入框中填写内容
    • 选择下拉框选项
    • 鼠标悬停在元素上
    • 执行 JavaScript 代码
    • 发起 HTTP 请求 (GET, POST, PUT, PATCH, DELETE)
  • 资源管理: 将浏览器的控制台日志和屏幕截图作为资源进行管理，允许 LLM 客户端通过 URI 访问这些信息，作为上下文输入。
    • 控制台日志: 提供实时的浏览器控制台输出日志。
    • 屏幕截图: 支持存储和检索网页截图，包括指定元素截图和全屏截图。
  • 标准 MCP 协议: 基于 '@modelcontextprotocol/sdk' 开发，遵循 MCP 协议规范，易于与支持 MCP 协议的 LLM 客户端集成。

安装步骤

  1. 克隆仓库: 使用 'git clone https://github.com/MCP-Mirror/hrmeetsingh_mcp-browser-automation.git' 命令克隆代码仓库到本地。
  2. 安装依赖: 进入项目根目录，运行 'npm install' 命令安装项目所需的 Node.js 依赖包，包括 Playwright 和 MCP SDK。
  3. 构建项目: 运行 'npm run build' 命令构建项目，构建成功后，可执行文件将位于 'dist' 目录下。

服务器配置

要将此 MCP 服务器集成到支持 MCP 的客户端（如 Claude Desktop），您需要配置客户端的 MCP 服务器设置。以下是 Claude Desktop 客户端的配置示例，您需要将配置信息添加到 '~/Application\ Support/Claude/claude_desktop_config.json' 文件中。

{
  "mcpServers": {
    "mcp-browser-automation": {
      "command": "node",
      "args": ["/path/to/mcp-browser-automation/dist/index.js"]
    }
  }
}

配置参数说明:

  • '"mcp-browser-automation"': 服务器名称，客户端用此名称来标识和调用该 MCP 服务器。您可以自定义名称。
  • '"command": "node"': 启动服务器的命令，这里使用 Node.js 运行时环境来执行 JavaScript 代码。
  • '"args": ["/path/to/mcp-browser-automation/dist/index.js"]': 传递给启动命令的参数，指定了服务器入口文件 'index.js' 的路径。请务必将 '/path/to/mcp-browser-automation' 替换为您本地仓库的实际路径。

基本使用方法

  1. 启动 Claude Desktop: 确保已安装并启动 Claude Desktop 客户端。
  2. 发起对话: 在 Claude Desktop 中开始一个新的对话。
  3. 调用工具: 在对话中，您可以指示 Claude 使用浏览器自动化工具来完成特定任务。例如，您可以指示 Claude "打开 [URL] 网页并截取屏幕截图" 或 "在 [网页元素] 中输入 [文本内容]"。Claude 将会调用配置的 MCP 服务器来执行相应的浏览器操作，并将结果返回给您。

注意: 本 MCP 服务器需要在安装了 Playwright 和 Node.js 的环境下运行。首次使用某些 Playwright 工具可能需要下载浏览器驱动，请根据 Playwright 的提示进行操作。

信息

分类

开发者工具

访问项目