Advertise
MCP.so
Sign In
V

Vite React MCP Server

@jazelly

Repository

Basic information

Category

Other

Transports

stdio

Author

jazelly

Submitted by

Jason Zhang

About Vite React MCP Server

No overview available yet

#vite#react#mcp#plugin

Vite React MCP Server config

Add this server to your MCP-compatible client using the configuration below.

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

Vite React MCP Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

Fetch the live tool list directly from this server's endpoint using the button above.

Overview

What is Vite React MCP?

Vite React MCP is a Vite plugin that creates an MCP (Model Context Protocol) server to help LLMs understand your React app’s component structure, states, and performance. It is designed for developers using Vite and React who want to give AI assistants live insight into their application.

How to use Vite React MCP?

Install it as a dev dependency with pnpm install vite-react-mcp -D and also install @babel/preset-react. Add ReactMCP() to your Vite config’s plugins array. For MCP integration, configure your client: in Cursor, create ./cursor/mcp.json with a url property pointing to http://localhost:3000/sse. In Claude Desktop, a workaround script is needed because it expects command‑based execution. You can also access the tools directly via window.__VITE_REACT_MCP_TOOLS__ in the browser console.

Key features of Vite React MCP

  • Highlight a React component by its name on the page.
  • Get component props, states, and contexts as JSON.
  • Display the component tree of the current page in ASCII format.
  • Report wasted re‑renders (unnecessary re‑renders) with a time filter.
  • Works without the React DevTools extension.

Use cases of Vite React MCP

  • Debug a complex component’s current props and state during a chat session.
  • Identify and fix performance issues by listing unnecessary re‑renders.
  • Let an LLM explore your app’s component hierarchy without reading the source code.
  • Visually pinpoint a specific component on the page to verify its render state.

Frequently asked questions

1

What dependencies are required?

You need `@babel/preset-react` installed because the plugin traverses the AST to collect React component names.

2

How does it work without React DevTools?

It uses `bippy` to inject a `__REACT_GLOBAL_DEVTOOLS_HOOK__` into the window, which provides access to React’s internal state without needing the DevTools extension.

3

What transport does the MCP server use?

The server exposes an HTTP endpoint via SSE at `http://localhost:3000/sse` (the same port as your Vite dev server).

4

Can I use this with Claude Desktop?

Yes, but it requires a custom bridge script because Claude Desktop expects command‑based execution, while this MCP server is HTTP‑based. See [this discussion](https://github.com/orgs/modelcontextprotocol/discussions/16) for details.

5

Does the component tree include all components by default?

No. By default it shows only self‑defined components. Pass `allComponent: true` to get the full tree.

Comments

More Other MCP servers

DeepMark

DeepMark helps teachers deliver rapid, consistent marking with meaningful feedback for every student — in a fraction of the time. What once took a week, now takes one free period.

Reactive Resume

amruthpillai

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

39.5K

Health by Dr Brad

Dr Brad Stanfield

Health by Dr Brad works out a health plan from your own results: which screening is due at your age, and evidence-based suggestions, each with the reason and the published guideline or study behind it. Your record is one

YOUB

Connect your AI assistant to your own YOUB endurance training account. Read recorded activities with full analysis, planned sessions, race goals, wellness (HRV, sleep, resting HR) and your athletic profile. Create or mov

MaxKB

1Panel-dev

🔥 MaxKB is an open-source platform for building enterprise-grade agents. 强大易用的开源企业级智能体平台。

22.0K
Advertise