Vite MCP 服务器

反冲

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

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

主要特点

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

安装

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

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

资源

控制台日志

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

注意：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

security - not tested

license - not found

quality - not tested

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

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

Related Resources

Reddit Discussion about this server

Related MCP Servers

Cursor MCP Server
Buga-luga
-
security
A
license
-
quality
Facilitates integration with the Cursor code editor by enabling real-time code indexing, analysis, and bi-directional communication with Claude, supporting concurrent sessions and automatic reconnection.
Last updated -
2
21
31
TypeScript
MIT License
Cursor MCP Server
johnneerdael
-
security
A
license
-
quality
Acts as a bridge between Claude's desktop application and the Cursor editor, enabling seamless AI-powered automation and multi-instance management across platforms with standardized communication and secure token-based authentication.
Last updated -
21
46
TypeScript
MIT License
AI Development Assistant MCP Server
kleneway
-
security
A
license
-
quality
An AI-powered development toolkit for Cursor providing intelligent coding assistance through advanced reasoning, UI screenshot analysis, and code review tools.
Last updated -
839
240
TypeScript
MIT License
AI Development Assistant MCP Server
yeakub108
-
security
A
license
-
quality
A Cursor-compatible toolkit that provides intelligent coding assistance through custom AI tools for code architecture planning, screenshot analysis, code review, and file reading capabilities.
Last updated -
839
2
TypeScript
MIT License

View all related MCP servers

Vite MCP Server

反冲