React MCP (模型上下文协议)

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

<a href="https://glama.ai/mcp/servers/xsjsdumc7x"> <img width="380" height="200" src="https://glama.ai/mcp/servers/xsjsdumc7x/badge" alt="https://github.com/Streen9/react-mcp MCP server" /> </a>

示例用法

• Claude 的 Markdown 编辑器/查看器

• Claude 的 API 测试器

概述

React MCP 提供了 Claude AI 和 React 生态系统之间的桥梁，允许 Claude 执行以下操作：

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

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

特性

• React 项目管理

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

• 文件操作

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

• 进程管理

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

• 命令执行

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

• 全面的日志记录

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

安装

通过 Smithery 安装

要通过 Smithery 为 Claude Desktop 自动安装 React MCP，请执行以下操作：

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 传输上运行，允许将其用作 Desktop 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: 用于模式验证和类型安全
• Child Process: 用于生成和管理外部进程

许可证

MIT

作者

@streen9

贡献

欢迎贡献！请随时提交 Pull Request。