WaveMaker React原生MCP服务器
MCP（模型上下文协议）服务器，为WaveMaker React Native项目提供智能开发协助。该工具与Cursor IDE集成，帮助开发人员解决错误、优化性能、分析代码和生成测试。
🚀 特性
🎯 新功能：直接访问代码库
- 运行时源代码：直接访问所有
wavemaker-rn-runtime组件和系统 - Codegen源代码：直接访问转译器、主题和模板
- 智能代码搜索：在两个代码库中查找实现、模式和示例
- 组件查找：立即定位任何组件的源代码、道具、样式和测试
- 真实代码示例：AI提供代码库中的实际代码，而不是假设的示例
🐛 Bug诊断与调试
- 智能问题检测：基于模式的症状与5+常见问题类型匹配
- 生命周期验证：全面的清理和内存管理验证
- 内存泄漏检测：自动检测孤立资源（超时、订阅、观察者）
- 数据绑定验证：验证反应式数据绑定并观察表达式
⚡ 性能分析
- 渲染性能分析：分析组件复杂性并重新呈现触发器
- 观察者分析：检测昂贵的手表表情和优化机会
- 优化建议：优先、可操作的绩效改进建议
🔍 代码分析
- 成分分析：深入检查结构、道具、生命周期和依赖关系
- 项目导航：映射项目结构（页面、部分、前言、变量、服务）
- 依赖性解析：跟踪直接和传递依赖关系
- 代码库探索：通过文件列表探索运行时和代码生成器结构
🧪 测试
- 测试骨架生成：用于单元、集成和快照测试的自动化测试结构
- 测试用例建议：基于组件分析的智能测试用例建议
📚 知识库
- 18+精选图案：WaveMaker RN开发的最佳实践和反模式
- 5常见问题：记录原因、解决方案和代码示例
- 6个最佳实践类别：生命周期、性能、数据绑定、内存管理等
📦 安装
cd /Users/raajr_500278/wavemaker-rn-mcp
npm install
npm run build验证安装
ls -la dist/ # Should show compiled JavaScript files⚙️ 配置
所需环境变量
MCP服务器需要 WM_贬值_路径 在光标设置中设置。这告诉服务器在哪里可以找到WaveMaker运行时和代码生成源代码。
用于游标IDE
添加到光标设置（光标>设置>MCP）：
对于生成的项目（node_modules）：
{
"mcpServers": {
"wavemaker-rn": {
"command": "node",
"args": ["/Users/you/wavemaker-rn-mcp/dist/index.js"],
"env": {
"WM_CODEBASE_PATH": "/path/to/your-project/node_modules/@wavemaker",
"WORKSPACE_PATH": "/path/to/your/wavemaker/project"
}
}
}
}对于本地开发（源代码）：
{
"mcpServers": {
"wavemaker-rn": {
"command": "node",
"args": ["/Users/you/wavemaker-rn-mcp/dist/index.js"],
"env": {
"WM_CODEBASE_PATH": "/Users/you/wavemaker-studio-frontend",
"WORKSPACE_PATH": "/path/to/your/wavemaker/project"
}
}
}
}环境变量：
WM_CODEBASE_PATH（必需）：WaveMaker运行时/代码生成器源的路径
- 节点模块设置： 寻找 app-rn-runtime 和 rn-codegen 文件夹 - 本地代码库设置： 寻找 wavemaker-rn-runtime 和 wavemaker-rn-codegen 文件夹
WORKSPACE_PATH（必填）：WaveMaker项目目录的路径
- MCP工具将在此处搜索您的项目代码 - 例子： /path/to/your-project/target/generated-expo-app
服务器在启动时验证路径，如果配置错误，则提供清晰的错误消息。
项目特定规则
确保AI遵循项目中的调试协议：
- 光标规则：创建
.cursor/rules/wm.mdc在项目根目录中
- 从MCP回购中复制 .cursorrules 文件 - Cursor将自动为您的项目加载这些规则
- 代理配置 （可选）：创建
.cursor/agent.md在您的项目中
- 使用来自的模板 .cursor/agent-template.md - 根据您的特定路径进行自定义 - 为类似代理的工作流提供额外的上下文
🐛 调试工作流程
此MCP服务器强制执行 系统调试协议 以确保可靠、基于证据的错误修复。
概述
调试工作流程由以下部分组成 4个强制性阶段:
Phase 0: GATHER RUNTIME DATA (REQUIRED FIRST)
↓
Phase 1: READ SOURCE CODE
↓
Phase 2: ANALYZE
↓
Phase 2.5: VERIFICATION CHECKPOINT
↓
Phase 3: PROPOSE FIX阶段0：收集运行时数据（首先需要）
AI在分析代码之前总是会询问运行时信息：
- 请求当前信息
- 错误消息或控制台输出 - 复制步骤 - 平台（iOS/Android/Web） - 预期行为与实际行为
- 添加诊断日志记录
console.log('=== Debug Info ===');
console.log('State:', this.state);
console.log('Props:', this.props);- 等待用户响应
- 没有数据，人工智能将无法继续 - 您必须提供日志或确认行为
- 文档运行时数据
- AI将汇总所有收集到的信息 - 这成为分析的基础
第一阶段：读取源代码
在收集运行时数据后，AI将：
- 使用
wm_rn_smart_search查找相关文件 - 使用
wm_rn_read_file读取组件源代码 - 如果需要，读取第三方库源
- 了解实际执行情况
第二阶段：分析
AI将：
- 计算并验证实际运行时间值
- 逐步跟踪逻辑
- 用代码证据确定根本原因
阶段2.5：验证检查点
在提出任何解决方案之前，人工智能必须回答：
- 确切的根本原因是什么？（有证据）
- 有问题的代码在哪里？
- 运行时/代码生成器（WM_CODEBASE_PATH）-只读 - 生成的项目（工作空间路径）-可修改 - 第三方（node_modules）-只读
- 我可以修改源代码吗？（如果否→ 需要解决方法）
- 这是升级后的倒退吗？
- 我的修复策略是什么？
第三阶段：提出解决方案
只有经过验证，AI才会：
- 在项目中提出一个有针对性的修复方案（WORKSPACE_PATH）
- 解释它为什么有效（有证据）
- 添加验证日志记录
- 请您进行测试和确认
两个代码库
调试工作流程有明确的界限：
┌─────────────────────────────────────┐
│ WaveMaker Runtime/Codegen │
│ (WM_CODEBASE_PATH) │
│ │
│ Purpose: ANALYSIS ONLY │
│ Rule: NEVER modify │
└─────────────────────────────────────┘
↓ (read to understand)
┌─────────────────────────────────────┐
│ Your Generated Project │
│ (WORKSPACE_PATH) │
│ │
│ Purpose: APPLY FIXES HERE │
│ Rule: All changes in this project │
└─────────────────────────────────────┘示例：进度圈剪切问题
阶段0：收集数据
AI: "Can you share:
- Screenshot of the issue?
- Console errors/warnings?
- Platform (iOS/Android)?
- Did this work in a previous version?"
You: "iOS, no errors, worked in Expo 52, broke in 54"
AI: "Let's add logging:
console.log('Container:', this.state.radius);
Please reload and share output."
You: "Container: 120"
AI: "RUNTIME DATA:
- Issue: 1px clipping
- Platform: iOS
- Version: Expo 54 (regression)
- Container: 120x120px"第1-2阶段：阅读和分析
wm_rn_smart_search "WmProgressCircle"
wm_rn_read_file progress-circle.component.tsx
wm_rn_read_file node_modules/react-native-circular-progress
Calculate: radius=52, stroke=8, edge=60, container=120
→ 0px buffer! SVG clipping at boundary.第2.5阶段：检查点
Q: Root cause?
A: SVG needs padding prop, runtime doesn't pass it
Q: Can I modify?
A: NO - runtime is in node_modules
Q: Fix strategy?
A: Workaround in generated page component第三阶段：修复
File: src/pages/MyPage/MyPage.component.js
Why: Creates 2px buffer without changing circle size
Verification: console.log('Wrapper margin:', -2)益处
✅ 无随机修复：AI计算一次，修复一次\ ✅ 循证：每个修复都有代码分析支持\ ✅ 尊重边界：从不修改运行时/node_modules\ ✅ 回归感知：正确处理升级问题\ ✅ 内置验证功能：确认修复前后
配置文件
调试工作流程定义如下：
.cursorrules：基础协议定义（此仓库）.cursor/rules/wm.mdc：项目特定规则（复制到您的项目中）.cursor/agent.md：可选代理配置（自定义路径）
看 .cursorrules 以获取完整的协议定义。
可用工具
🎯 代码库探索（新）
wm_rn_search_codebase-跨运行时/代码生成器源代码搜索wm_rn_find_component_source-查找组件实现wm_rn_get_implementation-获取实际功能实现wm_rn_list_all_components-列出所有可用组件wm_rn_get_widget_transpiler-获取小部件转译器源代码wm_rn_explore_runtime_structure-探索运行时代码库wm_rn_explore_codegen_structure-探索codegen代码库
Bug诊断与调试
wm_rn_diagnose_issue-根据症状诊断问题wm_rn_check_component_lifecycle-验证生命周期实施wm_rn_validate_data_binding-检查数据绑定设置wm_rn_check_memory_leaks-检测潜在的内存泄漏
性能分析
wm_rn_analyze_render_performance-配置文件组件渲染wm_rn_profile_watchers-分析手表表情wm_rn_suggest_optimizations-获取优化建议
代码分析
wm_rn_analyze_component-综合成分分析wm_rn_find_pattern-查找代码模式wm_rn_get_project_structure-绘制项目结构图wm_rn_find_dependencies-解决依赖关系
测试
wm_rn_generate_test_skeleton-生成测试结构wm_rn_suggest_test_cases-获取测试用例建议
公用事业
wm_rn_grep_code-高级代码搜索wm_rn_exec_command-执行shell命令wm_rn_read_file-读取文件内容wm_rn_write_file-写入文件内容
使用示例
诊断Bug
User: "My component isn't re-rendering when data changes"
Assistant uses: wm_rn_diagnose_issue分析性能
User: "Why is my Dashboard page slow?"
Assistant uses: wm_rn_analyze_render_performance + wm_rn_profile_watchers检查内存泄漏
User: "Check my LoginPage for memory leaks"
Assistant uses: wm_rn_check_memory_leaks🎯 快速入门示例
诊断Bug
// User: "My component isn't re-rendering when data changes"
// AI uses: wm_rn_diagnose_issue
{
"symptom": "component not re-rendering",
"componentPath": "src/pages/HomePage/HomePage.tsx"
}
// Returns: causes, solutions, code examples, documentation links检查内存泄漏
// User: "Check my HomePage for memory leaks"
// AI uses: wm_rn_check_memory_leaks
{
"targetPath": "src/pages/HomePage",
"checkTypes": ["all"]
}
// Returns: orphaned timeouts, unsubscribed listeners, recommendations分析性能
// User: "Why is my Dashboard slow?"
// AI uses: wm_rn_analyze_render_performance
{
"componentPath": "src/pages/Dashboard/Dashboard.tsx"
}
// Returns: complexity analysis, performance issues, optimization suggestions📊 统计
- 35工具 跨越7个类别
- 10处理程序实现
- 直接访问 到1000+个源文件
- 18+知识库条目
- 10000+行代码
- \<5秒构建时间
🏗️ 建筑
wavemaker-rn-mcp/
├── src/
│ ├── server.ts # Core MCP server
│ ├── index.ts # Entry point
│ ├── types.ts # Shared TypeScript types
│ ├── tools/ # Tool definitions (28 tools)
│ │ ├── analysis.tools.ts
│ │ ├── debugging.tools.ts
│ │ ├── performance.tools.ts
│ │ ├── navigation.tools.ts
│ │ ├── build.tools.ts
│ │ ├── testing.tools.ts
│ │ └── utility.tools.ts
│ ├── handlers/ # Tool implementations (9 handlers)
│ │ ├── ComponentAnalyzer.ts
│ │ ├── IssueDiagnoser.ts
│ │ ├── LifecycleChecker.ts
│ │ ├── MemoryLeakDetector.ts
│ │ ├── RenderAnalyzer.ts
│ │ ├── WatcherProfiler.ts
│ │ ├── ProjectNavigator.ts
│ │ ├── DataBindingValidator.ts
│ │ └── TestGenerator.ts
│ ├── utils/ # Shared utilities
│ │ ├── file-utils.ts
│ │ ├── grep-utils.ts
│ │ ├── command-executor.ts
│ │ └── logger.ts
│ └── knowledge/ # Knowledge base
│ ├── patterns.json
│ ├── issues.json
│ └── best-practices.json
├── scripts/
│ └── extract-knowledge.ts # Doc extraction script
└── dist/ # Compiled output🛠️ 发展
# Build
npm run build
# Watch mode
npm run watch
# Run locally
npm start
# Extract knowledge from docs (optional)
npm run extract-knowledge📖 文档
- 代码库集成: 🆕 如何使用直接源代码访问
- 使用指南：综合使用示例和场景
- 配置指南：集中式路径和环境配置
- 路径处理指南：了解MCP工具中的绝对路径与相对路径
- 光标配置：Cursor IDE的逐步设置
- 更新日志：版本历史和发行说明
- .游标：编辑器中的最佳实践和模式
🤝 贡献
这是WaveMaker RN开发的内部工具。有关问题或改进，请联系WaveMaker团队。
📄 许可证
麻省理工学院
🎉 致谢
内置：
- @模型上下文协议/sdk
- TypeScript
- WaveMaker RN文档和最佳实践