JinDaGe - Vite React MCP MCP Details

article

README

🚀 vite-react-mcp

一个 Vite 插件，用于创建 MCP 服务器以帮助 LLM 理解您的 React 应用上下文。借助该插件，您可以轻松对 React 组件进行高亮显示、获取组件状态、组件树以及不必要的重绘信息等。

[![npm 版本][npm-version-src]][npm-version-href] [![npm 下载量][npm-downloads-src]][npm-downloads-href]

✨ 主要特性

highlight-component
- 描述：根据组件名称突出显示 React 组件。
- 参数：
  - componentName：字符串
- 示例效果：
get-component-states
- 描述：获取 React 组件的 props、状态和上下文，并以 JSON 格式返回。
- 参数：
  - componentName：字符串
- 示例效果：
get-component-tree
- 描述：获取当前页面的 React 组件树（ASCII 格式）。
- 参数：
  - allComponent：布尔值，如果为真，则返回所有组件的树，而不是仅自定义组件。
- 示例效果：
get-unnecessary-rerenders
- 描述：获取当前页面中不必要的重新渲染组件。
- 参数：
  - 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({
      // 配置选项
    })
  ]
})

安装插件后，您可以在项目中使用以下命令来访问工具：

highlight-component：突出显示 React 组件。
get-component-states：获取组件状态。
get-component-tree：获取组件树。
get-unnecessary-rerenders：获取不必要的重绘。

作为 MCP 服务器

使用 Cursor

安装插件并运行：
```
pnpm run dev
```

在您的项目中使用以下代码：

import React from 'react'
import { createRoot } from 'react-dom/client'

function App() {
  return <div>Hello World</div>
}

const container = document.getElementById('root')
const root = createRoot(container)
root.render(<App />)

访问 http://localhost:5173 查看结果。

使用 Claude Desktop

要在 Claude Desktop 中使用插件，请参阅工作坊。

🔧 技术细节

此插件通过 Vite 的 WebSocket 调用工具命令，并将结果显示到控制台。它利用了 Bippy 库来注入全局变量，从而实现组件的高亮显示和状态获取。

测试

运行以下命令以访问示例应用程序：

pnpm run dev

然后访问 http://localhost:5173 查看结果。

致谢

感谢 Vite 插件模板为本项目提供灵感和基础代码结构。

📄 许可证

MIT License

Vite React MCP