React MCP（模型上下文协议）

一个强大的服务器实现，使Claude AI能够通过模型上下文协议与React应用交互。

示例用法

• Claude实现的Markdown编辑器/查看器
  

• Claude实现的API测试工具
  

概述

React MCP在Claude AI和React生态系统之间架起桥梁，使Claude能够：

• 创建新的React应用
• 运行React开发服务器
• 管理文件和目录
• 安装npm包
• 执行终端命令
• 跟踪和管理长时间运行的进程

该服务器实现了模型上下文协议，为Claude提供了在开发环境中执行实际操作的能力。

功能

• React项目管理

  • 使用可选模板创建新的React应用
  • 运行开发服务器
  • 管理依赖项

• 文件操作

  • 读写文件
  • 编辑React组件和配置

• 进程管理

  • 启动和监控长时间运行的进程
  • 实时跟踪进程输出
  • 需要时终止进程

• 命令执行

  • 运行任意终端命令
  • 安装npm包
  • 执行开发任务

• 全面日志记录

  • 详细的JSON和文本日志
  • 带时间戳的进程跟踪
  • 执行历史记录

安装

通过Smithery安装

通过Smithery为Claude桌面版自动安装React MCP：

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

手动安装

1. 克隆本仓库
2. 安装依赖：

npm install

使用

在claude_desktop_config中添加：

{
  "mcpServers": {
    "react-mcp": {
      "command": "node",
      "args": [
        "C:/Users/kalip/OneDrive/Desktop/react-mcp/index.js"
      ]
    },
  }
}

服务器使用stdio传输运行，可作为模型上下文协议工具与桌面版Claude APP配合使用。

可用工具

create-react-app

创建新的React应用。

参数：

• name（必填）：React应用名称
• template（可选）：使用的模板（如typescript、cra-template-pwa）
• directory（可选）：创建应用的基目录（默认为主目录）

run-react-app

以开发模式运行React应用。

参数：

• projectPath（必填）：React项目文件夹路径

run-command

运行终端命令。

参数：

• command（必填）：要执行的命令
• directory（可选）：运行命令的目录（默认为当前目录）

get-process-output

获取运行中或已完成进程的输出。

参数：

• processId（必填）：要获取输出的进程ID

stop-process

停止运行中的进程。

参数：

• processId（必填）：要停止的进程ID

list-processes

列出所有运行中的进程。

edit-file

创建或编辑文件。

参数：

• filePath（必填）：要编辑的文件路径
• content（必填）：要写入文件的内容

read-file

读取文件内容。

参数：

• filePath（必填）：要读取的文件路径

install-package

在项目中安装npm包。

参数：

• packageName（必填）：要安装的包名（可包含版本号）
• directory（可选）：项目目录（默认为当前目录）
• dev（可选）：是否作为开发依赖安装

check-installation-status

检查包安装进程状态。

参数：

• processId（必填）：要检查的安装进程ID

日志记录

服务器在logs目录下维护详细日志：

• react-mcp-logs.json：结构化JSON日志
• react-mcp-logs.txt：人类可读文本日志

架构

服务器使用以下关键组件：

• 模型上下文协议SDK：用于与Claude AI通信
• StdioServerTransport：用于通过标准输入/输出进行I/O
• Zod：用于模式验证和类型安全
• Child Process：用于生成和管理外部进程

许可证

MIT

作者

@streen9

贡献

欢迎贡献！请随时提交Pull Request。