vite-plugin-react-mcp
vite-plugin-react-mcpは、Reactアプリケーションの開発を効率化するためのViteプラグインです。このプラグインは、TypeScriptをサポートし、開発者が迅速にプロジェクトを構築できるようにします。特に、ホットリロードやモジュールの最適化を通じて、開発体験を向上させます。
GitHubスター
6
ユーザー評価
未評価
フォーク
0
イシュー
1
閲覧数
2
お気に入り
0
README
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