React MCP (Model Context Protocol)

基本能力

产品定位

React MCP 是一个桥接 Claude AI 和 React 生态系统的工具，旨在通过模型上下文协议（MCP）实现 AI 与 React 开发环境的交互。

核心功能

1. React 项目管理
2. 创建新的 React 应用程序（支持模板）
3. 运行开发服务器
4. 管理依赖项
5. 文件操作
6. 读写文件
7. 编辑 React 组件和配置
8. 进程管理
9. 启动和监控长时间运行的进程
10. 实时跟踪进程输出
11. 终止进程
12. 命令执行
13. 运行任意终端命令
14. 安装 npm 包
15. 执行开发任务
16. 日志记录
17. 详细的 JSON 和文本日志
18. 带时间戳的进程跟踪
19. 执行历史记录

适用场景

• 通过 AI 辅助创建和管理 React 项目
• 自动化 React 开发流程
• 远程或自动化执行开发任务
• 集成 AI 到开发工作流中

工具列表

1. create-react-app：创建新的 React 应用程序
2. run-react-app：在开发模式下运行 React 应用程序
3. run-command：执行终端命令
4. get-process-output：获取运行中或已完成进程的输出
5. stop-process：停止运行中的进程
6. list-processes：列出所有运行中的进程
7. edit-file：创建或编辑文件
8. read-file：读取文件内容
9. install-package：在项目中安装 npm 包
10. check-installation-status：检查包安装过程的状态

常见问题解答

• 安装问题：确保已安装 Node.js 和 npm
• 配置问题：正确配置 claude_desktop_config 文件
• 进程管理：使用 list-processes 和 stop-process 管理长时间运行的进程

使用教程

使用依赖

• Node.js 和 npm 已安装

安装教程

1. 通过 Smithery 安装

npx -y @smithery/cli install @Streen9/react-mcp --client claude

1. 手动安装

git clone <repository-url>
cd react-mcp
npm install

调试方式

1. 检查日志文件：logs/react-mcp-logs.json 和 logs/react-mcp-logs.txt
2. 验证配置：确保 claude_desktop_config 中的路径正确
3. 测试基本命令：如 create-react-app 或 run-react-app

许可证

该项目遵循 MIT 开源许可条款，请参阅 MIT 了解完整条款。