Vite React MCP

Created By

jazelly8 months ago

# vite

# react

Overview Content Tools Comments

Content

vite-react-mcp

A Vite plugin that creates an MCP server to help LLMs understand your React App context

Features

highlight-component
- description: Highlight React component based on the component name.
- params:
  - componentName: string
get-component-states
- description: Get the React component props, states, and contexts in JSON structure format.
- params:
  - componentName: string
get-component-tree
- description: Get the React component tree of the current page in ASCII format.
- params:
  - allComponent: boolean, if truthy, return a tree for all components instead of your self-defined components only.
get-unnecessary-rerenders
- description: Get the wasted re-rendered components of the current page.
- params:
  - timeframe: number, if present, only get unnecessary renders within the last timeframe seconds. If not, get all unnecessary renders happened on the current page.
  - allComponent: boolean, if truthy, get unnecessary renders for all components instead of self-defined components only.

Getting Started

Installation

pnpm install vite-react-mcp -D

You also need @babel/preset-react installed, as this plugins traverses AST to collect your React components names.

pnpm install @babel/preset-react

Usage

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

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

At this point, you already can access window.__VITE_REACT_MCP_TOOLS__ to use the tools in Developer panel on your browser.

To use it as an MCP server, setup MCP configuration in your MCP client.

For Cursor, create a ./cursor/mcp.json at the root level of your react project.

{
  "mcpServers": {
    "vite-react-mcp": {
      "url": "http://localhost:3000/sse"
    }
  }
}

Make sure the port is the same as your react app

For Claude Desktop, it requires a bit of workaround. If you are interested, you can take a look at this thread.

The reason is Claude MCP Client does execution based on command, while what we have here is HTTP based API. You need to write a script acting as a bridge to make it look like execution based.

How it works

MCP exposes a tool-call api through natural language. The tool itself is injected on your browser runtime. It works without requiring React Devtools extension, as we use bippy, which injects a __REACT_GLOBAL_DEVTOOLS_HOOK__ to window. The tool then is triggered from vite's websocket call to do corresponding actions by receiving mcp tool call command from the mcp client you interact.