vite麦普服务器

Name: vite麦普服务器
Author: ESnark

作者：ESnark21 星标更新：2025-09-11

安装使用来源：spider==github.com

项目介绍

Blowback

Vite MCP Server 现在更名为 Blowback

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

一个模型上下文协议（MCP）服务器，它将前端开发服务器与AI工具如Claude Desktop和Cursor集成。

如何使用

命令（Claude Code）：

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

或者使用 JSON 配置：

Claude Code: {PROJECT_ROOT}/.mcp.json
Cursor: {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 提示为AI助手提供了如何有效使用以下功能的指导：

Cursor Chat 不支持MCP提示功能，因此此功能不可用。（推荐使用Claude Code）如果需要，手动输入以下提示：

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

当激活检查点时，在浏览器中生成的控制台日志会被标记上检查点ID，并可以单独查询。

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

您可以使用 capture-screenshot 工具来截取屏幕截图。截取的屏幕截图存储在 @.mcp_screenshot/ 目录中。

工具

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`	提供关于如何使用服务器特定功能的说明

资源

截图

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

对应于参考ID的图像存储在 {PROJECT_ROOT}/.mcp_screenshot/ 目录中。

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

根据URL查询截图

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

注意：从版本1.0起，默认情况下禁用了通过资源的Blob响应，并返回文件引用信息

URI模板: screenshot://{+path}
示例: screenshot://localhost:5173/about
使用不带协议（http://, https://）的URL路径

数据存储结构

截图存储

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

日志管理系统

捕获浏览器控制台日志并将其保存到文件以供查询
只有在激活检查点时才保存检查点日志

检查点系统

检查点的工作原理

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

架构和数据流

核心组件

MCP服务器：中心模块，使用模型上下文协议SDK向AI工具暴露工具和资源。
浏览器自动化：使用Playwright控制Chrome进行视觉检查、截图捕获和DOM操作。
检查点系统：维护浏览器状态的快照，用于比较和测试。
SQLite数据库：高效管理截图元数据，支持快速基于URL的查询。

数据源和状态管理

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

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

通信流程

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

状态维护

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

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