vite-react-mcp

一个 Vite 插件，创建一个 MCP 服务器来帮助 LLM 理解你的 React 应用上下文

功能

• highlight-component

  • 描述：根据组件名称高亮 React 组件。
  • 参数：
    • componentName: 字符串

  

• get-component-states

  • 描述：以 JSON 结构格式获取 React 组件的属性、状态和上下文。
  • 参数：
    • componentName: 字符串

  

• get-component-tree

  • 描述：以 ASCII 格式获取当前页面的 React 组件树。
  • 参数：
    • allComponent: 布尔值，如果为真，则返回所有组件的树，而不仅仅是自定义组件。

  

• get-unnecessary-rerenders

  • 描述：获取当前页面浪费的重新渲染组件。
  • 参数：
    • timeframe: 数字，如果存在，则仅获取最后 timeframe 秒内的不必要的渲染。如果没有，则获取当前页面上发生的所有不必要的渲染。
    • allComponent: 布尔值，如果为真，则获取所有组件的不必要的渲染，而不仅仅是自定义组件。

  

快速开始

安装

pnpm install vite-react-mcp -D

您还需要安装 @babel/preset-react，因为此插件遍历 AST 来收集您的 React 组件名称。

pnpm install @babel/preset-react

使用

// vite.config.ts
import ReactMCP from 'vite-react-mcp'

export default defineConfig({
  plugins: [ReactMCP()],
})

此时，您已经可以通过访问 window.__VITE_REACT_MCP_TOOLS__ 在浏览器的开发者面板中使用这些工具了。

要将其作为 MCP 服务器使用，请在您的 MCP 客户端中设置 MCP 配置。

• 对于 Cursor，在您的 React 项目的根目录下创建一个 ./cursor/mcp.json 文件。

  {
    "mcpServers": {
      "vite-react-mcp": {
        "url": "http://localhost:3000/sse"
      }
    }
  }
  

  确保端口与您的 React 应用相同。

• 对于 Claude Desktop，需要一些变通方法。如果您感兴趣，可以查看 这个讨论。

  原因是 Claude MCP 客户端基于命令执行，而我们这里的是基于 HTTP 的 API。您需要编写一个脚本充当桥梁，使其看起来像基于命令执行。

工作原理

MCP 通过自然语言暴露工具调用 API。该工具本身被注入到您的浏览器运行时中。 它不需要 React 开发者工具扩展，因为我们使用 bippy，它将 __REACT_GLOBAL_DEVTOOLS_HOOK__ 注入到 window 中。然后，工具从 vite 的 websocket 调用中触发，接收来自您交互的 mcp 客户端的 mcp 工具调用命令，执行相应操作。

测试

pnpm run playground

测试区包含一个简单的用户资料应用，用于测试 React 组件交互。

致谢

该项目受到 vite-plugin-vue-mcp 的启发。感谢提供将 MCP 和开发者工具连接起来的绝佳想法。

许可证

MIT