AI导哈

React开发工具集成

一个将React DevTools与Model Context Protocol (MCP)集成的概念验证项目，用于查询和分析React组件数据。

  • by ChakshuGautam
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 ChakshuGautam/react-devtools-mcp

使用说明

React DevTools MCP 概念验证（POC）

将React DevTools与模型上下文协议（MCP）集成的概念验证。

结构

react-devtools-mcp-poc/
├── test-react-app/          # Simple React app that connects to DevTools
├── mcp-server/              # MCP server with react-devtools-core
└── .mcp.json                # Claude Code MCP configuration

它是如何运作的

  1. MCP服务器 开始 react-devtools-core 端口8097上的WebSocket服务器
  2. React 应用 自动连接到DevTools服务器
  3. 克劳德·科德 使用MCP工具查询React组件数据

设置与运行

1. 启动MCP服务器

cd mcp-server
npm start

你应该看到：

🚀 Starting React DevTools server on port 8097...
✅ React DevTools server started on ws://localhost:8097
🎯 React DevTools MCP server running on stdio

2. 启动React应用

在一个新终端中：

cd test-react-app
npm run dev

在您的浏览器中打开 http://localhost:5173。

3. 使用Claude代码进行测试

添加到您的Claude代码中 .mcp.json：

{
  "mcpServers": {
    "react-devtools": {
      "command": "node",
      "args": ["/tmp/react-devtools-mcp-poc/mcp-server/index.js"]
    }
  }
}

重启Claude代码，然后进行测试：

You: "Ping the react-devtools MCP server"
Claude: [calls ping tool]

You: "Check if React DevTools is connected"
Claude: [calls check_react_connection]

You: "Get DevTools status"
Claude: [calls get_devtools_status]

当前工具

ping

简单的测试以验证MCP服务器是否正在运行。

示例：

Input: { message: "Hello" }
Output: "Pong! Hello"

check_react_connection

检查React应用是否已连接到开发者工具（DevTools）。

输出：

{
  "connected": true,
  "port": 8097,
  "message": "React DevTools server is running..."
}

get_devtools_status

获取DevTools服务器的详细状态。

输出：

{
  "serverRunning": true,
  "port": 8097,
  "websocketUrl": "ws://localhost:8097",
  "connectionScript": "http://localhost:8097",
  "usage": "Add <script src=\"http://localhost:8097\"></script> to your React app"
}

测试连接

手动测试（浏览器控制台）

打开 http://localhost:5173 并查看浏览器控制台：

✅ Connected to React DevTools server on localhost:8097

测试React应用功能

  1. 点击“隐藏/显示计数器” - 应该会切换3个计数器组件
  2. 点击计数按钮 - 应该增加计数
  3. 点击“添加项目”——应在列表中添加项目
  4. 检查控制台以查看渲染日志

下一步行动

第一阶段：基础组件树（进行中）

  • [x] 启动 React DevTools 服务器
  • [x] 连接React应用
  • [x] 基本的MCP工具（ping，状态检查）
  • [ ] 从开发者工具中获取组件树
  • [ ] 列出所有带有属性（props）/状态（state）的组件

第二阶段：特征分析

  • [ ] 启动/停止 React 性能分析器
  • [ ] 获取每个组件的渲染次数
  • [ ] 获取渲染时间数据
  • [ ] 分析不必要的重新渲染

第三阶段：高级分析

  • [ ] 跟踪属性变化
  • [ ] 跟踪状态变化
  • [ ] 检测内存泄漏
  • [ ] 对比会话前/后的情况

故障排除

React 应用显示“无法连接”警告

解决方案： 首先确保MCP服务器正在运行：

cd mcp-server
npm start

MCP服务器无法启动

检查：

  • 端口8097未被使用： lsof -i :8097
  • 已安装的依赖项： npm install 在 mcp-server/

克劳德·科德看不到那些工具

检查：

  • .mcp.json 路径正确
  • 更新后重启Claude代码 .mcp.json
  • 检查Claude代码MCP日志

建筑细节

React开发者工具核心库（或：React开发工具核心）

这个（或“该”） react-devtools-core 该软件包提供：

  • 用于DevTools协议的WebSocket服务器
  • 与 React 的 fiber 树的连接
  • 访问组件属性、状态、钩子
  • React Profiler 集成

MCP集成

MCP服务器：

  • 包装 react-devtools-core
  • 通过MCP协议暴露工具
  • 通过标准输入输出（stdio）与Claude Code进行通信
  • 提供JSON格式的响应

React 应用连接器

这个（或“该”） ReactDevToolsConnector 组件：

  • 仅在开发环境中注入连接脚本
  • 连接到 http://localhost:8097
  • 自动建立WebSocket连接
  • 无需手动设置

发展

添加新的MCP工具

编辑 mcp-server/index.js：

  1. 在（文件/位置）中添加工具定义 ListToolsRequestSchema 处理程序（或“处理器”）
  2. 在（系统/程序中）添加工具处理程序 CallToolRequestSchema 处理程序（或“处理器”）
  3. 重启MCP服务器
  4. 使用Claude代码进行测试

示例：添加“获取组件数量”工具

// In ListToolsRequestSchema handler
{
  name: 'get_component_count',
  description: 'Get total number of React components',
  inputSchema: {
    type: 'object',
    properties: {},
  },
}

// In CallToolRequestSchema handler
case 'get_component_count':
  // Access devToolsServer to get component data
  const count = await this.getComponentCount();
  return {
    content: [{
      type: 'text',
      text: JSON.stringify({ count }),
    }],
  };

参考文献

许可证

麻省理工学院（MIT）

相关 MCP