关键词

浏览器自动化LLM工具调用ウェブ自動化操作录制回放服务

项目简介

Web Agent Protocol (WAP) 是一个标准化的框架，用于录制和回放浏览器操作。此项目包含了WAP的Python SDK，并提供了将录制的浏览器操作转化为Model Context Protocol (MCP) 工具服务的功能，使得LLM可以通过标准的MCP协议调用这些自动化工作流。

主要功能点

  • 录制浏览器操作: 通过提供的Chrome扩展程序，可以录制用户在浏览器中的交互动作，如点击、输入、页面导航等。
  • 生成回放列表: 将录制的原始事件流处理后，生成可用于自动化回放的精确回放列表或智能回放列表。
  • 生成MCP工具: 根据生成的回放列表，自动创建独立的Python脚本文件。每个脚本文件都是一个标准的MCP服务器实现，封装了特定的浏览器自动化任务，可作为LLM调用的工具。
  • 执行自动化回放: 提供一个WAP服务（基于Flask），作为中间层接收生成的MCP服务器发起的执行请求，并调用底层的浏览器自动化库（browser-use）执行实际的网页操作回放。
  • MCP客户端示例: 项目包含一个简单的MCP客户端实现，演示了如何连接到生成的MCP服务器，发现可用的工具，并向LLM提问，由LLM决定调用哪个MCP工具来完成任务。

安装步骤

  1. 安装conda并创建环境: 如果未安装conda，请先安装。然后创建名为'WAP'的Python 3.11环境： 
    conda create -n WAP python=3.11
  2. 激活环境: 
    conda activate WAP
  3. 克隆仓库: 
    git clone https://github.com/OTA-Tech-AI/web-agent-protocol.git
  4. 进入仓库目录: 
    cd web-agent-protocol
  5. 安装依赖: 
    pip install -r requirements.txt
  6. 设置Python环境变量: 将仓库根目录添加到'PYTHONPATH'，以便正确导入模块。
    • Windows: 
      set PYTHONPATH=C:\path\to\webagentprotocol
      (请将'C:\path\to\webagentprotocol'替换为您的实际路径)
    • Linux/macOS: 
      export PYTHONPATH=/path/to/webagentprotocol
      (请将'/path/to/webagentprotocol'替换为您的实际路径)
  7. 配置.env文件: 在仓库根目录创建'.env'文件，并配置您使用的LLM服务的API密钥（例如OpenAI或DeepSeek），'mcp_client.py' 需要 'LLM_API_KEY'。 
    OPENAI_API_KEY=sk-proj-...
DEEPSEEK_API_KEY=sk-...
LLM_API_KEY=sk-... # (例如，如果您使用OpenAI作为客户端调用的LLM)
  8. 安装Chrome扩展: 根据仓库中的OTA‑WAP Chrome Extension 目录下的说明，设置并安装Chrome扩展程序。

服务器配置 (供MCP客户端使用)

该项目生成的MCP服务器是独立的Python脚本文件，位于项目根目录下的 'mcp_servers' 目录中。每个文件代表一个特定的自动化任务工具，其文件名格式通常为 '<任务名称>_<任务ID>_mcp_server.py'，其中 '<任务名称>' 是根据任务目标生成的简洁名称，'<任务ID>' 是录制时生成的唯一ID。

MCP客户端需要配置这些服务器的启动命令来与之建立连接并通过标准的JSON-RPC协议进行通信。标准的MCP客户端配置文件（通常为JSON格式）需要为每个服务器定义一个条目，至少指定其 'command' (启动命令) 和 'args' (命令行参数)。

对于由 'generate_mcp_server.py' 脚本生成的MCP服务器文件，例如名为 'find_top_rated_keyboard_amazon_ca_y757R6w6y17LVHXl_mcp_server.py' 的文件（'y757R6w6y17LVHXl' 是任务ID），其对应的MCP客户端配置信息示例如下：

  • server name: 'find_top_rated_keyboard_amazon_ca' (通常取文件名中任务名称部分，不包含任务ID和后缀)
  • command: '"python"' (指定使用python解释器执行)
  • args: '[".\mcp_servers\find_top_rated_keyboard_amazon_ca_y757R6w6y17LVHXl_mcp_server.py"]' (指定要执行的MCP服务器脚本路径作为参数。请根据您的操作系统、实际生成的服务器文件名和文件存放路径调整'args')

项目自带的 'mcp_client.py' 脚本在启动时会自动扫描 'mcp_servers' 目录下的文件，并生成一个名为 'servers_config.json' 的客户端配置文件供自身使用。如果您使用其他MCP客户端，则需要根据实际生成的服务器文件列表手动创建或调整相应的JSON配置。

基本使用方法

  1. 启动数据收集服务器: 在一个终端窗口中运行此命令，用于接收Chrome扩展发送的浏览器录制事件数据。 
    python action_collect_server.py
    服务器默认监听 'http://localhost:4934/action-data'。
  2. 录制浏览器操作: 在Chrome浏览器中，打开DevTools面板，找到"OTA Action Capturer"标签页。输入任务描述，点击"Start Record"，然后在网页上执行您希望录制的操作。完成后点击"Finish Record"。录制数据将保存到项目 'data/' 目录下按日期和任务ID组织的文件夹中。
  3. 生成回放列表: 在另一个终端窗口中，根据您录制的任务数据所在路径 ('data/<日期>/<任务ID>')，生成回放列表文件。可以选择生成精确回放列表或智能回放列表（二选一）。
    • 精确回放列表生成: 
      python wap_replay/generate_exact_replay_list.py --data_dir_path data/<日期>/<任务ID>
    • 智能回放列表生成: 
      python wap_replay/generate_smart_replay_list.py --data_dir_path data/<日期>/<任务ID>
    生成的回放列表文件将位于 'data_processed/exact_replay/' 或 'data_processed/smart_replay/' 目录下，文件名包含任务ID。
  4. 生成MCP服务器文件: 使用您在上一步生成的任务ID，运行此命令来创建对应的MCP服务器Python脚本文件。 
    python wap_replay/generate_mcp_server.py --task_id <任务ID>
    这将在 'mcp_servers/' 目录下生成对应的服务器文件。
  5. 启动WAP服务: 在一个新的终端窗口中运行此命令。这是由生成的MCP服务器调用的HTTP服务，用于触发实际的浏览器回放。 
    python wap_service.py
    服务器默认监听 'http://localhost:3089/replay'。
  6. 启动生成的MCP服务器: 在一个新的终端窗口中，运行上一步生成的MCP服务器脚本文件。例如，如果生成的服务器文件是 'find_top_rated_keyboard_amazon_ca_y757R6w6y17LVHXl_mcp_server.py'： 
    python mcp_servers/find_top_rated_keyboard_amazon_ca_y757R6w6y17LVHXl_mcp_server.py
    此脚本会启动一个MCP服务器，并通过Stdio与MCP客户端通信。
  7. 启动MCP客户端: 在最后一个终端窗口中运行此命令。该客户端会自动查找并连接到 'mcp_servers' 目录下的MCP服务器。 
    python mcp_client.py
  8. 使用LLM调用工具: 在MCP客户端终端中，您可以像与LLM交互一样输入指令，例如："find a top rated keyboard on amazon.ca using smart replay" 或 "use the keyboard search tool exact replay". LLM会根据您输入的指令和可用的工具，通过MCP协议调用对应的服务器工具，进而触发浏览器自动化任务的执行。

信息

分类

AI与计算

访问项目