最近，React 官方在其 GitHub 倉(cāng)庫(kù)中引入了一個(gè)實(shí)驗(yàn)性項(xiàng)目 —— React MCP Server，通過 MCP 將大模型與 React 編譯工具鏈連接起來。簡(jiǎn)單來說，它使 AI 助手不僅能夠生成代碼，還能以“工具調(diào)用”的方式直接參與 React 代碼的編譯優(yōu)化和文檔查詢。

https://github.com/facebook/react/tree/main/compiler/packages/react-mcp-server

圖片

功能

React MCP Server 實(shí)現(xiàn)了 MCP 協(xié)議，并定義了兩個(gè)主要工具供 AI 使用：

• 編譯工具：通過集成 babel-plugin-react-compiler，該工具允許 AI 對(duì)傳入的 React 組件代碼進(jìn)行編譯優(yōu)化。它返回優(yōu)化后的代碼、性能建議以及編譯診斷信息，為后續(xù)的性能分析或自動(dòng)重構(gòu)提供依據(jù)。
• 文檔查詢：封裝了對(duì) React 官方文檔的搜索接口，使用 Algolia 提供的 API 實(shí)現(xiàn)內(nèi)容檢索。AI 可通過調(diào)用此工具實(shí)時(shí)查詢 React API、用法、最佳實(shí)踐等文檔內(nèi)容，支持在編譯優(yōu)化過程中提供依據(jù)和解釋。

React MCP Server 的一個(gè)重要應(yīng)用場(chǎng)景是：借助 AI 自動(dòng)優(yōu)化 React 組件的性能。

1.開發(fā)者提供一個(gè)需要優(yōu)化的組件；

2.模型通過調(diào)用 compile 工具多次執(zhí)行編譯；

3.每輪編譯后測(cè)量性能（如 Core Web Vitals 分?jǐn)?shù)）；

4.根據(jù)結(jié)果迭代優(yōu)化組件結(jié)構(gòu)；

5.同時(shí)調(diào)用 docs 工具查閱最佳實(shí)踐作為參考。

通過這種「編譯 → 測(cè)量 → 改進(jìn)」的閉環(huán)流程，AI 可以模擬開發(fā)者的性能優(yōu)化過程，實(shí)現(xiàn)自動(dòng)化的 React 性能優(yōu)化策略。

使用

要在如 Claude Desktop 等支持 MCP 的平臺(tái)中啟用 React MCP Server，可按以下配置方式注冊(cè)：

{
  "mcpServers": {
    "react": {
      "command": "/Users/<username>/.asdf/shims/node",
      "args": [
        "/Users/<username>/code/react/compiler/packages/react-mcp-server/dist/index.js"
      ]
    }
  }
}

然后在 React 項(xiàng)目中運(yùn)行以下命令，啟動(dòng)監(jiān)聽模式（每次改動(dòng)需重啟 Claude 才會(huì)生效）：

yarn workspace react-mcp-server watch

原理

React MCP Server 位于 React 倉(cāng)庫(kù)中的 compiler/packages/ 目錄，屬于 React Compiler 系統(tǒng)的一部分。它的工作機(jī)制如下：

1.利用 Babel 將輸入代碼解析為 AST；

2.調(diào)用 babel-plugin-react-compiler 對(duì)代碼進(jìn)行優(yōu)化轉(zhuǎn)換；

3.通過 MCP 協(xié)議暴露這些編譯能力；

4.提供標(biāo)準(zhǔn)接口供支持 MCP 的 AI 工具調(diào)用。

因此，它本質(zhì)上是一個(gè)為大模型暴露的“編譯器遠(yuǎn)程控制接口”，用于連接 AI 與 React 編譯系統(tǒng)的邊界。

第三方 React MCP

以下是一些社區(qū)構(gòu)建的 React MCP Server 實(shí)現(xiàn)或插件，擴(kuò)展了 MCP 協(xié)議在設(shè)計(jì)、分析、交互等方向的能力：

• mcp-figma-to-react：

Github：https://github.com/studentofjs/mcp-figma-to-react

功能：將 Figma 設(shè)計(jì)文件轉(zhuǎn)換為 React 組件，支持 TypeScript 和 Tailwind CSS，還能提升可訪問性。

• react-analyzer-mcp

GIthub：https://github.com/azer/react-analyzer-mcp

功能：分析 JSX/TSX 文件，提取組件結(jié)構(gòu)、屬性和文檔說明，支持生成整個(gè)項(xiàng)目的組件文檔目錄。

• react-mcp：

Github：https://github.com/kalivaraprasad-gonapa/react-mcp

功能：讓 Claude 等 AI 能基于自然語言創(chuàng)建或修改 React 應(yīng)用。

• vite-plugin-react-mcp：
  

Github：https://github.com/Dogtiti/vite-plugin-react-mcp

功能：讓 AI 能實(shí)時(shí)讀取并操作 React 組件的結(jié)構(gòu)、狀態(tài)和 UI，用于交互式開發(fā)與調(diào)試。