React Context MCP

](https://npmjs.org/package/react-context-mcp) 

AI助手的即时反应组件发现

问题： 你看到一个“注册”按钮，需要找到哪个React组件渲染它，它在哪个文件中，以及它有什么道具。

使用React上下文MCP： 询问你的人工智能助手，立即获得一个包含可访问性信息的完整组件树。

// You ask your AI:
"Show me the component tree for this page"

// Your AI calls:
get_component_map()

// You get:
React Component Tree:

OnboardingPage (src/pages/OnboardingPage.tsx:25:4)
└─ OnboardingScreen {content={...}, onSignUp={fn}, onLogIn={fn}} (src/pages/OnboardingPage.tsx:136:8)
   └─ Box {display="flex", flexDirection="column"} (src/design-system/OnboardingScreen.tsx:138:4)
      └─ Typography {as="h1", variant="h2Bold"} [role="heading" name="Create Account"] (src/components/Typography.tsx:103:10)
         └─ h1 [role="heading" name="Create Account"]
      └─ Button {size="large", onClick={fn}} [role="button" name="Sign up"] (src/components/Button.tsx:115:12)
         └─ button [role="button" name="Sign up"]

______________________________________________________________________

你能做什么

让你的AI助手：

• 获取完整的组件树 -查看所有带有道具、源代码位置和可访问性结构的React组件
• 查找任何UI元素 -将按钮、输入或任何元素跟踪到其React组件
• 检查部件细节 -获取任何组件的道具、状态和所有者链
• 导航多页流 -分析不同屏幕上的组件

react-context-mcp 是一个模型上下文协议（MCP）服务器，它将您的AI助手连接到在Chrome中运行的React应用程序，提供对组件树、道具、状态和源位置的即时访问。

运作原理

完整图片： get_component_map

当你问的时候 *“显示组件树”*，你的AI呼叫：

get_component_map({ verbose: true })

返回一个markdown树，显示：

• 所有React组件 （按钮、文本字段、机载屏幕等）
• 组件道具 JSX格式(size="large", onClick={fn})
• 可访问性信息 （角色，屏幕阅读器的可访问名称）
• 具有语义角色的DOM元素 （按钮、h1、p、img）
• 震源位置 （文件：行：列）

React Component Tree:

App (src/main.tsx:8:4)
└─ OnboardingScreen {onSignUp={fn}, onLogIn={fn}} (src/pages/OnboardingPage.tsx:136:8)
   └─ Stack {direction="column", gap="3"} (src/design-system/OnboardingScreen.tsx:216:8)
      └─ Text {variant="h1"} [role="heading" name="Send instantly"] (src/components/Text.tsx:222:12)
         └─ h1 [role="heading" name="Send instantly"]
      └─ Text {variant="body-secondary"} [role="paragraph"] (src/components/Text.tsx:232:12)
         └─ p [role="paragraph"]
      └─ Button {variant="primary", size="large"} [role="button" name="Sign up"] (src/components/Button.tsx:361:10)
         └─ button [role="button" name="Sign up"]

重点元素检查

有关特定元素的详细信息，请使用两步过程：

第一步： 拍摄快照以获取元素ID

take_snapshot({ verbose: true })

返回可访问性树 后端DOMNodeId 对于每个元素：

{
  "role": "button",
  "name": "Sign up",
  "backendDOMNodeId": 48
}

第二步： 获取React组件详细信息

get_react_component_from_backend_node_id(48)

返回完整的组件信息：

{
  "component": {
    "name": "Button",
    "type": "ForwardRef",
    "source": {
      "fileName": "src/components/Button.tsx",
      "lineNumber": 42,
      "columnNumber": 8
    },
    "props": {
      "variant": "primary",
      "size": "large",
      "onClick": "[Function]",
      "children": "Sign up"
    },
    "owners": [
      {
        "name": "OnboardingScreen",
        "source": "src/screens/OnboardingScreen.tsx:222:12"
      }
    ]
  }
}

______________________________________________________________________

需求

• v20.19+或v22.12+或v23+
• 铬 当前稳定版本
• 带有开发构建的React应用程序（用于源位置跟踪）

入门指南

快速安装

添加到MCP客户端配置中：

{
  "mcpServers": {
    "react-context": {
      "command": "npx",
      "args": ["-y", "react-context-mcp@latest"]
    }
  }
}

\[！注意\] 使用 @latest 确保您始终获得最新版本。

MCP客户端设置

Claude Code

使用克劳德代码CLI：

claude mcp add react-context npx react-context-mcp@latest

Cursor

首选 Cursor Settings → MCP → New MCP Server，然后添加：

{
  "mcpServers": {
    "react-context": {
      "command": "npx",
      "args": ["-y", "react-context-mcp@latest"]
    }
  }
}

Cline / Windsurf / Other Clients

将上述配置添加到MCP设置文件中。有关配置文件的位置，请参阅客户的文档。

第一提示

在您的MCP客户端中尝试以下操作：

Navigate to http://localhost:3000 and show me the component tree

你的AI助手将打开浏览器，导航到页面，并显示完整的React组件层次结构和可访问性信息。

源位置跟踪

⚠️ 重要： 要获得准确的组件源位置（文件名、行号），您需要 必须 在React项目中配置Babel插件。

为什么需要这样做？

React Context MCP从中提取源位置 data-inspector-* Babel添加的DOM属性。 React 19删除了 _debugSource 纤维性能，使Babel插件方法成为唯一可靠的源代码跟踪方法。

没有插件：

• ❌ 组件源位置将显示为 undefined
• ✅ 组件名称、道具和树结构正常工作

使用插件：

• ✅ 精确的文件路径（例如。， src/components/Button.tsx)
• ✅ 精确的行号和列号
• ✅ 完整的组件层次结构和源

