AI导哈

React开发协议服务

React MCP是一个实现模型上下文协议的服务器，使Claude AI能够与React应用交互，支持创建、运行和管理React项目、文件操作及进程管理。

  • by kalivaraprasad-gonapa
  • JavaScript
  • 本地部署
  • 76 星标
  • 更新于
在 GitHub 查看 kalivaraprasad-gonapa/react-mcp

使用说明

React MCP（模型上下文协议）

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

示例使用

概述

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

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

此服务器实现了模型上下文协议，使Claude能够在开发环境中执行真实世界的操作。

特性

  • React项目管理

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

  • 文件操作

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

  • 流程管理

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

  • 命令执行

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

  • 综合录井

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

安装

通过Smithery安装

通过以下方式自动安装React MCP for Claude Desktop 史密瑟里:

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模板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
  • 萨德：用于模式验证和类型安全
  • 子进程：用于生成和管理外部进程

许可证

麻省理工学院

作者

@斯特伦9

贡献

欢迎投稿！请随时提交拉取请求。

相关 MCP