Vite Plugin React Mcp
What is Vite Plugin React Mcp
vite-plugin-react-mcp is a Vite plugin designed to enhance AI understanding of React applications by implementing the Model Component Protocol (MCP).
Use cases
Use cases include debugging complex React applications, visualizing component structures for better understanding, and integrating with AI tools to facilitate development.
How to use
To use vite-plugin-react-mcp, install it via npm, yarn, or pnpm and add it to your Vite configuration file. You can customize options like MCP service path and host.
Key features
Key features include real-time collection and display of the React component tree, inspection of component props, state, and hooks, dynamic state modification, component highlighting, and seamless integration with AI assistants and development tools.
Where to use
vite-plugin-react-mcp is suitable for use in React applications that require enhanced debugging and AI interaction capabilities.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Vite Plugin React Mcp
vite-plugin-react-mcp is a Vite plugin designed to enhance AI understanding of React applications by implementing the Model Component Protocol (MCP).
Use cases
Use cases include debugging complex React applications, visualizing component structures for better understanding, and integrating with AI tools to facilitate development.
How to use
To use vite-plugin-react-mcp, install it via npm, yarn, or pnpm and add it to your Vite configuration file. You can customize options like MCP service path and host.
Key features
Key features include real-time collection and display of the React component tree, inspection of component props, state, and hooks, dynamic state modification, component highlighting, and seamless integration with AI assistants and development tools.
Where to use
vite-plugin-react-mcp is suitable for use in React applications that require enhanced debugging and AI interaction capabilities.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
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
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
