← 返回目录

React MCP

社区

让 Claude 通过模型上下文协议创建和修改 React 应用。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 426 / 438
Stars: ★ 76 热门
传输方式: stdio（本地进程）
运行环境: Node.js
凭据: 无需凭据
许可证: MIT
最近提交: 19 个月前 ⚠
工具数: 10

26FMRS · D

React MCP 提供了一个实用的桥梁，让 Claude 能够直接操作 React 项目。它功能全面，覆盖了创建、运行、文件编辑和包管理等核心开发任务。然而，它需要直接执行命令和文件访问，存在安全风险，用户应谨慎使用。

最强项 · 维护活跃度 7/20 最弱项 · 安全与权限 3/20

可靠性

5/20

安全与权限

3/20

维护活跃度

7/20

文档质量

6/20

安装易用性

5/20

查看各项评分依据

可靠性 5/20: 源码中未见任何测试或CI配置，无法验证声明工具的实际行为。README描述了多种工具，但缺乏可复现的测试证据，执行路径可能包含未处理错误。
安全与权限 3/20: 存在执行任意终端命令的工具（run-command），未要求显式确认，且无网络访问限制或权限最小化措施。默认命令执行无确认，构成高风险，但未发现恶意或凭据窃取行为。
维护活跃度 7/20: 仓库有MIT许可证，显示活跃，有73颗星，但有2个开放issue。README未提及更新或安全响应渠道，维护证据不充分。
文档质量 6/20: README提供了安装和使用示例，但缺少故障排除、参数细节和限制说明。样本用法链接可能过期，未提供可验证的证据。
安装易用性 5/20: 需要手动克隆和配置，提供了npm install和claude_desktop_config示例，但缺乏跨平台详细步骤，且未包含验证步骤，安装路径可能脆弱。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么读取本地文件写入 / 删除本地文件执行命令或代码

适合谁

开发人员希望使用 Claude 加速 React 开发
需要与 Claude Desktop 集成进行实际编码任务
需要自动化项目搭建和依赖管理的团队

不适合谁

需要图形用户界面的用户
希望使用远程/云端部署的用户
需要内置认证或安全控制的场景

所需权限

文件系统读写
执行终端命令
安装软件包
进程管理

风险与副作用

可以执行任意命令，存在安全风险
文件操作可能覆盖现有文件
创建的应用可能包含恶意模板
进程可能消耗系统资源

安装接入

准备工作

运行环境：Node.js

克隆仓库：git clone https://github.com/kalivaraprasad-gonapa/react-mcp
安装依赖：npm install
在 Claude Desktop 配置文件中添加服务器配置。

claude_desktop_config.json

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

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

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

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add react-mcp -- node C:/Users/kalip/OneDrive/Desktop/react-mcp/index.js

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

配置 claude_desktop_config 并重启 Claude Desktop 后，在工具列表中应能看到 create-react-app、run-command、read-file 等工具；也可以直接发送一个 prompt 让 Claude 执行 run-command 运行 node -v 来验证连接。

常见排障

确保 Node.js 已安装且版本兼容
确认 index.js 路径正确
检查日志文件 logs/react-mcp-logs.txt 获取错误信息
验证项目路径存在且包含有效的 React 项目

试试这样问

连接成功后，可以直接对 AI 助手这样说：

用 typescript 模板在 D:/projects 目录下创建一个名为 my-app 的 React 应用
运行 D:/projects/my-app 这个 React 项目的开发服务器
在这个项目里安装 axios 作为依赖
读取 src/App.js 的内容，然后把标题改成 Hello World

工具能力 10

create-react-app 写入

创建新的 React 应用程序，支持可选模板。

run-react-app 写入

以开发模式运行 React 应用程序。

run-command 写入

在指定目录运行终端命令。

get-process-output 只读

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

stop-process 写入

停止正在运行的进程。

list-processes 只读

列出所有正在运行的进程。

edit-file 写入

创建或编辑文件。

read-file 只读

读取文件内容。

展开其余 2 个工具

install-package 写入

在项目中安装 npm 包，可选作为开发依赖。

check-installation-status 只读

检查包安装过程的状态。

使用场景

通过自然语言创建 React 应用

运行和管理的开发服务器

编辑 React 组件和配置文件

安装和管理 npm 包

执行任意终端命令

支持客户端

Claude Desktop

依据项目文档列出，未经本站实测。

详细介绍

React MCP 是一个功能强大的服务器实现，使 Claude AI 能够通过模型上下文协议与 React 应用程序交互。它允许 Claude 创建新的 React 应用程序、运行开发服务器、管理文件和目录、安装 npm 包、执行终端命令以及跟踪和管理长时间运行的进程。