What is Vite React Mcp

vite-react-mcp is a Vite plugin that creates an MCP server to assist Large Language Models (LLMs) in understanding the context of your React application.

Use cases

Use cases for vite-react-mcp include debugging React applications, optimizing performance by identifying unnecessary re-renders, and visualizing component hierarchies for better understanding of application structure.

How to use

To use vite-react-mcp, install it via pnpm with the command ‘pnpm install vite-react-mcp -D’. Then, import and include it in your Vite configuration file (vite.config.ts) as a plugin.

Key features

Key features of vite-react-mcp include: 1) Highlighting React components based on their names, 2) Getting a tree-like representation of the component tree, and 3) Identifying unnecessary re-renders in the current page.

Where to use

vite-react-mcp is suitable for use in web development projects that utilize React, particularly those that require optimization and analysis of component interactions.

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.

Test

pnpm run playground

The playground contains a simple user profile application to test React component interactions.

Acknowledgement

This project is inspired by vite-plugin-vue-mcp. Thanks for the awesome idea bridging mcp and devtools.

License

MIT