React 正式接入 AI，你知道嗎？

作者：CUGGZ 2025-06-16 09:36:18

最近，React 官方在其 GitHub 倉庫中引入了一個(gè)實(shí)驗(yàn)性項(xiàng)目 —— 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 實(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ì)生效）：