local-only server
The server can only run on the client’s local machine because it depends on local resources.
Integrations
Requires Node.js 20 or higher to run the MCP server and connect to Vite development environments.
Leverages Puppeteer for browser automation to capture screenshots, monitor console logs, inspect element properties, track network requests, and create checkpoints for visual verification during Vite development.
Integrates with Vite's Hot Module Replacement (HMR) system to enable real-time code updates. Allows monitoring HMR events, connecting to a running Vite dev server, and observing live updates when code is modified.
反冲
Vite MCP 服务器现已发布 Blowback
Blowback 旨在支持各种 FE 开发服务器，而不仅仅是 Vite
向 FE 开发服务器添加模型上下文协议 (MCP) 服务器以支持与 Cursor 的集成。
主要特点
- FE开发服务器与MCP服务器集成
- 通过 MCP 捕获和传输浏览器控制台日志
- 基于检查点的日志管理
安装
将服务器添加到您的 Cursor MCP 配置中：
资源
控制台日志
用于检索浏览器控制台日志的资源。
注意：Cursor 目前不支持 MCP 资源功能。请使用get-console-logs工具。
截屏
用于捕获和管理屏幕截图的资源。
注意：与其他资源一样，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 Server ：基于模型上下文协议 SDK 的中央模块，为 MCP Client 提供工具。
- 浏览器自动化：使用 Puppeteer 控制 Chrome 来直观地检查变化。
- 检查点系统：维护浏览器状态的快照以供比较和测试。
数据源和状态管理
服务器维护几个重要的数据存储：
- HMR 事件记录：跟踪来自 Vite 的最近的 HMR 事件（更新、错误）。
- 控制台消息日志：捕获浏览器控制台输出以进行调试。
- 检查点存储：存储浏览器状态的命名快照，包括 DOM 快照。
通信流程
- MCP 客户端 → 开发服务器：
- MCP 客户端更改源代码，开发服务器检测到更改
- 开发服务器自动更新浏览器或发出 HMR 事件
- Web 浏览器 → MCP 服务器：
- HMR 事件和控制台日志通过 Puppeteer 捕获。
- MCP 服务器查询浏览器的当前状态或截取屏幕截图
- MCP 服务器 → MCP 客户端：
- 服务器将 HMR 事件转换为结构化响应。
- 为 MCP 客户端提供查询 HMR 状态和捕获屏幕截图的工具。
国家维护
服务器维护以下引用对象：
- 当前浏览器和页面实例
- 最近的 HMR 活动
This server cannot be installed
将 Cursor AI 与 Vite Dev 服务器集成，允许 AI 代理实时修改代码并通过热模块替换系统观察实时更新。
- Key Features
- Installation
- Resources
- Tools
- Log Management System
- Checkpoint System
- Architecture and Data Flow