react-agent

ReactAgent 项目介绍

ReactAgent 是一个开源的实验性自动化代理，它利用先进的 GPT-4 语言模型，从用户故事中生成并组合 React 组件。该项目以 React.js 为基础，并结合了 TailwindCSS、Typescript、Radix UI、Shadcn UI 和 OpenAI API 等技术。

主要特性

• 生成 React 组件：根据用户故事自动生成对应的 React 组件。
• 组件组合：可以将现有组件重新组合成新的组件。
• 本地设计系统：利用本地设计系统生成 React 组件。
• 采用前沿技术：使用 React、TailwindCSS、Typescript、Radix UI、Shadcn UI 等技术构建。
• 采用原子设计原则：注重组件的可复用性和可维护性，力求符合软件工程的最佳实践。

使用示例

项目展示了通过用户故事生成 React 组件的具体示例。用户可以通过简单的指令生成自己的组件，进一步体验项目的强大功能。

快速上手指南

1. 克隆项目代码仓库：

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

2. 切换到项目目录：

   cd react-agent

3. 获取 OpenAI API 密钥，并在 .env 文件中设置 OPENAI_SECRET_KEY。
4. 安装项目依赖：

   yarn install

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

   yarn backend:dev

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

   yarn frontend:dev

7. 在 frontend/main/src/GenReactApp.tsx 文件中检视及修改生成的组件。

文档与资源

• 项目文档网站
• 文档和架构信息位于项目的 architecture 文件夹内。
• 功能流程图
• 详细设计文档
• 开发者个人笔记

项目定制化

ReactAgent 提供了多种配置选项，允许用户根据特定需求来定制项目：

1. 自定义工作流：可以在 backend/main/react-agent/generateComponents.ts 中修改生成流程。
2. 应用呈现：使用 JsonSkeleton 和 demo.tsx 文件渲染页面。
3. 生成 React 组件：在指定文件夹下生成用户故事文档，并根据文档生成组件。
4. 定制文件夹结构：通过 .env.example 文件设置不同组件文件存放路径。

下一步计划

• 编辑现有组件
• 在生成后测试组件
• 从线框图生成骨架代码
• 利用远程设计系统生成组件
• 增加外部库支持

限制说明

需要注意的是，ReactAgent 目前生成的代码仅用于原型制作，不适合直接在生产环境使用。同时，项目对 GPU-4 有较大依赖，而 GPT-3.5 并不支持。此外，代码初次生成时可能包含部分错误，建议逐步执行并核查生成结果。此外，使用过程中还需注意监控API使用情况，以免产生意外费用。

免责声明

ReactAgent 项目为实验性质的软件，使用该软件需自行承担可能带来的风险和损失，开发者不对其使用结果负责。使用者需保证所生成的内容符合相关的法律法规及商业规范。

致谢与贡献

感谢社区对该项目的支持，项目由 互联网社区 提供 UI 组件库，项目共同创建者为 @eylonmiz 和 @leetwito。