使用说明

项目简介

Browser MCP Server 是一个 MCP (Model Context Protocol) 服务器的实现,旨在为大型语言模型 (LLM) 提供与浏览器交互的能力。它允许 LLM 通过标准化的 MCP 协议调用预定义的工具,例如获取网页快照、模拟用户点击和输入等浏览器操作,从而增强 LLM 在网络环境中的应用能力。

主要功能点

  • 工具 (Tools) 注册与执行: 提供了一系列预定义的浏览器操作工具,如页面快照、点击元素、输入文本、页面导航、前进后退、等待、按键等。LLM 客户端可以调用这些工具与浏览器进行交互。
  • 资源 (Resources) 管理: 虽然示例代码中 'resources' 列表为空,但架构上支持资源管理,未来可以扩展以提供对网页内容的结构化访问或其他类型的数据资源。
  • Prompt 模板 (Prompts): 代码中未直接体现 Prompt 模板功能,但作为 MCP 服务器,理论上可以支持 Prompt 模板的定义和渲染,以定制 LLM 交互模式。
  • WebSocket 和 Stdio 传输协议: 支持 WebSocket 和 Stdio 两种传输协议,方便与不同类型的 MCP 客户端集成。WebSocket 用于与浏览器扩展等客户端通信,Stdio 用于命令行或后台服务等场景。
  • 会话管理和能力声明: MCP 服务器具备会话管理能力,并能声明自身提供的工具和资源能力,供 MCP 客户端发现和使用。

安装步骤

  1. 前提条件: 确保已安装 Node.js 和 npm (或 yarn)。
  2. 获取代码: 从 GitHub 仓库克隆代码到本地:
    git clone https://github.com/BrowserMCP/mcp.git
    cd mcp
  3. 安装依赖: 根据 'README.md' 描述,当前仓库可能由于依赖于 monorepo 的 'utils' 和 'types' 而无法独立构建。这意味着可能需要从 BrowserMCP 的 monorepo 中构建此项目,或者等待官方发布可独立安装的版本。 如果可以独立安装,通常的步骤是运行:
    npm install  # 或 yarn install
    但请注意,当前仓库可能无法直接 'npm install' 成功,需要关注 BrowserMCP 官方文档或仓库更新以获取更详细的构建和安装指南。

服务器配置

MCP 客户端需要配置连接到 Browser MCP Server 的信息。以下是一个典型的 JSON 格式配置示例,请注意根据实际情况调整 'command' 和 'args'

{
  "serverName": "BrowserMCP",
  "command": "node",
  "args": [
    "src/index.js"
  ],
  "transport": "stdio"  // 或 "websocket" 如果客户端支持 WebSocket
}

配置参数说明:

  • '"serverName"': 服务器名称,可以自定义,用于在客户端标识服务器。例如: '"BrowserMCP"'。
  • '"command"': 启动服务器的命令。由于 'src/index.ts' 文件头部有 '#!/usr/bin/env node',且 'package.json' 中没有 'bin' 字段,这里假设使用 'node' 命令直接运行 'src/index.js' 文件。 如果项目被打包成可执行文件,'command' 可能需要修改为可执行文件的路径。
  • '"args"': 启动命令的参数。根据提供的代码,'src/index.js' 没有接收命令行参数,所以 'args' 数组为空 '[]'。 如果服务器需要额外的启动参数(例如端口号、配置文件路径等),请添加到 'args' 数组中。
  • '"transport"': 指定客户端与服务器通信的传输协议。根据代码,服务器支持 'stdio' 和 'websocket'。客户端应根据自身能力和需求选择合适的协议。 示例中 '"stdio"' 表示使用标准输入输出进行通信。 如果客户端使用 WebSocket 连接,可能需要配置 '"transport": "websocket"',并且服务器默认 WebSocket 端口可能为 'mcpConfig.defaultWsPort' (代码中为默认值,具体配置请参考项目文档)。

重要提示: 由于 'README.md' 中提到依赖问题,请务必参考 BrowserMCP 官方文档 (https://docs.browsermcp.io) 和项目仓库的最新信息,以获取准确的安装、构建和配置指南。 上述安装步骤和服务器配置是基于当前仓库代码的推测,实际操作可能需要根据官方文档进行调整。

基本使用方法

  1. 启动服务器: 根据上述配置,使用 MCP 客户端配置的命令和参数启动 Browser MCP Server。例如,如果配置的 'command' 是 'node' 和 'args' 是 '["src/index.js"]',则客户端在需要连接服务器时会自动执行该命令。
  2. 客户端连接: 配置 MCP 客户端连接到 Browser MCP Server。客户端会根据配置的传输协议与服务器建立连接。
  3. 发现服务器能力: 客户端连接成功后,可以向服务器发送 'ListToolsRequest' 和 'ListResourcesRequest' 等 MCP 请求,以获取服务器提供的工具和资源列表。
  4. 调用工具: 客户端可以使用 'CallToolRequest' 调用服务器提供的工具。例如,调用 'snapshot' 工具可以获取当前网页的快照,调用 'click' 工具可以模拟点击网页元素等。 工具的具体参数需要参考工具的 'inputSchema' 定义。
  5. 读取资源: 如果服务器提供资源,客户端可以使用 'ReadResourceRequest' 读取资源内容。

示例工具调用 (假设使用 'stdio' 传输):

客户端发送 'CallToolRequest' 请求 (JSON-RPC 格式) 到服务器的标准输入,例如调用 'snapshot' 工具:

{
  "jsonrpc": "2.0",
  "method": "callTool",
  "params": {
    "name": "snapshot",
    "arguments": {}
  },
  "id": 1
}

服务器接收到请求后,会执行 'snapshot' 工具,并将结果通过标准输出返回给客户端 (JSON-RPC 响应)。

{
  "jsonrpc": "2.0",
  "result": {
    "content": [
      {
        "type": "text",
        "text": "- Page URL: ...\n- Page Title: ...\n- Page Snapshot\n\'\'\'yaml\n...\n\'\'\'\n"
      }
    ]
  },
  "id": 1
}

客户端解析服务器返回的 JSON-RPC 响应,即可获取工具执行结果,并根据结果内容进行后续操作。

信息

分类

网页与API