vite-plugin-react-mcp

Model Component Protocol (MCP) 的 Vite 插件 - 帮助 AI 更好地理解你的 React 应用。

功能

• 🔄 实时收集并显示 React 组件树结构
• 🔍 检查组件 props、state 和 hooks
• ⚡ 支持动态修改组件状态
• 🎯 支持组件高亮显示
• 📱 与 AI 助手和开发工具无缝集成

安装

# npm
npm install vite-plugin-react-mcp --save-dev

# yarn
yarn add vite-plugin-react-mcp -D

# pnpm
pnpm add vite-plugin-react-mcp -D

使用方法

在你的 Vite 配置文件中添加插件：

import react from '@vitejs/plugin-react'
// vite.config.ts
import { defineConfig } from 'vite'
import { ReactMcp } from 'vite-plugin-react-mcp'

export default defineConfig({
  plugins: [
    react(),
    ReactMcp({
      // 可选配置项
    })
  ]
})

配置项

| 选项 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | mcpPath | string | '/__mcp' | MCP 服务路径 | | updateCursorMcpJson | boolean \| object | true | 是否更新 Cursor 编辑器的 MCP 配置文件 | | printUrl | boolean | true | 是否在控制台打印 MCP 服务 URL | | appendTo | string \| RegExp | 'src/main.tsx' | 要注入客户端脚本的文件 | | host | string | 'localhost' | MCP 服务主机 | | port | number | Vite 服务端口 | MCP 服务端口 |

与 AI 助手集成

Cursor

Cursor 编辑器默认支持 MCP 协议，可以自动连接到组件树。

其他 AI 助手

如果你使用的 AI 助手支持 MCP 协议，你可以在与 AI 助手交流时提供 MCP 服务的 URL：

MCP URL: http://localhost:5173/__mcp/sse

特性

组件树探索

MCP 服务提供实时组件树结构，AI 助手可以浏览和理解你的应用结构。

组件状态检查

检查组件的 props、state 和 hooks，帮助调试和理解组件行为。

组件高亮

通过 MCP 协议，AI 助手可以高亮显示特定组件，帮助你在 UI 中定位它们。

许可证

MIT