React MCP（模型上下文协议）

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

示例用法

• Markdown 编辑器/查看器 作者：Claude

• API 测试员 Claude

概述

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

• 创建新的 React 应用程序

• 运行 React 开发服务器

• 管理文件和目录

• 安装 npm 包

• 执行终端命令

• 跟踪和管理长期运行的流程

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

特征

• React 项目管理

  • 使用可选模板创建新的 React 应用程序

  • 运行开发服务器

  • 管理依赖项

• 文件操作

  • 读取和写入文件

  • 编辑 React 组件和配置

• 流程管理

  • 启动并监控长时间运行的进程

  • 实时跟踪过程输出

  • 在需要时终止进程

• 命令执行

  • 运行任意终端命令

  • 安装 npm 包

  • 执行开发任务

• 综合测井

  • 详细的 JSON 和文本日志

  • 使用时间戳进行进程跟踪

  • 执行历史记录

安装

1. 克隆此存储库

2. 安装依赖项：

用法

在claude_desktop_config中添加以下内容：

该服务器在 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 ：用于模式验证和类型安全

• 子进程：用于生成和管理外部进程

执照

麻省理工学院

作者

@streen9

贡献

欢迎贡献代码！欢迎提交 Pull 请求。