关键词

React开发代码生成自动化开发工具Claude AI

项目简介

React MCP (Model Context Protocol) 服务器是一个桥梁，连接了 Claude AI 和 React 生态系统。它允许 Claude 通过预定义的工具集，在 React 开发环境中执行各种操作，例如创建新的 React 应用、启动开发服务器、管理文件和目录、安装 npm 包以及执行终端命令等。该服务器实现了 Model Context Protocol 协议，使得 Claude 能够与实际的开发环境进行交互，完成更复杂的任务。

主要功能点

  • React 项目管理：
    • 创建新的 React 应用，支持自定义模板。
    • 启动和停止 React 开发服务器。
    • 管理项目依赖（安装 npm 包）。
  • 文件操作：
    • 读取和编辑项目文件，包括 React 组件和配置文件。
  • 进程管理：
    • 启动和监控长时间运行的进程（如开发服务器）。
    • 实时跟踪进程输出。
    • 终止正在运行的进程。
  • 命令执行：
    • 执行任意终端命令。
    • 支持在指定目录下执行命令。
  • 日志记录：
    • 提供详细的 JSON 和文本格式日志，方便问题排查和功能审计。

安装步骤

  1. 克隆仓库：将仓库 'https://github.com/Streen9/react-mcp' 克隆到本地。
  2. 安装依赖：在仓库根目录下运行 'npm install' 命令安装项目依赖。

服务器配置

要将 React MCP 服务器与 MCP 客户端（例如 Claude 桌面应用）连接，您需要在客户端的配置文件中添加服务器配置信息。以下是一个示例 'claude_desktop_config' 配置，您需要根据您的实际情况修改 'command' 和 'args' 中的路径：

{
  "mcpServers": {
    "react-mcp": {
      "command": "node",
      "args": [
        "C:/path/to/react-mcp/index.js"  // 将 "C:/path/to/react-mcp/index.js" 替换为您的 react-mcp 仓库中 index.js 文件的实际路径
      ]
    }
  }
}

配置参数说明:

  • 'server name': 'react-mcp' (服务器名称，在客户端配置中用于标识该服务器).
  • 'command': 'node' (启动服务器的命令，这里使用 Node.js 运行 JavaScript 文件).
  • 'args': '["C:/path/to/react-mcp/index.js"]' (传递给 'command' 的参数，这里是 'index.js' 文件的绝对路径). 请务必将路径替换为您本地仓库 'index.js' 文件的实际绝对路径。

基本使用方法

配置完成后，MCP 客户端（如 Claude AI）应该能够检测到并连接到 React MCP 服务器。您可以通过客户端提供的界面或指令，调用服务器提供的工具来执行各种 React 开发相关的任务。

例如，您可以指示 Claude 创建一个新的 React 应用，运行已有的 React 项目，或者编辑项目中的文件。具体的工具和参数请参考仓库 README.md 文件中 "Available Tools" 部分的说明。

服务器运行后，会在 'logs' 目录下生成详细的日志文件 'react-mcp-logs.json' 和 'react-mcp-logs.txt'，用于记录服务器运行状态和工具调用信息。

信息

分类

开发者工具

访问项目