Vite MCP Server

反冲

Vite MCP 服务器现已发布 Blowback

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

向 FE 开发服务器添加模型上下文协议 (MCP) 服务器以支持与 Cursor 的集成。

主要特点

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

安装

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

资源

控制台日志

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

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

截屏

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

注意：与其他资源一样，Cursor 目前不直接支持此功能。请使用capture-screenshot工具。

工具

HMR 工具

浏览器工具

如何使用工具

日志管理系统

日志管理方法

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

检查站系统

检查点操作方法

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

架构和数据流

核心组件

1. MCP Server ：基于模型上下文协议 SDK 的中央模块，为 MCP Client 提供工具。
2. 浏览器自动化：使用 Puppeteer 控制 Chrome 来直观地检查变化。
3. 检查点系统：维护浏览器状态的快照以供比较和测试。

数据源和状态管理

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

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

通信流程

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

国家维护

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

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