关键词

浏览器自动化网页控制LLM工具上下文服务远程控制

项目简介

本项目是一个基于Model Context Protocol (MCP) 实现的服务器端应用，专注于提供浏览器自动化能力。它作为一个中间层，接收来自大型语言模型（LLM）客户端的MCP请求（主要是工具调用），并将这些请求转化为与浏览器插件的交互指令，从而实现对浏览器的控制、数据读取和状态捕获。服务器使用官方MCP SDK构建，并通过HTTP协议与MCP客户端通信，同时通过WebSocket协议与浏览器插件通信。

主要功能点

  • MCP协议支持: 实现了MCP协议的服务器端部分，能够处理来自客户端的初始化、工具调用等请求。
  • 流式HTTP传输: 利用MCP SDK的'StreamableHTTPServerTransport'，支持通过HTTP POST接收JSON-RPC请求，并通过HTTP GET（SSE）向客户端推送通知和结果流。
  • 工具注册与执行: 定义并注册了一系列浏览器自动化相关的工具，如导航、点击、输入、截图、获取快照等。当LLM客户端调用这些工具时，服务器负责执行对应的逻辑。
  • 浏览器插件桥接: 通过内置的WebSocket服务器（监听端口8081），与一个单独运行的浏览器插件建立连接，并通过该连接将工具执行指令发送给插件，由插件在浏览器环境中完成实际操作。工具执行结果（如页面快照）也通过此连接返回给服务器。
  • 会话管理: 支持管理多个独立的MCP会话，为不同的客户端或交互过程提供隔离的环境。
  • 应用API层: 提供了一个'/api/ai-command'的HTTP API端点，作为一个示例应用层，允许接收简单的自然语言指令，并模拟将其转化为MCP工具调用发送给对应的MCP会话。

安装步骤

  1. 克隆仓库:

    git clone https://github.com/LofiSu/mcp-server.git
cd mcp-server

  2. 安装依赖:

    npm install
# 或者使用 yarn: yarn install

  3. 构建项目:

    npm run build
# 或者使用 yarn: yarn build

    这将编译TypeScript代码到 'dist' 目录。

  4. （必需）准备浏览器插件: 本项目不包含浏览器插件代码。您需要一个能够：

    • 作为WebSocket客户端连接到此服务器（默认 ws://localhost:8081）。
    • 接收服务器通过WebSocket发送的特定指令（如 'navigate', 'click', 'type', 'snapshot' 等）。
    • 在浏览器环境中执行这些指令（例如使用Puppeteer或Playwright自动化库，或直接使用浏览器Extension API）。
    • 将指令的执行结果（包括错误）通过WebSocket返回给服务器，使用包含唯一ID的消息格式。
    • 提供获取当前页面URL ('getUrl')、Title ('getTitle') 和快照 ('snapshot') 的WebSocket接口。

  5. 启动服务器:

    node dist/server.js

    服务器将启动HTTP服务（默认端口3000）和WebSocket服务（默认端口8081），并等待浏览器插件连接。

服务器配置（供MCP客户端参考）

要让MCP客户端连接并使用此服务器，需要客户端提供相应的配置信息，通常包含在客户端的设置文件或启动命令中。以下是基于本项目实现的关键配置信息：

  • 服务器名称: 'Browser Plugin MCP Server'
  • 启动命令 (command):
    • 可执行文件: 'node'
    • 参数 (args): '["dist/server.js"]' (假设您在项目根目录执行 'node')
  • 连接URL (url): 'http://localhost:3000/mcp'
  • 传输协议 (transport): 'streamable-http'
  • 能力声明:
    • 支持的传输: 'streamable-http'
    • 支持的请求方法: 'initialize', 'callTool', 'listTools', 'listResources', 'listPrompts' (虽然Resource和Prompt未完全实现，但SDK会声明支持)
    • 支持的通知: 'toolResult', 'resourceChanged', 'promptRendered', 'serverStopped' 等 (取决于SDK实现)
    • 提供的工具: 'navigate', 'goBack', 'goForward', 'wait', 'pressKey', 'click', 'drag', 'hover', 'type', 'selectOption', 'snapshot', 'getConsoleLogs', 'screenshot'

基本使用方法

  1. 确保您已完成安装步骤，特别是准备并运行了配套的浏览器插件，并且服务器已成功启动并连接到插件（服务器日志会显示连接状态）。
  2. 使用兼容MCP协议的客户端连接到此服务器。客户端需要配置上述的启动命令和连接URL。
  3. 客户端通过MCP协议发送JSON-RPC请求：
    • 首先发送 'initialize' 请求建立会话。服务器会返回 'Mcp-Session-Id' 头部，客户端需要记住并后续请求中使用。
    • 客户端可以发送 'listTools' 请求获取服务器提供的工具列表及其描述和参数schema。
    • 客户端根据需要发送 'callTool' 请求，指定工具名称和参数来执行浏览器操作（例如调用 'navigate' 工具并提供 'url' 参数）。
    • 服务器执行工具逻辑，通过WebSocket与浏览器插件通信完成实际操作，并将结果（包括通过SSE推送的通知）返回给客户端。
  4. （可选）您也可以使用 '/api/ai-command' 端点进行简单测试，例如向 'http://localhost:3000/api/ai-command' 发送POST请求，body为 '{ "command": "导航到 https://www.bilibili.com", "sessionId": "YOUR_SESSION_ID" }'。这会触发服务器模拟LLM行为，将自然语言指令转化为工具调用发送到对应的MCP会话。

信息

分类

桌面与硬件

访问项目