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手动安装
- 克隆此存储库
- 安装依赖项：
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
- 萨德：用于模式验证和类型安全
- 子进程：用于生成和管理外部进程
许可证
麻省理工学院
作者
贡献
欢迎投稿！请随时提交拉取请求。