e
eylonmiz/react-agent
The open-source React.js Autonomous LLM Agent
agentgpt-4headlessheadlessuillmreact
TypeScriptMIT创建于 2023/5/11更新于 1 周前
README
由 Gemini 翻译整理
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 组件
- 使用本地设计系统来生成 React 组件
- 采用 React、TailwindCSS、TypeScript、Radix UI、Shadcn UI 技术栈
- 基于原子设计原则（Atomic Design Principles）构建
😮 示例
（此处应有示例图片或演示）
🌈 快速开始
- 克隆仓库
git clone git@github.com:eylonmiz/react-agent.git
- 进入项目目录
cd react-agent
- 获取 OpenAI API Key
- 在
backend/main/.env文件中设置OPENAI_SECRET_KEY（请参考.env.example），或者运行以下脚本：
echo OPENAI_SECRET_KEY="INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE" >> backend/main/.env
- 安装依赖
yarn install
- 运行后端脚本 - 该脚本负责组件的生成
yarn backend:dev
- 运行前端应用以查看组件效果
yarn frontend:dev
- 打开
frontend/main/src/GenReactApp.tsx
阅读说明并将示例组件替换为您生成的组件
- 阅读项目自定义部分
阅读“项目自定义”章节以了解如何定制和操作本项目
📚 文档
- 文档网站
- architecture 文件夹中包含部分文档与架构说明
- 功能流程
- 原始设计文档
- 个人笔记
PRD / 用户需求转代码
（此处应有流程图示）
组件生成流程
（此处应有流程图示）
🛠️ 项目自定义
- 自定义工作流：
- 文件：
backend/main/react-agent/generateComponents.ts - 描述：可控制生成过程的流程，支持分步运行或全流程运行。
- 文件：
- 渲染应用
- 文件：
frontend/main/src/GenReactApp.tsx - 描述：渲染生成的应用程序，请参考文件中的示例。
- 使用
JsonSkeleton渲染页面骨架 - 使用
demo.tsx文件渲染演示页面
- 使用
- 文件：
- 生成 React 组件
- 文件夹：在
LOCAL_COMPONENTS_DIR（默认为frontend/main/src/react-agent，请参考.env.example）下创建一个文件夹。 - 描述：在该文件夹下创建一个
user-story.md文件，尽可能提供详细描述。 - 将
generateComponents.ts中的CONTAINER_PATH修改为文件夹名称。 - 运行后端脚本以生成 React 组件。
- 文件夹：在
- 自定义文件夹结构（请参考
.env.example文件）UI_COMPONENTS_DIR- UI 组件存放位置DEMO_COMPONENTS_DIR- UI 组件演示文件存放位置LOCAL_COMPONENTS_DIR- 生成组件的存放位置
📦 后续步骤
- 编辑现有组件
- 生成后进行组件测试
- 线框图转骨架代码
- 使用远程设计系统生成 React 组件
- 使用外部库
- 组件逻辑控制（状态、props、上下文、副作用、API 调用等）
⚠️ 局限性
- 生成的代码并非生产就绪（Production-ready），仅供原型设计使用。
- 目前仅在 GPT-4 下工作良好，暂不支持 GPT-3.5，请确保您的 OpenAI 账户已启用 GPT-4。
- 输出内容可能包含一些 Bug 和错误，因此建议在使用或将其运行于开发环境前，仔细审查并测试代码。
- 生成过程的第一步是将用户需求转换为 JSON 文件。这一步并非完美，可能会导致一些不准确或信息缺失，如有必要，请手动修改 JSON 文件。
- 建议分步运行，并在每一步执行后审查生成的代码。
🛡 免责声明
ReactAgent 项目是一个实验性应用程序，按“现状”提供，不包含任何明示或暗示的保证。使用本软件即表示您同意……