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

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

圖片

功能

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

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

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

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

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

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

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

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

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

使用

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

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

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

yarn workspace react-mcp-server watch

原理

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

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

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

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

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

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

第三方 React MCP

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

• mcp-figma-to-react：

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

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

• react-analyzer-mcp

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

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

• 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 能實時讀取并操作 React 組件的結(jié)構(gòu)、狀態(tài)和 UI，用于交互式開發(fā)與調(diào)試。