React Development Assistant

🚀 React MCP（模型上下文协议）

React MCP是一个强大的服务器实现，它搭建起了Claude AI与React应用程序之间的桥梁，让Claude AI能够通过Model Context Protocol与React应用程序进行交互。

🚀 快速开始

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

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

✨ 主要特性

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创建的Markdown编辑器/查看器
• Claude创建的API测试器

工具使用示例

创建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"

📚 详细文档

概述

React MCP为Claude AI与React生态系统之间架起了桥梁，使Claude能够创建新的React应用程序、运行React开发服务器、管理文件和目录、安装npm包、执行终端命令以及跟踪并管理长-running进程。此服务器实现了Model Context Protocol，赋予Claude在开发环境中执行现实世界操作的能力。

日志

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

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

🔧 技术细节

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

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

📄 许可证

本项目采用MIT许可证。

👨‍💻 作者

@streen9

🤝 贡献

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