使用说明

项目简介

Blowback 是一个 MCP 服务器，它扩展了前端开发服务器的功能，使其能够通过 Model Context Protocol 与 LLM 客户端进行交互。该服务器通过集成的浏览器自动化工具和 HMR 监控，为 LLM 客户端提供关于前端开发环境的实时信息和操作能力，例如获取控制台日志、浏览器截图、元素属性以及执行浏览器命令等。

主要功能点

集成 MCP 协议: 实现了 MCP 服务器的核心功能，可以接收和响应来自 MCP 客户端的 JSON-RPC 请求。
浏览器自动化: 使用 Puppeteer 控制 Chrome 浏览器，提供了一系列浏览器操作工具，例如启动浏览器、截图、获取元素信息、执行 JavaScript 命令等。
HMR 监控: 捕获并传输来自 Vite 开发服务器的热模块替换 (HMR) 事件，使 LLM 客户端能够感知前端代码的实时变化。
控制台日志管理: 捕获并记录浏览器控制台日志，支持基于检查点 (Checkpoint) 的日志查询和管理。
灵活的工具集: 提供丰富的工具，涵盖浏览器操作、HMR 信息获取、日志查询等，方便 LLM 客户端与前端开发环境进行交互。
检查点 (Checkpoint) 系统: 允许在代码中插入 '<meta name="__mcp_checkpoint" data-id="">' 标签来创建快照，用于版本管理、日志隔离和问题追溯。

安装步骤

确保你的开发环境中已安装 Node.js 和 npm 或 yarn。
将 Blowback 添加到 Cursor MCP 配置中。

服务器配置

MCP 客户端 (例如 Cursor) 需要配置 Blowback MCP 服务器的启动命令才能连接。以下是推荐的配置信息，请复制粘贴到 Cursor 的 MCP Server 配置中：

{
  "blowback": {
    "command": "npx",
    "args": ["-y", "blowback-context"]
  }
}

配置参数说明:

server name (blowback): 服务器名称，可以自定义，用于在 MCP 客户端中标识和选择该服务器。
command (npx): 启动服务器的命令，这里使用 'npx' 来运行 'blowback-context' 包。
args (["-y", "blowback-context"]): 传递给启动命令的参数。
- '-y': 'npx' 的参数，表示自动同意安装 'blowback-context' 包（如果尚未安装）。
- 'blowback-context': 实际要执行的 npm 包名，该包提供了 Blowback MCP 服务器的可执行入口。

注意: 请确保你的项目根目录下或者全局环境中可以找到 'blowback-context' 包。如果首次使用，'npx' 命令会自动下载并安装。

基本使用方法

启动开发服务器: 首先确保你的前端开发服务器（例如 Vite）已经启动并在运行。Blowback 默认连接到 'http://localhost:5173'，你也可以通过 'start-browser' 工具指定其他 URL。
启动 MCP 服务器: 在 Cursor 或其他 MCP 客户端中配置并启动 Blowback MCP 服务器。
使用工具: 通过 MCP 客户端调用 Blowback 提供的工具来获取信息或执行操作。以下是一些常用的工具示例：
- 'start-browser': 启动一个浏览器实例并导航到你的开发服务器 URL，可以设置 'headless' 参数控制是否以无头模式运行。
- 'capture-screenshot': 截取当前浏览器页面的屏幕截图，可以指定 CSS 选择器来截取特定元素。
- 'get-console-logs': 获取浏览器控制台的日志信息，可以根据检查点进行过滤。
- 'get-hmr-events': 获取最近的热模块替换 (HMR) 事件。
- 'execute-browser-commands': 执行一系列预定义的浏览器命令，例如点击、输入文本、等待等，用于自动化浏览器操作。

检查点 (Checkpoint) 的使用: 在你的前端代码中，你可以插入 '<meta name="__mcp_checkpoint" data-id="your-checkpoint-id">' 标签来标记一个检查点。'data-id' 属性用于唯一标识该检查点。之后产生的控制台日志、截图等信息都会与该检查点关联，方便你进行版本对比和问题排查。

关键词