使用说明

项目简介

vite-react-mcp 是一个 Vite 插件，它在你的 React 开发服务器中集成了一个 Model Context Protocol (MCP) 服务器。这个插件旨在帮助大型语言模型 (LLM) 理解你的 React 应用程序的上下文，从而实现更智能的开发辅助工具和调试能力。通过 MCP 协议，LLM 客户端可以请求 Vite React MCP 服务器提供的关于 React 组件的信息和操作，例如高亮组件、获取组件树、检测不必要的重新渲染等。

主要功能点

组件高亮 (highlight-component)：允许 LLM 根据组件名称高亮页面上的 React 组件，方便开发者快速定位和查看组件。
组件树 (get-component-tree)：生成当前页面的 React 组件树状结构，以 Markdown 格式返回，帮助 LLM 和开发者理解组件的层级关系。可以选择仅返回用户自定义组件的树。
组件状态 (get-component-states)：获取指定 React 组件的当前状态，以 JSON 格式返回，辅助 LLM 理解组件的内部状态。
不必要渲染检测 (get-unnecessary-rerenders)：识别页面中不必要的组件重新渲染，帮助开发者优化 React 应用性能。可以设置检测的时间范围和是否包含所有组件。

安装步骤

使用你常用的包管理器安装 'vite-react-mcp' 插件到你的 React 项目的开发依赖中：

pnpm install vite-react-mcp -D

或者

npm install vite-react-mcp -D

或者

yarn add vite-react-mcp -D

将 'ReactMCP()' 插件添加到你的 'vite.config.ts' 或 'vite.config.js' 配置文件中的 'plugins' 数组中：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ReactMCP from 'vite-react-mcp';

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

服务器配置

MCP 客户端需要配置以下信息才能连接到 Vite React MCP 服务器。由于 Vite React MCP 是 Vite 插件，它会随着 Vite 开发服务器一同启动。

{
  "serverName": "vite-react-mcp",
  "command": "pnpm",
  "args": ["run", "dev"],
  "description": "启动 Vite 开发服务器，同时启动 Vite React MCP 服务器。",
  "notes": "请确保你的项目中已配置 'dev' 脚本来启动 Vite 开发服务器，例如在 package.json 中配置 '\"dev\": \"vite\"'。"
}

配置参数说明:

serverName: 服务器名称，设置为 "vite-react-mcp"。
command: 启动服务器的命令，通常为你的包管理器命令，例如 "pnpm"、"npm" 或 "yarn"。
args: 命令参数，用于运行开发服务器。通常为 '["run", "dev"]'，假设你的 'package.json' 中有 'dev' 脚本启动 Vite。如果你的启动脚本不同，请相应修改。
description: 服务器配置的描述信息，方便用户理解。
notes: 额外的配置说明，例如启动命令的前提条件。

重要提示:

Vite React MCP 服务器与你的 Vite 开发服务器运行在相同的端口。MCP 客户端需要连接到 Vite 开发服务器的 '/sse' 和 '/messages' 路径 (例如 'http://localhost:3000/sse', 'http://localhost:3000/messages') 来进行通信。
请根据你的实际项目配置调整 'command' 和 'args' 以正确启动 Vite 开发服务器。

基本使用方法

启动你的 Vite 开发服务器（例如运行 'pnpm run dev' 或 'npm run dev'）。Vite React MCP 服务器将随之启动。
配置你的 MCP 客户端，使其连接到 Vite 开发服务器地址的 '/sse' 和 '/messages' 端点，并使用上面提供的服务器配置信息。
在 MCP 客户端中，你可以调用 Vite React MCP 服务器提供的工具 (Tools) 来获取 React 应用的上下文信息或执行相关操作。例如，调用 'highlight-component' 工具并传入组件名称，即可在浏览器中高亮该组件。
你可以在仓库的 'playground' 目录中运行示例应用 ( 'pnpm run playground' ) 来测试插件的功能。

关键词