配置

维特

npm install --save-dev @react-dev-inspector/babel-plugin

添加到 vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['@react-dev-inspector/babel-plugin', {
            excludes: ['node_modules']
          }]
        ]
      }
    })
  ]
})

Next.js/CRA/手动Babel

______________________________________________________________________

MCP工具

页面管理（5个工具）

1. list_pages -列出所有打开的浏览器选项卡
2. select_page -选择要使用的选项卡
3. close_page -关闭特定选项卡
4. new_page -打开一个新选项卡并导航到URL
5. navigate_page -导航、重新加载或返回/前进

反应检测（3个工具）

get_component_map

主要工具 -通过markdown获取完整的React组件树

论据：

• verbose （boolean，可选）-包括所有DOM元素（默认值：true）
• includeState （布尔值，可选）-包括组件状态（默认值：false）

答复：

React Component Tree:

App (src/App.tsx:10:4)
└─ Button {variant="primary", size="large"} [role="button" name="Sign up"] (src/Button.tsx:42:5)
   └─ button [role="button" name="Sign up"]

显示：

• React组件层次结构
• JSX格式的道具(prop="value", prop={value})
• ARIA属性（\[role=“…”name=“…“\]）
• 具有语义角色的DOM元素（按钮、h1、p、img等）
• 源位置（文件：行：列）

______________________________________________________________________

take_snapshot

获取包含元素ID的可访问性树

论据：

• verbose （boolean，可选）-包括所有元素（默认值：false）

答复：

{
  "role": "RootWebArea",
  "name": "My App",
  "children": [
    {
      "role": "button",
      "name": "Sign up",
      "backendDOMNodeId": 48
    }
  ]
}

使用 backendDOMNodeId 随着 get_react_component_from_backend_node_id 进行详细的部件检查。

______________________________________________________________________

get_react_component_from_backend_node_id

使用快照中的backendDOMNodeId获取React组件详细信息

论据：

• backendDOMNodeId （数字）-来自拍摄快照

答复：

{
  "success": true,
  "component": {
    "name": "Button",
    "type": "ForwardRef",
    "source": {
      "fileName": "src/components/Button.tsx",
      "lineNumber": 42
    },
    "props": {"variant": "primary", "children": "Sign up"},
    "owners": [
      {"name": "OnboardingScreen", "source": {...}},
      {"name": "App", "source": {...}}
    ]
  }
}

优点：

• ✅ 组件查找的最快方法
• ✅ 返回完整的所有者链（父组件）
• ✅ 精确的震源位置

重要提示： backendDOMNodeId仅在同一浏览器会话内有效。

______________________________________________________________________

命令行选项

# Auto-navigate on startup
TARGET_URL=http://localhost:3000 react-context-mcp

# Connect to existing Chrome with remote debugging
react-context-mcp --browserUrl http://localhost:9222

# Isolated mode (separate Chrome profile)
react-context-mcp --isolated --headless

# Custom Chrome executable
react-context-mcp --executablePath /path/to/chrome

# Set viewport size
react-context-mcp --viewport 1920x1080

可用标志：

• --headless -在无头模式下运行Chrome
• --isolated -使用隔离的用户数据目录
• --browserUrl -连接到现有的Chrome调试会话
• --wsEndpoint -CDP的WebSocket端点
• `--executablePath

` -Chrome可执行文件的路径

• --channel -Chrome频道（稳定版、金丝雀版、测试版、开发版）
• --viewport -视口尺寸（例如1280x720）

故障排除

浏览器已在运行

使用 --isolated 标志：

react-context-mcp --isolated

缺少源位置

• 需要开发构建
• 添加Babel插件（请参阅源位置跟踪部分）
• 配置更改后重新启动开发服务器

未找到后端DOMNodeId

• 仅在同一浏览器会话内有效
• 始终使用 take_snapshot 和 get_react_component_from_backend_node_id 在同一MCP会话中

开发与出版

构建

npm run build

本地测试

# Test the built package
npm start

# Or with target URL
TARGET_URL=http://localhost:3000 npm start

发布到npm

1. 更新版本 在 package.json:

   {
     "version": "0.2.0"
   }

1. 构建和发布:

   npm run build
   npm publish

1. 验证发布:

   npm info react-context-mcp

推送到GitHub

# Commit all changes
git add .
git commit -m "feat: your feature description"

# Tag the version
git tag v0.2.0

# Push with tags
git push origin main --tags

许可证

阿帕奇-2.0

链接

• npm包： https://www.npmjs.com/package/react-context-mcp
• GitHub存储库： https://github.com/uxfreak/react-context-mcp
• 问题： https://github.com/uxfreak/react-context-mcp/issues
• 模型上下文协议： https://modelcontextprotocol.io