vite MCP

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! 在浏览器控制台中。如果您没有看到此消息：

1. 检查您是否处于开发模式 -这座桥只在开发中使用
2. 验证导入是否位于顶部 -它必须在任何其他代码之前
3. 检查浏览器控制台是否有错误 -查找任何导入或模块错误
4. 验证Vite HMR是否正常工作 -网桥需要Vite的HMR WebSocket

测试控制台捕获

要验证是否捕获了控制台消息，请执行以下操作：

1. 打开浏览器控制台
2. 运行： console.log("Test message")
3. 检查 window.__mcpConsoleMessages -您应该在数组中看到您的消息
4. 使用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许可证.