vite-react-mcp

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

特性

• highlight-component

  • 描述: 基于组件名称高亮 React 组件。
  • 参数:
    • componentName: string (组件名称)

  

• get-component-states

  • 描述: 获取 React 组件的 props、states 和 contexts，以 JSON 结构格式返回。
  • 参数:
    • componentName: string (组件名称)

  

• get-component-tree

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

  

• get-unnecessary-rerenders

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

  

快速开始

安装

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 Client 基于命令执行，而我们这里是基于 HTTP 的 API。 您需要编写一个脚本作为桥梁，使其看起来像是基于执行的。

工作原理

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

测试

pnpm run playground

该 playground 包含一个简单的用户个人资料应用程序，用于测试 React 组件交互。

鸣谢

该项目受到 vite-plugin-vue-mcp 的启发。 感谢将 mcp 和 devtools 连接起来的绝妙想法。

许可证

MIT