React智能组件平台
react-mcp与Claude Desktop集成，可以根据用户提示创建和修改React应用程序。
可用工具 （9 个）
该服务在 MCP 协议中暴露的工具，AI 可按需调用
create-react-app 3 个参数 需填 1 项
Create a new React application
必填参数：name
run-react-app 1 个参数 需填 1 项
Run a React application in development mode
必填参数：projectPath
run-command 2 个参数 需填 1 项
Run a terminal command
必填参数：command
get-process-output 1 个参数 需填 1 项
Get the output from a running or completed process
必填参数：processId
stop-process 1 个参数 需填 1 项
Stop a running process
必填参数：processId
list-processes
List all running processes
该工具无需必填参数，直接调用即可
edit-file 2 个参数 需填 2 项
Create or edit a file
必填参数：filePath、content
read-file 1 个参数 需填 1 项
Read the contents of a file
必填参数：filePath
install-package 3 个参数 需填 1 项
Install a npm package in a project
必填参数：packageName
服务介绍
React MCP (Model Context Protocol)
一个强大的服务器实现，通过模型上下文协议（Model Context Protocol）使Claude AI能够与React应用程序进行交互。
示例用法
概览
React MCP为Claude AI和React生态系统之间提供了一座桥梁，允许Claude：
- 创建新的React应用程序
- 运行React开发服务器
- 管理文件和目录
- 安装npm包
- 执行终端命令
- 跟踪和管理长时间运行的进程
此服务器实现了模型上下文协议，使Claude能够在开发环境中执行实际操作。
功能
-
React项目管理
- 使用可选模板创建新的React应用程序
- 运行开发服务器
- 管理依赖项
-
文件操作
- 读取和写入文件
- 编辑React组件和配置
-
进程管理
- 启动并监控长时间运行的进程
- 实时跟踪进程输出
- 在需要时终止进程
-
命令执行
- 运行任意终端命令
- 安装npm包
- 执行开发任务
-
全面的日志记录
- 详细的JSON和文本日志
- 带有时间戳的进程跟踪
- 执行历史记录
安装
- 克隆此仓库
- 安装依赖项：
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：人类可读的文本日志
架构
服务器使用以下关键组件：
- Model Context Protocol SDK：用于与Claude AI通信
- StdioServerTransport：通过标准输入/输出进行I/O操作
- Zod：用于模式验证和类型安全
- Child Process：用于生成并管理外部进程
许可证
MIT
作者
贡献
欢迎贡献！请随时提交Pull Request。
