{"_id":"@dogtiti/vite-plugin-react-mcp","name":"@dogtiti/vite-plugin-react-mcp","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dogtiti/vite-plugin-react-mcp","type":"module","version":"0.1.0","description":"Vite plugin for React MCP (Model-Component-Props) pattern","author":{"name":"Dogtiti"},"license":"MIT","homepage":"https://github.com/Dogtiti/vite-plugin-react-mcp","repository":{"type":"git","url":"git+https://github.com/Dogtiti/vite-plugin-react-mcp.git"},"bugs":{"url":"https://github.com/Dogtiti/vite-plugin-react-mcp/issues"},"keywords":["vite","vite-plugin","react","mcp","modelcontextprotocol","devtools","react-devtools","inspector"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint .","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build","release":"npm run build && npm publish"},"peerDependencies":{"react":">=16.8.0","vite":"^3.1.0 || ^4.0.0 || ^5.0.0"},"dependencies":{"ansis":"^1.5.5","birpc":"^0.2.17","express":"^4.18.3","hookable":"^5.5.3","pathe":"^1.1.1","vite-dev-rpc":"^0.1.0"},"devDependencies":{"@types/express":"^4.17.21","@types/node":"^20.0.0","@types/react":"^18.2.66","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.0.0","rimraf":"^5.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"_id":"@dogtiti/vite-plugin-react-mcp@0.1.0","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-OuPFcqOh45p4Vyw6ORomj2lVGe3G8+kesmqBGRqAQHJ9Y6Zf4BBdOIJc38hBbjRYfPHepajH2LVymcFI8XlFUw==","shasum":"d4d693c12e55c4a5d08cab0f068666b37fd6f4a3","tarball":"https://registry.npmjs.org/@dogtiti/vite-plugin-react-mcp/-/vite-plugin-react-mcp-0.1.0.tgz","fileCount":9,"unpackedSize":226729,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBPWAGFiXkWTz9azPJ2gopp7uVWsQataAjsUCNySYnUOAiEA5v762SR/dtoUtes6ZAxtn4DLGubKQFf7et01cOhpmRk="}]},"_npmUser":{"name":"dogtiti","email":"499960698@qq.com"},"directories":{},"maintainers":[{"name":"dogtiti","email":"499960698@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-plugin-react-mcp_0.1.0_1742281739211_0.0693103485230564"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-18T07:08:59.148Z","0.1.0":"2025-03-18T07:08:59.429Z","modified":"2025-03-18T07:08:59.634Z"},"maintainers":[{"name":"dogtiti","email":"499960698@qq.com"}],"description":"Vite plugin for React MCP (Model-Component-Props) pattern","homepage":"https://github.com/Dogtiti/vite-plugin-react-mcp","keywords":["vite","vite-plugin","react","mcp","modelcontextprotocol","devtools","react-devtools","inspector"],"repository":{"type":"git","url":"git+https://github.com/Dogtiti/vite-plugin-react-mcp.git"},"author":{"name":"Dogtiti"},"bugs":{"url":"https://github.com/Dogtiti/vite-plugin-react-mcp/issues"},"license":"MIT","readme":"# vite-plugin-react-mcp\n\n[![npm version](https://img.shields.io/npm/v/vite-plugin-react-mcp.svg)](https://www.npmjs.com/package/vite-plugin-react-mcp)\n[![license](https://img.shields.io/npm/l/vite-plugin-react-mcp.svg)](https://github.com/Dogtiti/vite-plugin-react-mcp/blob/main/LICENSE)\n\nModel Component Protocol (MCP) 的 Vite 插件 - 帮助 AI 更好地理解你的 React 应用。\n\n## 功能\n\n- 🔄 实时收集并显示 React 组件树结构\n- 🔍 检查组件 props、state 和 hooks\n- ⚡ 支持动态修改组件状态\n- 🎯 支持组件高亮显示\n- 📱 与 AI 助手和开发工具无缝集成\n\n## 安装\n\n```bash\n# npm\nnpm install vite-plugin-react-mcp --save-dev\n\n# yarn\nyarn add vite-plugin-react-mcp -D\n\n# pnpm\npnpm add vite-plugin-react-mcp -D\n```\n\n## 使用方法\n\n在你的 Vite 配置文件中添加插件：\n\n```ts\nimport react from '@vitejs/plugin-react'\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { ReactMcp } from 'vite-plugin-react-mcp'\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    ReactMcp({\n      // 可选配置项\n    })\n  ]\n})\n```\n\n## 配置项\n\n| 选项 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| `mcpPath` | `string` | `'/__mcp'` | MCP 服务路径 |\n| `updateCursorMcpJson` | `boolean \\| object` | `true` | 是否更新 Cursor 编辑器的 MCP 配置文件 |\n| `printUrl` | `boolean` | `true` | 是否在控制台打印 MCP 服务 URL |\n| `appendTo` | `string \\| RegExp` | `'src/main.tsx'` | 要注入客户端脚本的文件 |\n| `host` | `string` | `'localhost'` | MCP 服务主机 |\n| `port` | `number` | Vite 服务端口 | MCP 服务端口 |\n\n## 与 AI 助手集成\n\n### Cursor\n\n[Cursor](https://cursor.sh/) 编辑器默认支持 MCP 协议，可以自动连接到组件树。\n\n### 其他 AI 助手\n\n如果你使用的 AI 助手支持 MCP 协议，你可以在与 AI 助手交流时提供 MCP 服务的 URL：\n\n```\nMCP URL: http://localhost:5173/__mcp/sse\n```\n\n## 特性\n\n### 组件树探索\n\nMCP 服务提供实时组件树结构，AI 助手可以浏览和理解你的应用结构。\n\n### 组件状态检查\n\n检查组件的 props、state 和 hooks，帮助调试和理解组件行为。\n\n### 组件高亮\n\n通过 MCP 协议，AI 助手可以高亮显示特定组件，帮助你在 UI 中定位它们。\n\n## 许可证\n\nMIT\n","readmeFilename":"README.md","_rev":"1-44a8934a7092c14e6b828044c4ac478b"}