Vite React MCP

vite反应mcp

](https://npmjs.com/package/vite-react-mcp) ](https://npmjs.com/package/vite-react-mcp)

一个Vite插件，创建一个MCP服务器来帮助LLM理解你的React应用程序上下文

特性

• highlight-component

- description:根据组件名称突出显示React组件。 - 参数： - componentName：string

highlight-component

• get-component-states

- description:获取JSON结构格式的React组件属性、状态和上下文。 - 参数： - componentName：string

get-component-states

• get-component-tree

- description:以ASCII格式获取当前页面的React组件树。 - 参数： - allComponent：boolean，如果为true，则返回所有组件的树，而不是仅返回自定义组件。

get-component-tree

• get-unnecessary-rerenders

- description:获取当前页面中浪费的重新渲染组件。 - 参数： - timeframe：number，如果存在，只会在最后一个渲染中获得不必要的渲染 timeframe 秒。如果没有，则获取当前页面上发生的所有不必要的渲染。 - allComponent：boolean，如果为true，则为所有组件获取不必要的渲染，而不仅仅是自定义组件。

get-unnecessary-rerenders

• 自定义工具

现在，您可以在Vite项目的JS/TS中定义自己的工具函数，并注入它 到插件。

custom-tools

入门指南

安装

pnpm install vite-react-mcp -D

你还需要 @babel/preset-react 安装后，此插件会遍历AST以收集您的React组件名称。

pnpm install @babel/preset-react

用法

内置工具

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

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

定制工具

在Vite项目中定义自己的工具，例如。

// any ts file in your Vite project
import type { ToolResultValue } from 'vite-react-mcp';

export default function myCustomTool(args: { message: string }): ToolResultValue {
  const { message } = args;
  console.log(`[custom-tool/log1] ${message}`);
  return {
    success: true,
    message: `Log1 received: ${message}`,
  };
}

// vite.config.ts
import ReactMCP from 'vite-react-mcp'
import log1 from 'path/to/your/module'

export default defineConfig({
  plugins: [ReactMCP({
    customTools: [
      {
        name: 'log1',
        description: 'Log1',
        schema: z.object({
          message: z.string(),
        }),
        clientFunction: log1,
      }
    ]
  })],
})

然后在dev中运行您的应用程序。

注意：vite-react-mcp仅用于开发环境

此时，您已经可以访问 window.__VITE_REACT_MCP_TOOLS__ 使用浏览器上“开发人员”面板中的工具。

要将其作为MCP服务器公开，请在MCP客户端中设置MCP配置。

• 对于游标，创建一个 ./cursor/mcp.json 在react项目的根级别。

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

确保端口与您的react应用程序相同

• 对于Claude Desktop来说，它需要一些变通方法。如果你感兴趣，可以看看 这个线程.

原因是Claude MCP客户端基于命令执行，而我们这里有基于HTTP的API。你需要编写一个充当桥梁的脚本，使其看起来像是基于执行的。

运作原理

此插件将MCP服务器与React应用程序的运行时连接起来，使LLM能够在实时浏览器会话中检查您的组件并与之交互。以下是全貌：

体系结构概述

MCP Client (Cursor, etc.)
     │
     │  SSE + HTTP POST (/sse, /messages)
     ▼
Vite Dev Server (Node.js)
  ├── MCP Server (handles tool listing & calls)
  └── HMR WebSocket
         │
         │  custom events via Vite HMR
         ▼
      Browser
  ├── overlay.js (tool implementations + WebSocket listeners)
  ├── bippy (React fiber access via __REACT_DEVTOOLS_GLOBAL_HOOK__)
  └── window.__VITE_REACT_MCP_TOOLS__ (tool registry)

逐步

1. Babel AST通行证（构建时） --在Vite的 transform 钩子，每个 .js/.jsx/.ts/.tsx 文件解析如下 @babel/preset-react 收集所有用户定义的React组件名称（函数组件、类组件、函数组件等）， memo/forwardRef 包装纸等）。这些名称将被存储，然后以如下方式注入到页面中 window.__REACT_COMPONENTS__.

1. 浏览器端注入（运行时） --在开发启动时，脚本被注入到HTML中 ``:

- 收集的组件名称设置在 window.__REACT_COMPONENTS__. - overlay.js 作为模块加载。使用 bippy 安装a __REACT_DEVTOOLS_GLOBAL_HOOK__ 上 window，提供对React纤维树的直接访问 无需React DevTools浏览器扩展它还与React的提交生命周期挂钩(onCommitFiberRoot)以连续跟踪光纤根并检测不必要的重新渲染。 - 该覆盖层公开了上的所有内置工具功能（突出显示、树、状态、重新渲染） window.__VITE_REACT_MCP_TOOLS__ 并注册Vite HMR监听器(import.meta.hot.on(...))对于每个工具。

1. MCP服务器（SSE传输） --当Vite-dev服务器启动时，插件会附加两个HTTP端点：

- GET /sse --与MCP客户端建立长期的服务器发送事件连接。 - POST /messages?sessionId= --从MCP客户端接收JSON-RPC工具调用请求。

MCP服务器通告所有内置和自定义工具（具有从其Zod模式派生的JSON模式描述），以便任何兼容MCP的客户端都可以发现和调用它们。

1. 工具调用流程 --当MCP客户端调用工具时（例如。 highlight-component):

1. MCP服务器通过以下方式接收JSON-RPC请求 /messages 终点。 1. 它根据工具的Zod模式验证参数。 1. 它通过Vite的HMR WebSocket向浏览器发送自定义事件（例如。 highlight-component 使用序列化的参数）。 1. 浏览器端的HMR监听器接收事件，对实时React纤维树执行工具函数，并通过另一个HMR事件（例如。 highlight-component-response). 1. MCP服务器等待此响应，将其封装在JSON-RPC结果中，并通过SSE将其流式传输回MCP客户端。

1. 定制工具 --用户定义的工具遵循相同的WebSocket往返。它们的处理函数在启动时通过动态注册表在浏览器中注册 import() 自动创建相应的HMR监听器。

测试

pnpm run playground

游乐场包含一个简单的用户配置文件应用程序，用于测试React组件交互。

致谢

这个项目的灵感来自 快速插件视图MCP感谢您提出的将mcp和devtools连接起来的绝妙想法。

许可证

麻省理工学院