Vite React MCP

Name: Vite React MCP
Author: jazelly

@jazelly

リポジトリ

Vite React MCP について

概要はまだありません

#vite #react #mcp #plugin

基本情報

カテゴリ

その他

トランスポート

stdio

公開者

jazelly

投稿者

Jason Zhang

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

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.

FAQ from Vite React MCP

What dependencies are required?

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

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.

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

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 for details.