vite-plugin-react-mcp

vite-plugin-react-mcp

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

功能

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

安装

# npm
npm install @dogtiti/vite-plugin-react-mcp --save-dev

# yarn
yarn add @dogtiti/vite-plugin-react-mcp -D

# pnpm
pnpm add @dogtiti/vite-plugin-react-mcp -D

使用方法

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

import react from '@vitejs/plugin-react'
// vite.config.ts
import { defineConfig } from 'vite'
import { ReactMcp } from '@dogtiti/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