ReactAgent - 开源的 React.js 自主导航 LLM 代理

开源的 React.js 自主导航 LLM 代理

观看演示 »

官网 · 观看演示 · 演示代码示例 · 文档 · Discord 社区

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

📖 简介

ReactAgent 是一个实验性的自主代理，它利用 GPT-4 语言模型根据用户故事生成并组合 React 组件。该项目基于 React、TailwindCSS、TypeScript、Radix UI、Shandcn UI 和 OpenAI API 构建。

🚀 特性

• 根据用户故事生成 React 组件
• 从现有组件中组合新的 React 组件
• 使用本地设计系统生成 React 组件
• 技术栈包括 React、TailwindCSS、TypeScript、Radix UI 和 Shadcn UI
• 遵循原子设计原则构建

😮 示例

🌈 快速入门

1. 克隆仓库

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

2. 进入项目目录

cd react-agent

3. 获取 OpenAI 的 API 密钥
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 文件夹中
• 功能流程
• 原始设计文档
• 个人笔记

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 —— 存放生成的组件的目录

📦 后续步骤

• 编辑现有组件
• 生成后对组件进行测试
• 将线框图转换为骨架代码
• 使用远程设计系统生成 React 组件
• 引入外部库
• 控制组件逻辑（状态、props、上下文、副作用、API 调用等）

⚠️ 局限性

• 生成的代码并非生产就绪，仅适用于原型开发。
• 目前仅支持 GPT4，暂不支持 GPT-3.5，请确保你的 OpenAI 账户已启用 GPT4。
• 输出可能包含一些 bug 和错误，建议在将其用于生产环境之前仔细审查并测试代码，或者先在开发环境中运行。
• 生成过程的第一步是将用户故事转换为 JSON 文件。这一步并不完美，可能会导致一些不准确或信息缺失，必要时可手动调整 JSON 文件。
• 建议逐步执行生成流程，并在每一步之后检查生成的代码。

🛡 免责声明

本项目 ReactAgent 属于实验性应用，按“原样”提供，不提供任何明示或暗示的担保。使用本软件即表示您同意承担与使用相关的所有风险，包括但不限于数据丢失、系统故障或其他可能出现的问题。

本项目的开发者及贡献者对因使用本软件而导致的任何损失、损害或其他后果不承担任何责任。您应对基于 ReactAgent 提供的信息所作出的任何决策和行动自行负责。

请注意，由于 GPT-4 语言模型的 token 使用量较高，使用该模型可能会产生较高的费用。 使用本项目即表示您承认自己有责任监控和管理自身的 token 使用情况及由此产生的费用。强烈建议您定期检查 OpenAI API 的使用情况，并设置必要的限制或提醒，以避免产生意外费用。

作为一项自主实验，ReactAgent 可能会生成不符合现实业务实践或法律要求的内容或采取相应行动。您有责任确保基于本软件输出所作出的所有行为或决策均符合所有适用的法律、法规及道德标准。本项目开发者及贡献者对因使用本软件而产生的任何后果概不负责。

使用 ReactAgent 即表示您同意就因您使用本软件或违反本条款而引起的任何及所有索赔、损害赔偿、损失、责任、成本和费用（包括合理的律师费），向开发者、贡献者及任何关联方进行赔偿、辩护并使其免受损害。

👨‍💻 贡献

• 特别感谢 https://github.com/shadcn/ui 提供的 UI 组件库，它大大简化了本项目的开发。

💪 由社区、为社区

由 reactagent.io 提供支持

• 由 @eylonmiz 和 @leetwito 共同创建

ReactAgent 快速上手指南

ReactAgent 是一个开源的自主 LLM 代理，能够利用 GPT-4 根据用户故事（User Stories）自动生成并组合 React 组件。本项目基于 React、TailwindCSS、TypeScript、Radix UI 和 Shadcn UI 构建。

注意：本工具为实验性项目，生成的代码仅供原型设计参考，尚未达到生产环境标准。必须使用 GPT-4 模型（不支持 GPT-3.5）。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：macOS, Linux 或 Windows (WSL2 推荐)
• Node.js: 建议版本 18+
• 包管理器: Yarn (npm install -g yarn)
• OpenAI API Key: 您需要一个拥有 GPT-4 访问权限的 OpenAI 账户及 API Key。
• Git: 用于克隆仓库。

安装步骤

1. 克隆项目

将仓库克隆到本地并进入项目目录：

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

2. 配置 OpenAI 密钥

获取您的 OpenAI API Key，并将其写入后端配置文件。

您可以直接运行以下命令（将 INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE 替换为您的真实 Key）：

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

或者手动创建 backend/main/.env 文件，内容参考 .env.example。

3. 安装依赖

使用 Yarn 安装项目所需的所有依赖包：

yarn install

基本使用

完成安装后，按照以下步骤生成并预览您的第一个 React 组件。

1. 启动后端服务（生成组件）

运行后端脚本，该脚本将调用 GPT-4 根据预设的用户故事生成组件代码：

yarn backend:dev

2. 启动前端应用（预览组件）

在新终端窗口中运行前端开发服务器，以查看生成的组件效果：

yarn frontend:dev

3. 查看与修改

打开 frontend/main/src/GenReactApp.tsx 文件。

• 阅读文件内的注释说明。
• 将示例组件引用更改为您刚刚生成的组件，即可在浏览器中预览。

4. 自定义生成任务（进阶）

若要生成自定义组件，请按以下步骤操作：

1. 创建用户故事：在 LOCAL_COMPONENTS_DIR 指定的文件夹下（默认为 frontend/main/src/react-agent），新建一个文件夹。
2. 编写需求：在该文件夹内创建 user-story.md 文件，尽可能详细地描述您想要的组件功能。
3. 配置路径：打开 backend/main/react-agent/generateComponents.ts，将 CONTAINER_PATH 变量修改为您刚才创建的文件夹名称。
4. 重新运行：再次执行 yarn backend:dev 开始生成。

提示：由于涉及 GPT-4 Token 消耗，建议在生成过程中分步检查代码质量，并及时监控 API 使用情况以避免产生意外费用。