广告合作
MCP.so
登录
V

Vite React MCP Server

@jazelly

代码仓库

基本信息

分类

其他

传输方式

stdio

作者

jazelly

提交者

Jason Zhang

关于 Vite React MCP Server

暂无概览

#vite#react#mcp#plugin

Vite React MCP Server 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

Vite React MCP Server 工具

工具列表暂未提供

当前收录暂时没有可展示的工具列表，不代表服务没有工具。请查阅项目文档了解支持的能力。

点击上方按钮,直接连接服务器端点实时获取工具列表。

概览

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.

常见问题

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.

评论

其他 分类下的更多 MCP 服务器

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K

Hindsight

vectorize-io

Hindsight: Agent Memory That Learns

50.4K

Klarix Intelligence Engine

Klarix

B2B competitive intelligence, live sales battlecards, 5-axis ICP prospect fit scoring, and tech stack teardowns over MCP and REST with cited public-web evidence.

Awesome Mlops

visenger

A curated list of references for MLOps

14.0K
广告合作