vite-react-mcp

library0.3.0jsnpmunverified

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.

llm-agents web-framework

npm install vite-react-mcp

package ↗

INSTALL

IMPORT

SIG · VITE-REACT-MCP

vite-react-mcp

llm-agentsjavascriptv0.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import ReactMCP from 'vite-react-mcp'

✗ const ReactMCP = require('vite-react-mcp')

ESM default export. Plugin is used as default import in vite.config.ts.

ToolResultValue

✓ import type { ToolResultValue } from 'vite-react-mcp'

✗ import { 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.

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()], })

Debug

Known issues

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.

affects: >=0.1.0 <=0.3.0

breakingvite-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.

affects: >=0.1.0

gotchaMCP 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.

affects: >=0.1.0

gotchaClaude 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.

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module '@babel/preset-react'

Missing required peer dependency @babel/preset-react

fix

Run: pnpm add @babel/preset-react

ReactMCP is not a function

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

fix

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

Cannot find name 'z'

Missing zod import for custom tool schema

fix

Add: import { z } from 'zod'

Upgrade

Version history

0.3.0latest on npm

Audit

Dependencies

viterequiredPeer dependency: requires Vite >=4 for plugin compatibility

@babel/preset-reactrequiredPeer dependency: required for Babel AST traversal to collect React component names

Agent activity

50 hits · last 30 days

node

Perplexity

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-react-mcp ↗