访问官网
Github
文档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 组件的具体示例。用户可以通过简单的指令生成自己的组件，进一步体验项目的强大功能。
快速上手指南
- 克隆项目代码仓库：
git clone git@github.com:eylonmiz/react-agent.git - 切换到项目目录：
cd react-agent - 获取 OpenAI API 密钥，并在
.env文件中设置OPENAI_SECRET_KEY。 - 安装项目依赖：
yarn install - 运行后端脚本来生成组件：
yarn backend:dev - 运行前端应用，并查看生成的组件：
yarn frontend:dev - 在
frontend/main/src/GenReactApp.tsx文件中检视及修改生成的组件。
文档与资源
项目定制化
ReactAgent 提供了多种配置选项，允许用户根据特定需求来定制项目：
- 自定义工作流：可以在
backend/main/react-agent/generateComponents.ts中修改生成流程。 - 应用呈现：使用
JsonSkeleton和demo.tsx文件渲染页面。 - 生成 React 组件：在指定文件夹下生成用户故事文档，并根据文档生成组件。
- 定制文件夹结构：通过
.env.example文件设置不同组件文件存放路径。
下一步计划
- 编辑现有组件
- 在生成后测试组件
- 从线框图生成骨架代码
- 利用远程设计系统生成组件
- 增加外部库支持
限制说明
需要注意的是，ReactAgent 目前生成的代码仅用于原型制作，不适合直接在生产环境使用。同时，项目对 GPU-4 有较大依赖，而 GPT-3.5 并不支持。此外，代码初次生成时可能包含部分错误，建议逐步执行并核查生成结果。此外，使用过程中还需注意监控API使用情况，以免产生意外费用。
免责声明
ReactAgent 项目为实验性质的软件，使用该软件需自行承担可能带来的风险和损失，开发者不对其使用结果负责。使用者需保证所生成的内容符合相关的法律法规及商业规范。
致谢与贡献
感谢社区对该项目的支持，项目由 互联网社区 提供 UI 组件库，项目共同创建者为 @eylonmiz 和 @leetwito。
