Vite MCP Server

简介

Vite MCP 服务器为 Vite 开发服务器添加模型上下文协议(MCP)功能，支持与 Cursor 集成，提供浏览器控制台日志捕获、HMR 事件监控和浏览器自动化功能。

安装

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

{
  "vite-hmr": {
    "command": "npx",
    "args": ["-y", "vite-mcp-server"]
  }
}

主要功能

HMR 工具

• 初始化连接: init-vite-connection - 连接到项目开发服务器
• 监控 HMR: get-hmr-events - 获取最近的热更新事件
• 检查状态: check-hmr-status - 验证 HMR 连接状态

浏览器工具

• 启动浏览器: start-browser - 打开浏览器并导航至开发服务器
• 屏幕截图: capture-screenshot - 捕获页面或元素截图
• 获取日志: get-console-logs - 检索并过滤控制台日志
• DOM 交互: 提供多种工具获取元素属性、样式和HTML内容

日志系统

• 使用循环缓冲区存储最多1000行日志
• 支持检查点功能，最多保留2个检查点日志文件
• 按时间戳顺序存储日志

架构概览

• MCP 服务器: 中央模块，向 Cursor 提供工具和数据
• Vite HMR 客户端: 维护与开发服务器的WebSocket连接
• 浏览器自动化: 使用Puppeteer提供可视化功能
• 检查点系统: 维护浏览器状态快照

使用示例

// 1. 初始化连接
init-vite-connection

// 2. 启动浏览器
start-browser

// 3. 获取控制台日志
get-console-logs --filter="error"

// 4. 检查HMR状态
check-hmr-status

通过这些工具，您可以监控Vite开发服务器的状态，捕获浏览器行为，并提高开发效率。