Blowback实时热更新

@ESnark/blowback

0 Stars 406 次浏览 ESnark 更新于 2026-08-23

将 Cursor AI 与 Vite 开发服务器集成，允许 AI 代理修改代码并通过热模块替换系统实时观察实时更新。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "blowback": {
      "args": [
        "-y",
        "blowback-context"
      ],
      "command": "npx",
      "env": {
        "PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

服务介绍

Blowback

Vite MCP Server 现已更名为 Blowback

Blowback 的目标是支持各种前端开发服务器，而不仅仅是 Vite

在前端开发服务器中添加一个 Model Context Protocol (MCP) 服务器以支持与 Cursor 的集成。

主要功能

前端开发服务器与 MCP 服务器的集成
通过 MCP 捕获和传输浏览器控制台日志
基于检查点的日志管理

安装

将服务器添加到您的 Cursor MCP 配置中：

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

资源

console-logs

用于检索浏览器控制台日志的资源。

注意：Cursor 目前不支持 MCP 资源功能。请改用 get-console-logs 工具。

screenshot

用于捕获和管理屏幕截图的资源。

注意：与其他资源一样，这目前不直接由 Cursor 支持。请改用 capture-screenshot 工具。

工具

HMR 工具

工具名称	描述
`get-hmr-events`	检索最近的 HMR 事件
`check-hmr-status`	检查 HMR 状态

浏览器工具

工具名称	描述
`start-browser`	启动浏览器实例并导航到 Vite 开发服务器
`capture-screenshot`	捕获当前页面或特定元素的屏幕截图。屏幕截图保存到磁盘上。由于 MCP 客户端的限制，您可能需要手动将保存的屏幕截图图像传输到编辑工具中
`get-element-properties`	检索特定元素的属性和状态信息
`get-element-styles`	检索特定元素的样式信息
`get-element-dimensions`	检索特定元素的尺寸和位置信息
`monitor-network`	在指定时间内监控浏览器中的网络请求
`get-element-html`	检索特定元素及其子元素的 HTML 内容
`get-console-logs`	从浏览器会话中检索控制台日志，并可选择过滤
`execute-browser-commands`	安全地执行预定义的浏览器命令

如何使用工具

工具名称	描述
`how-to-use`	提供有关如何使用该工具的说明

日志管理系统

日志管理方法

所有浏览器控制台日志都存储在日志文件中
您可以使用 get-console-logs 工具查询特定检查点的日志

检查点系统

检查点操作方法

检查点用于管理特定版本的快照、日志、屏幕截图等
当 <meta name="__mcp_checkpoint" data-id=""> 被插入到 head 中时，数据将使用 data-id 属性作为标识符单独记录

架构和数据流

核心组件

MCP 服务器: 基于 Model Context Protocol SDK 的中央模块，为 MCP 客户端提供工具。
浏览器自动化: 使用 Puppeteer 控制 Chrome 以可视化检查更改。
检查点系统: 维护浏览器状态的快照，用于比较和测试。

数据源和状态管理

服务器维护几个重要的数据存储：

HMR 事件记录: 跟踪来自 Vite 的最近 HMR 事件（更新、错误）。
控制台消息日志: 捕获浏览器控制台输出，以便调试。
检查点存储: 存储浏览器状态的命名快照，包括 DOM 快照。

通信流程

MCP 客户端 → 开发服务器:
- MCP 客户端修改源代码，开发服务器检测到该更改
- 开发服务器自动更新浏览器或发出 HMR 事件
Web 浏览器 → MCP 服务器:
- 通过 Puppeteer 捕获 HMR 事件和控制台日志。
- MCP 服务器查询浏览器的当前状态或捕获屏幕截图
MCP 服务器 → MCP 客户端:
- 服务器将 HMR 事件转换为结构化的响应。
- 为 MCP 客户端提供查询 HMR 状态和捕获屏幕截图的工具。

状态维护

服务器维护以下引用对象：

当前浏览器和页面实例
最近的 HMR 事件

查看源码项目主页