ReactAgent - 开源的 React.js 自主 LLM Agent

https://github.com/eylonmiz/react-agent/assets/43254163/d2e36b75-2901-4950-a4f6-6a39b1067796

---

📖 简介

ReactAgent 是一个实验性的自主 Agent，利用 GPT-4 语言模型根据用户需求（User Stories）来生成和组合 React 组件。它基于 React、TailwindCSS、TypeScript、Radix UI、Shadcn UI 和 OpenAI API 构建。

🚀 特性

• 从用户需求生成 React 组件
• 从现有组件中组合 React 组件
• 利用本地设计系统（Design System）生成 React 组件
• 使用 React、TailwindCSS、TypeScript、Radix UI、Shadcn UI 技术栈
• 采用原子设计（Atomic Design）原则构建

😮 示例

🌈 快速开始

1. 克隆仓库

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

2. 进入项目目录

cd react-agent

3. 获取 OpenAI API Key
4. 在 backend/main 目录下的 .env 文件中设置 OPENAI_SECRET_KEY（参考 .env.example），或运行以下脚本：

echo OPENAI_SECRET_KEY="INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE" >> backend/main/.env

5. 安装依赖

yarn install

6. 运行后端脚本 - 该脚本负责生成组件

yarn backend:dev

7. 运行前端应用以查看生成的组件效果

yarn frontend:dev

8. 打开 frontend/main/src/GenReactApp.tsx

阅读说明，并将示例组件更改为您生成的组件

9. 阅读项目自定义章节

阅读项目自定义章节，了解如何定制和操作本项目

📚 文档

• 文档网站
• 部分文档和架构说明请见 architecture 文件夹
• 功能流程（Feature Flow）
• 原始设计文档
• 个人笔记

PRD / 用户需求转代码

组件生成流程

🛠️ 项目自定义

1. 自定义工作流：
   • 文件：backend/main/react-agent/generateComponents.ts
   • 说明：可控制生成过程，支持分步执行或全自动流程。
2. 渲染应用
   • 文件：frontend/main/src/GenReactApp.tsx
   • 说明：渲染生成的应用，参考文件中的示例。
     • 使用 JsonSkeleton 渲染页面骨架
     • 使用 demo.tsx 文件渲染演示页面
3. 生成 React 组件
   • 文件夹：在 LOCAL_COMPONENTS_DIR（默认为 frontend/main/src/react-agent）下创建一个文件夹（参考 .env.example）。
   • 说明：在该文件夹下创建一个 user-story.md 文件，描述尽可能详细。
   • 在 generateComponents.ts 中将 CONTAINER_PATH 修改为文件夹名称。
   • 运行后端脚本以生成 React 组件。
4. 自定义文件夹结构（参考 .env.example 文件）
   • UI_COMPONENTS_DIR - UI 组件存放路径
   • DEMO_COMPONENTS_DIR - UI 组件演示文件存放路径
   • LOCAL_COMPONENTS_DIR - 生成的组件存放路径

📦 后续步骤

• 编辑现有组件
• 生成后测试组件
• 将线框图（Wireframe）转换为骨架代码
• 使用远程设计系统生成 React 组件
• 使用外部库
• 组件逻辑控制（state、props、context、effects、API 调用等）

⚠️ 限制

• 生成的代码并非生产就绪（Production-ready），仅供原型设计使用。
• 目前仅支持 GPT-4，暂不支持 GPT-3.5，请确保您的 OpenAI 账号已开通 GPT-4 权限。
• 输出内容可能存在少量 Bug 和错误，建议在生产环境使用前，甚至在开发环境运行前，务必审查并测试代码。
• 生成过程的第一步是将用户需求转换为 JSON 文件，此步骤不够完美，可能导致信息不准确或缺失，如有必要，请手动修改 JSON 文件。
• 建议分步运行，并在每一步完成后审查生成的代码。

🛡 免责声明

本项目 ReactAgent 是一个实验性应用，按“原样”提供，没有任何明示或暗示的保证。使用本软件即表示您同意……