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

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

圖片

功能

React MCP Server 實現了 MCP 協議，并定義了兩個主要工具供 AI 使用：

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

React MCP Server 的一個重要應用場景是：借助 AI 自動優化 React 組件的性能。

1.開發者提供一個需要優化的組件；

2.模型通過調用 compile 工具多次執行編譯；

3.每輪編譯后測量性能（如 Core Web Vitals 分數）；

4.根據結果迭代優化組件結構；

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

通過這種「編譯 → 測量 → 改進」的閉環流程，AI 可以模擬開發者的性能優化過程，實現自動化的 React 性能優化策略。

使用

要在如 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 項目中運行以下命令，啟動監聽模式（每次改動需重啟 Claude 才會生效）：

yarn workspace react-mcp-server watch

原理

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

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

2.調用 babel-plugin-react-compiler 對代碼進行優化轉換；

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

4.提供標準接口供支持 MCP 的 AI 工具調用。

因此，它本質上是一個為大模型暴露的“編譯器遠程控制接口”，用于連接 AI 與 React 編譯系統的邊界。

第三方 React MCP

以下是一些社區構建的 React MCP Server 實現或插件，擴展了 MCP 協議在設計、分析、交互等方向的能力：

• mcp-figma-to-react：

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

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

• react-analyzer-mcp

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

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

• react-mcp：

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

功能：讓 Claude 等 AI 能基于自然語言創建或修改 React 應用。

• vite-plugin-react-mcp：
  

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

功能：讓 AI 能實時讀取并操作 React 組件的結構、狀態和 UI，用于交互式開發與調試。