AI导哈

前端开发AI集成服务器

Blowback是一个集成前端开发服务器与AI工具（如Claude Desktop和Cursor）的MCP服务器，支持浏览器自动化、HMR事件监控和检查点管理。

  • by iflow-mcp
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 iflow-mcp/ESnark-vite-mcp-server

使用说明

反吹

Vite MCP服务器现在出现故障

Blowback旨在支持各种FE开发服务器，而不仅仅是Vite

模型上下文协议（MCP）服务器，将FE开发服务器与Claude Desktop和Cursor等AI工具集成在一起。

如何使用

命令（克劳德代码）：

claude mcp add blowback -s project -e PROJECT_ROOT=/path/to/your/project -- npx -y blowback-context

或者使用json配置：

  • 克劳德代码： {PROJECT_ROOT}/.mcp.json
  • 光标： {PROJECT_ROOT}/.cursor/mcp.json
{
  "mcpServers": {
    "blowback": {
      "command": "npx",
      "args": ["-y", "blowback-context"],
      "env": {
        "PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

环境变量

  • PROJECT_ROOT：项目根路径（可选，默认为当前工作目录）
  • ENABLE_BASE64：在工具响应中包含base64编码的图像（默认值：false/启用时影响令牌使用和上下文窗口）

主要特点

  • 本地开发服务器与MCP服务器的集成
  • 通过MCP捕获和传输浏览器控制台日志
  • 基于检查点的日志管理
  • 屏幕截图和SQLite数据库管理
  • HMR（热模块更换）事件监测
  • 浏览器自动化和元件检查

初始化提示

这 init prompt为AI助手提供如何有效使用以下功能的指导：

光标聊天 不支持MCP提示功能，因此此功能不可用。（建议使用Claude Code） 如果需要，手动输入以下提示：

您可以通过插入以下内容来使用检查点功能 <meta name="__mcp_checkpoint" data-id=""> 创建当前状态的命名快照。 data-id属性是检查点的唯一标识符。

当检查点处于活动状态时，浏览器中生成的控制台日志用检查点ID标记，可以单独查询。

注意：在某些开发环境中，保存文件时会触发热重新加载，因此请仔细考虑元标记更改与要观察的更改之间的顺序。在进行要跟踪的更改之前，请确保设置检查点元标记。

您可以使用截图工具进行截图。捕获的屏幕截图存储在@.mcp_screscent/目录中。

工具

HMR工具

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

备注：HMR连接是可选的，不是必需的。浏览器启动时，HMR事件监视会自动启动。

浏览器工具

工具名称 描述
start-browser 启动浏览器实例并导航到开发服务器。HMR监测自动启动
capture-screenshot 捕获当前页面或特定元素的屏幕截图。返回屏幕截图ID和资源URI
get-element-properties 检索特定元素的属性和状态信息
get-element-styles 检索特定元素的样式信息
get-element-dimensions 检索特定元素的维度和位置信息
monitor-network 在指定的持续时间内监视浏览器中的网络请求
get-element-html 检索特定元素及其子元素的HTML内容
get-console-logs 使用可选筛选从浏览器会话中检索控制台日志
execute-browser-commands 安全执行预定义的浏览器命令

帮助工具

工具名称 描述
how-to-use 提供有关如何使用服务器特定功能的说明

资源

截图

用于查询所有捕获的屏幕截图的资源。您可以查询由捕获的屏幕截图参考ID capture-screenshot 使用各种标准的工具。

与参考ID对应的图像在 {PROJECT_ROOT}/.mcp_screenshot/ 目录。

  • URI： screenshot://
  • 返回所有屏幕截图的列表

按url截图

基于URL路径查询特定屏幕截图的资源。

备注：从1.0版本开始，默认情况下禁用通过资源的Blob响应，而是返回文件引用信息

  • URI模板： screenshot://{+path}
  • 例子： screenshot://localhost:5173/about
  • 使用没有协议的URL路径（http://，https://）

数据存储结构

屏幕截图存储

  • 屏幕截图：存储在 {PROJECT_ROOT}/.mcp_screenshot/ 目录
  • 元数据：在SQLite数据库的临时目录中管理
  • 建议添加 .mcp_screenshot/ 目录到 .gitignore

日志管理系统

  • 捕获浏览器控制台日志并将其保存到文件中以供查询
  • 检查点日志仅在检查点处于活动状态时保存

检查点系统

检查点如何工作

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

架构和数据流

核心组件

  1. MCP服务器：使用模型上下文协议SDK向AI工具公开工具和资源的中央模块。

  2. 浏览器自动化：使用Playwright控制Chrome进行视觉检查、屏幕截图捕获和DOM操作。

  3. 检查点系统：维护浏览器状态的快照，以便进行比较和测试。

  4. SQLite数据库：高效管理屏幕截图元数据，并支持基于URL的快速查询。

数据源和状态管理

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

  • HMR事件记录：从开发服务器跟踪最近的HMR事件（更新、错误）。
  • 控制台消息日志：捕获浏览器控制台输出以进行调试。
  • 检查点存储：存储浏览器状态的命名快照，包括DOM快照。
  • 屏幕截图存储：将图像保存在项目目录中，并使用SQLite管理元数据。

通信流

  1. MCP客户端→ 开发服务器:

    • MCP客户端更改源代码，开发服务器检测到更改
    • 开发服务器自动更新浏览器或发出HMR事件

  2. Web浏览器→ MCP服务器:

    • HMR事件和控制台日志通过Playwright捕获
    • MCP服务器查询浏览器的当前状态或捕获屏幕截图

  3. MCP服务器→ MCP客户端:

    • 服务器将HMR事件转换为结构化响应
    • 为MCP客户端提供查询HMR状态、捕获屏幕截图等工具

状态维护

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

  • 当前浏览器和页面实例
  • 最近的HMR活动

相关 MCP