📚 React Agent 项目简介

React Agent 是一个实验性的自主代理项目,利用 GPT-4 语言模型从用户需求描述中自动生成和组合 React 组件。它基于 React、TailwindCSS、TypeScript、Radix UI 和 Shadcn UI 构建,并使用 OpenAI API。

该项目的主要特点包括:

• 从用户需求描述生成 React 组件
• 基于现有组件合成新的 React 组件
• 使用本地设计系统生成 React 组件
• 采用原子设计原则构建

🚀 快速开始指南

要开始使用 React Agent,请按照以下步骤操作:

1. 克隆项目仓库:

git clone git@github.com:eylonmiz/react-agent.git

2. 切换到项目目录

3. 获取 OpenAI API 密钥并设置环境变量

4. 安装依赖项

5. 运行后端脚本生成组件

6. 运行前端应用查看生成的组件

7. 按照说明自定义和操作项目

详细的安装和使用说明可以在项目的 GitHub 仓库 中找到。

📖 重要学习资源

以下是一些重要的 React Agent 学习资源:

1. 官方文档网站 - 全面的项目文档
2. 特性流程图 - 了解项目的工作原理
3. 原始设计文档 - 深入了解项目架构
4. 个人笔记 - 开发者的个人见解

🛠️ 项目定制

React Agent 提供了多种定制选项:

1. 自定义工作流程:

   • 文件: backend/main/react-agent/generateComponents.ts
   • 描述: 控制生成过程的流程,可以逐步运行或完整运行

2. 渲染应用:

   • 文件: frontend/main/src/GenReactApp.tsx
   • 描述: 渲染生成的应用,文件中有示例

3. 生成 React 组件:

   • 在 LOCAL_COMPONENTS_DIR 下创建文件夹
   • 生成详细的 user-story.md 文件
   • 修改 generateComponents.ts 中的 CONTAINER_PATH
   • 运行后端脚本生成 React 组件

4. 自定义文件夹结构:

   • UI_COMPONENTS_DIR: UI 组件位置
   • DEMO_COMPONENTS_DIR: UI 组件演示文件位置
   • LOCAL_COMPONENTS_DIR: 生成的组件位置

⚠️ 使用限制

使用 React Agent 时需要注意以下限制:

• 生成的代码不适用于生产环境,仅供原型设计使用
• 目前仅支持 GPT-4,不支持 GPT-3.5
• 输出可能包含错误,建议在使用前进行审查和测试
• 用户需求到 JSON 文件的转换可能不完美,可能需要手动调整
• 建议逐步运行并审查生成的代码

🤝 贡献与社区

React Agent 是一个开源项目,欢迎社区贡献:

• 特别感谢 shadcn/ui 提供的 UI 组件库
• 项目由 @eylonmiz 和 @leetwito 共同创建

React Agent 是一个充满潜力的项目,为 React 开发者提供了一种新的组件生成方式。通过本文提供的资源,开发者可以快速上手并探索这个创新工具的可能性。欢迎加入 React Agent 社区,共同推动项目的发展! 🚀