关键词

浏览器自动化PuppeteerWeb交互教育演示代码示例

使用说明

项目简介

AI-Dev Education Platform 包含一个用于浏览器自动化演示和学习的简化版 Puppeteer MCP 服务器。该服务器旨在帮助开发者理解 Model Context Protocol (MCP) 的服务器端实现，并提供基础的浏览器自动化能力，例如网页导航、元素交互和截图等。

主要功能点

  • 浏览器自动化: 支持通过指令控制 Puppeteer 驱动的浏览器实例，实现网页导航、元素点击、文本输入、内容提取和屏幕截图等操作。
  • 简化版 MCP 服务: 虽然是简化版，但服务器设计上遵循 Model Context Protocol 的基本原则，可以作为理解 MCP 服务器概念的入口。
  • 调试友好: Simple Puppeteer Server 运行在可见浏览器实例中，方便开发者观察和调试自动化过程。
  • 教育用途: 作为 AI-Dev Education Platform 的一部分，专注于提供学习和实验环境，而非生产环境的完整 MCP 服务器。

安装步骤

该服务器是 AI-Dev Education Platform 项目的一部分，无需单独安装。您需要先按照平台 Getting Started 中的步骤完成平台的安装：

  1. 克隆仓库： 
    git clone https://github.com/Rev4nchist/new-ai-dev-education.git
cd new-ai-dev-education
  2. 安装依赖： 
    npm install
  3. 启动开发服务器（可选，如果需要完整平台功能）： 
    npm run dev

服务器配置

MCP 客户端需要配置服务器连接信息。对于 AI-Dev Education Platform 提供的 Simple Puppeteer Server，您可以在 MCP 客户端（例如 Cursor 编辑器）中添加如下服务器配置：

{
  "servers": [
    {
      "name": "Simple Puppeteer Server",
      "command": "node simple-puppeteer-server.js",
      "args": [],
      "description": "AI-Dev Education 平台提供的简化版 Puppeteer MCP 服务器。在运行平台浏览器自动化功能前，请先启动此服务器。"
    }
  ]
}

配置参数说明：

  • name: 服务器名称，可以自定义，用于在 MCP 客户端中识别。
  • command: 启动服务器的命令。这里使用 'node simple-puppeteer-server.js'，表示使用 Node.js 运行 'simple-puppeteer-server.js' 文件。
  • args: 启动命令的参数，本服务器无需额外参数，因此为空数组 '[]'。
  • description: 服务器的描述信息，方便用户理解服务器的用途。

基本使用方法

  1. 启动服务器: 在 'new-ai-dev-education' 仓库根目录下，运行命令 'node simple-puppeteer-server.js' 启动 Simple Puppeteer Server。服务器默认监听端口 5004。
  2. 配置 MCP 客户端: 在您的 MCP 客户端（如 Cursor 编辑器）中，添加上述 JSON 配置，以连接到 Simple Puppeteer Server。
  3. 使用浏览器自动化功能: 访问 AI-Dev Education Platform 的 '/browser-automation' 页面，即可体验通过 MCP 服务器控制浏览器进行自动化的功能。平台页面会通过 MCP 协议与 Simple Puppeteer Server 通信，执行您在页面上指定的操作。

注意: 该 Simple Puppeteer Server 仅为教育和演示目的而设计，功能较为基础，且安全性配置可能较为宽松。请勿在生产环境或处理敏感信息的场景中使用。

信息

分类

开发者工具

访问项目