vite-react-mcp

0.3.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Cannot find module '@babel/preset-react' ↓

cause Missing required peer dependency @babel/preset-react

fix

Run: pnpm add @babel/preset-react

error ReactMCP is not a function ↓

cause Incorrect import (e.g., destructured default) or using CommonJS require

fix

Use: import ReactMCP from 'vite-react-mcp' (ESM default import)

error Cannot find name 'z' ↓

cause Missing zod import for custom tool schema

fix

Add: import { z } from 'zod'

Warnings

deprecated @babel/preset-react is required but may be removed in future versions if alternative traversal is used ↓

fix Keep @babel/preset-react installed; watch changelog for removal.

breaking vite-react-mcp is meant for dev environment only; using in production will cause bundle errors ↓

fix Do not import this plugin in production builds. Use environment checks.

gotcha MCP tools are exposed via window.__VITE_REACT_MCP_TOOLS__ but only after the Vite dev server starts ↓

fix Ensure you access the tools after the page has loaded and the plugin is injected.

gotcha Claude Desktop MCP client requires a command-based execution, but vite-react-mcp exposes HTTP SSE - needs a bridge script ↓

fix Write a bridge script that translates serialized commands to HTTP requests to localhost:3000/sse.

Install

npm install vite-react-mcp

yarn add vite-react-mcp

pnpm add vite-react-mcp

Imports

default
wrong
```
const ReactMCP = require('vite-react-mcp')
```
correct
```
import ReactMCP from 'vite-react-mcp'
```
ESM default export. Plugin is used as default import in vite.config.ts.
ToolResultValue
wrong
```
import { ToolResultValue } from 'vite-react-mcp'
```
correct
```
import type { ToolResultValue } from 'vite-react-mcp'
```
TypeScript type import for custom tool return values. Should use `import type` to avoid runtime inclusion.
customTools schema
```
import { z } from 'zod'
```
Custom tool schemas require zod for runtime validation. The plugin expects zod objects; no explicit re-export from vite-react-mcp.

Quickstart

Minimal setup: install vite-react-mcp and @babel/preset-react, add the plugin to vite.config.ts, then run dev server.

// vite.config.ts
import { defineConfig } from 'vite'
import ReactMCP from 'vite-react-mcp'

export default defineConfig({
  plugins: [ReactMCP()],
})