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@latestCursor
首选 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个工具）
list_pages-列出所有打开的浏览器选项卡select_page-选择要使用的选项卡close_page-关闭特定选项卡new_page-打开一个新选项卡并导航到URLnavigate_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
- 更新版本 在
package.json:
{
"version": "0.2.0"
}- 构建和发布:
npm run build
npm publish- 验证发布:
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