React MCP（模型上下文协议）

一个强大的服务器实现，使Claude AI能够通过Model Context Protocol与React应用程序交互。

示例用法

• Claude创建的Markdown编辑器/查看器

• Claude创建的API测试器

概述

React MCP为Claude AI与React生态系统之间架起了桥梁，使Claude能够：

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

此服务器实现了Model Context Protocol，赋予Claude在开发环境中执行现实世界操作的能力。

功能

• React项目管理

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

• 文件和目录管理

  • 在项目中轻松添加、删除和修改文件
  • 创建和删除目录
  • 拷贝文件或目录

• 包管理

  • 使用npm或yarn安装、卸载或升级包
  • 管理开发依赖项

安装

通过smithery

# 安装smithery CLI
npm install -g smithery-cli

# 在项目目录中初始化服务器
smithery init @streen9/react-mcp

手动安装

1. 克隆仓库：

   git clone https://github.com/Streen9/react-mcp.git
   cd react-mcp
   

2. 安装依赖：

   npm install
   

3. 启动服务器：

   npm start
   

使用说明

要在Claude中使用React MCP，需要在项目根目录添加以下配置文件：

// mcp-config.js
module.exports = {
  servers: [
    {
      name: 'react-mcp',
      type: 'stdio',
      path: './node_modules/.bin/react-mcp'
    }
  ]
}

工具

创建React应用

# 初始化新项目
npx create-react-app my-app

# 启动开发服务器
cd my-app
npm start

安装包

npm install <package-name>

管理进程

# 查看运行中的进程
ps aux | grep react-mcp

# 杀死特定进程
pkill -f "node ./.server-process"

日志

服务器在logs目录下维护详细的日志文件：

• react-mcp-logs.json：结构化的JSON日志
• react-mcp-logs.txt：人类可读的文本日志

架构

服务器使用以下关键组件：

• 模型上下文协议SDK：用于与Claude AI通信
• StdioServerTransport：用于通过标准输入/输出进行I/O
• Zod：用于模式验证和类型安全
• 子进程：用于 spawning 和管理外部进程

许可证

MIT

作者

@streen9

贡献

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