vite mcp
Vite插件，为Vite开发提供模型上下文协议（MCP）服务器功能，使MCP客户端能够通过适配器与浏览器环境交互。
为什么要使用？
此插件为您的代理提供了浏览器内的实际眼睛。在Vite HMR期间，它不再盲目工作，现在可以通过MCP工具实时查看UI、控制台和页面状态，如果你有贡献，还可以看到更多！
安装
npm install vite-mcp用法
基本设置
// vite.config.ts
import { defineConfig } from "vite";
import { viteMcp } from "vite-mcp";
export default defineConfig({
plugins: [viteMcp()],
});自定义适配器
import { viteMcp } from "vite-mcp";
import { consoleAdapter } from "vite-mcp/adapters";
export default defineConfig({
plugins: [
viteMcp({
adapters: [
consoleAdapter,
// Add your custom adapters here ( experimental )
],
}),
],
});使用适配器
import {
consoleAdapter,
cookieAdapter,
localStorageAdapter,
sessionStorageAdapter,
cacheAdapter,
indexedDBAdapter,
performanceAdapter,
componentTreeAdapter,
} from "vite-mcp/adapters";框架支持
该插件会自动为简单的HTML文件注入桥接脚本。对于动态生成HTML的框架（React Router、Remix、TanStack Start等），您需要在应用程序入口点手动包含虚拟模块。
按框架划分的条目文件位置：
- React路由器/TanStack路由器：
src/main.tsx或src/entry.client.tsx - 混音：
app/entry.client.tsx - TanStack启动：
src/entry-client.tsx - 标准快速（反应/视图/细长）：
src/main.tsx,src/main.js，或App.vue（可选，自动注射）
将此添加到 非常顶部 您的条目文件（在任何其他导入之前）：
/// add reference only if the type throws, else fine! no need to reference
///
import "virtual:mcp";TypeScript支持
为避免引用指令，请添加 tsconfig.json:
{
"compilerOptions": { ... },
"include": [
"src/**/*",
"node_modules/vite-mcp/vite-mcp-env.d.ts"
]
}虚拟模块将自动初始化浏览器桥，并通过Vite的HMR WebSocket连接到MCP服务器。
可用适配器
- 控制台适配器 -从浏览器读取控制台消息
- cookie适配器 -从浏览器读取Cookie
- 本地存储适配器 -读取本地存储项
- sessionStorageAdapter -读取会话存储项
- cacheAdapter -管理缓存API（列出、获取/设置/删除条目）
- 索引DBA适配器 -管理IndexedDB（列出数据库，获取/设置/删除条目）
- 性能适配器 -获取性能指标（Web重要信息、导航时间、资源时间）
- componentTreeAdapter -获取组件树结构（React、Vue、Svelte）和路由信息
- 贡献 -贡献新的适配器
MCP端点
该插件在以下位置公开了一个MCP服务器 /__mcp 端点为默认值。MCP客户端可以连接到此端点以与浏览器环境交互。
MCP服务器配置
// .mcp.json
{
"mcpServers": {
"vite-dev-mcp": {
"url": "http://localhost:5173/__mcp"
}
}
}验证设置
添加导入后，您应该看到 [vite-mcp] Bridge: Bridge ready! 在浏览器控制台中。如果您没有看到此消息：
- 检查您是否处于开发模式 -这座桥只在开发中使用
- 验证导入是否位于顶部 -它必须在任何其他代码之前
- 检查浏览器控制台是否有错误 -查找任何导入或模块错误
- 验证Vite HMR是否正常工作 -网桥需要Vite的HMR WebSocket
测试控制台捕获
要验证是否捕获了控制台消息，请执行以下操作：
- 打开浏览器控制台
- 运行：
console.log("Test message") - 检查
window.__mcpConsoleMessages-您应该在数组中看到您的消息 - 使用MCP
read_console工具-它应该返回您的消息
如果 window.__mcpConsoleMessages 未定义，控制台捕获脚本未运行。确保：
- 这
virtual:mcp导入位于条目文件的最顶部 - 您处于开发模式
- 模块加载成功（检查错误）
或者使用在线工具，如 MCP游乐场 在以下位置测试MCP服务器 http://localhost:(viteport)/__mcp.
路线图和TODO
- \[ \] 用户自定义适配器/插件:\
允许用户创建和注册自己的自定义适配器和插件，用于定制数据收集和浏览器自动化。
- \[ \] 网络日志:\
捕获并显示所有浏览器网络请求和响应，以进行高级调试和跟踪（XHR、fetch、websockets等）。
- \[x\] 组件路线:\
可视化和检查前端路由，包括组件与其活动路由之间的映射（通过 componentTreeAdapter).
- \[x\] 组件树:\
显示支持框架（React、Vue等）的实时交互式组件树，以便更好地进行自检和状态跟踪（通过 componentTreeAdapter).
- \[x\] 缓存存储:\
列出并检查来自浏览器缓存存储API的所有缓存数据（通过 cacheAdapter).
- \[x\] 索引数据库浏览器:\
浏览、查询和检查浏览器IndexedDB数据库中的所有记录/表（通过 indexedDBAdapter).
- \[ \] 服务人员监控:
- \[x\] 控制台/日志筛选:
- \[x\] 性能指标:\
显示核心网络生命体征、页面加载时间和实际用户指标，以进行性能分析（通过 performanceAdapter).
- \[ \] 远程调试功能:
_如果您对更多功能或用例有建议，请打开问题或讨论！_
许可证和信用证
该项目发布于 MIT许可证.