React 正式接入 AI,你知道嗎?
最近,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)試。















 
 
 

















 
 
 
 