{"id":22942,"library":"vite-react-mcp","title":"vite-react-mcp","description":"A Vite plugin (v0.3.0) that creates an MCP server to help LLMs understand React app context by exposing tools like highlight-component, get-component-states, get-component-tree, and get-unnecessary-rerenders. It uses bippy to inject React internals without requiring React DevTools extension. Designed solely for development, it supports custom user-defined tools via JS/TS modules. Requires @babel/preset-react for AST traversal and Vite >=4. Alternative to traditional React DevTools for AI-assisted debugging.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","react","mcp","devtools","llm","plugin","typescript"],"install":[{"cmd":"npm install vite-react-mcp","lang":"bash","label":"npm"},{"cmd":"yarn add vite-react-mcp","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-react-mcp","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vite >=4 for plugin compatibility","package":"vite","optional":false},{"reason":"Peer dependency: required for Babel AST traversal to collect React component names","package":"@babel/preset-react","optional":false}],"imports":[{"note":"ESM default export. Plugin is used as default import in vite.config.ts.","wrong":"const ReactMCP = require('vite-react-mcp')","symbol":"default","correct":"import ReactMCP from 'vite-react-mcp'"},{"note":"TypeScript type import for custom tool return values. Should use `import type` to avoid runtime inclusion.","wrong":"import { ToolResultValue } from 'vite-react-mcp'","symbol":"ToolResultValue","correct":"import type { ToolResultValue } from 'vite-react-mcp'"},{"note":"Custom tool schemas require zod for runtime validation. The plugin expects zod objects; no explicit re-export from vite-react-mcp.","wrong":"","symbol":"customTools schema","correct":"import { z } from 'zod'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport ReactMCP from 'vite-react-mcp'\n\nexport default defineConfig({\n  plugins: [ReactMCP()],\n})\n","lang":"typescript","description":"Minimal setup: install vite-react-mcp and @babel/preset-react, add the plugin to vite.config.ts, then run dev server."},"warnings":[{"fix":"Keep @babel/preset-react installed; watch changelog for removal.","message":"@babel/preset-react is required but may be removed in future versions if alternative traversal is used","severity":"deprecated","affected_versions":">=0.1.0 <=0.3.0"},{"fix":"Do not import this plugin in production builds. Use environment checks.","message":"vite-react-mcp is meant for dev environment only; using in production will cause bundle errors","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Ensure you access the tools after the page has loaded and the plugin is injected.","message":"MCP tools are exposed via window.__VITE_REACT_MCP_TOOLS__ but only after the Vite dev server starts","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Write a bridge script that translates serialized commands to HTTP requests to localhost:3000/sse.","message":"Claude Desktop MCP client requires a command-based execution, but vite-react-mcp exposes HTTP SSE - needs a bridge script","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run: pnpm add @babel/preset-react","cause":"Missing required peer dependency @babel/preset-react","error":"Cannot find module '@babel/preset-react'"},{"fix":"Use: import ReactMCP from 'vite-react-mcp' (ESM default import)","cause":"Incorrect import (e.g., destructured default) or using CommonJS require","error":"ReactMCP is not a function"},{"fix":"Add: import { z } from 'zod'","cause":"Missing zod import for custom tool schema","error":"Cannot find name 'z'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}