[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-eylonmiz--react-agent":3,"similar-eylonmiz--react-agent":81},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":9,"readme_en":10,"readme_zh":11,"quickstart_zh":12,"use_case_zh":13,"hero_image_url":14,"owner_login":15,"owner_name":16,"owner_avatar_url":17,"owner_bio":18,"owner_company":19,"owner_location":20,"owner_email":21,"owner_twitter":22,"owner_website":19,"owner_url":23,"languages":24,"stars":41,"forks":42,"last_commit_at":43,"license":44,"difficulty_score":45,"env_os":46,"env_gpu":47,"env_ram":48,"env_deps":49,"category_tags":60,"github_topics":64,"view_count":45,"oss_zip_url":21,"oss_zip_packed_at":21,"status":71,"created_at":72,"updated_at":73,"faqs":74,"releases":75},6634,"eylonmiz\u002Freact-agent","react-agent","The open-source React.js Autonomous LLM Agent","ReactAgent 是一款开源的自主式 AI 代理，专为 React 开发者打造。它能够利用 GPT-4 大语言模型，直接将用户的需求描述（User Stories）转化为可运行的 React 组件代码，甚至能基于现有组件进行组合构建。\n\n在传统开发流程中，将产品需求或设计思路转化为具体代码往往耗时费力，且容易在重复性劳动中产生偏差。ReactAgent 旨在解决这一痛点，通过自动化生成高质量的前端代码，大幅缩短从“想法”到“原型”的路径，让开发者能更专注于核心业务逻辑而非基础样板代码。\n\n这款工具非常适合前端工程师、全栈开发者以及希望快速验证产品原型的创业团队使用。如果你熟悉 React 生态并希望通过 AI 提升编码效率，ReactAgent 将是一个得力的助手。\n\n其技术亮点在于深度集成了现代化的前端技术栈，包括 TailwindCSS、TypeScript、Radix UI 和 Shadcn UI，并严格遵循“原子设计原则”来组织生成的代码结构。这意味着它不仅生成代码，还能确保产出物符合现代工程规范，易于维护和扩展。只需配置好 OpenAI 密钥，用户即可在本地环境中体验由 ","ReactAgent 是一款开源的自主式 AI 代理，专为 React 开发者打造。它能够利用 GPT-4 大语言模型，直接将用户的需求描述（User Stories）转化为可运行的 React 组件代码，甚至能基于现有组件进行组合构建。\n\n在传统开发流程中，将产品需求或设计思路转化为具体代码往往耗时费力，且容易在重复性劳动中产生偏差。ReactAgent 旨在解决这一痛点，通过自动化生成高质量的前端代码，大幅缩短从“想法”到“原型”的路径，让开发者能更专注于核心业务逻辑而非基础样板代码。\n\n这款工具非常适合前端工程师、全栈开发者以及希望快速验证产品原型的创业团队使用。如果你熟悉 React 生态并希望通过 AI 提升编码效率，ReactAgent 将是一个得力的助手。\n\n其技术亮点在于深度集成了现代化的前端技术栈，包括 TailwindCSS、TypeScript、Radix UI 和 Shadcn UI，并严格遵循“原子设计原则”来组织生成的代码结构。这意味着它不仅生成代码，还能确保产出物符合现代工程规范，易于维护和扩展。只需配置好 OpenAI 密钥，用户即可在本地环境中体验由 AI 驱动的全自动组件生成流程。","# ReactAgent - The open-source React.js Autonomous LLM Agent\n\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Freactagent.io\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_709a19251f0a.jpg\">\n    \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_709a19251f0a.jpg\" alt=\"Logo\"\u002F>\n  \u003C\u002Fpicture>\n\n\n  \u003Cp align=\"center\">\n    \u003Ch3>The open-source React.js Autonomous LLM Agent\u003C\u002Fh3>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fwww.loom.com\u002Fshare\u002F591fd03b54d04a74a15995815de47c76\">\u003Cstrong>Watch Demo »\u003C\u002Fstrong>\u003C\u002Fa>\n    \u003Cbr \u002F>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Freactagent.io\">Website\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fwww.loom.com\u002Fshare\u002F658adb2869174e81a39a0a2cdcfec4eb\">Watch Demo\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fpull\u002F7\u002Ffiles\">Demo Code Example\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fdocs.reactagent.io\">Docs\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002F57JjYNKe\">Discord\u003C\u002Fa>\n  \u003C\u002Fp>\n\u003C\u002Fp>\n\n[![MIT License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Feylonmiz\u002Freact-agent)](https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002FLICENSE) [![Number of GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Feylonmiz\u002Freact-agent?logo=github)](https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fstargazers) [![Discord is Live](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Live-green?logo=discord&logoColor=%23fff)](https:\u002F\u002Fdiscord.gg\u002F57JjYNKe) [![Docs are updated](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdocs-updated-green?color=blue)](https:\u002F\u002Fdocs.tutim.io) [![Product Hunt](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FProduct%20Hunt-Launch%20soon-orange?logo=producthunt&logoColor=%23fff)](https:\u002F\u002Fwww.producthunt.com\u002F@eylonmiz)\n\nhttps:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fassets\u002F43254163\u002Fd2e36b75-2901-4950-a4f6-6a39b1067796\n\n\u003C\u002Fdiv>\n\n---\n## 📖 Introduction\nReactAgent is an experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories. It is built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI API.\n\n## 🚀 Features\n- Generate React Components from user stories\n- Compose React Components from existing components\n- Use a local design system to generate React Components\n- Use React, TailwindCSS, Typescript, Radix UI, Shadcn UI\n- Built with Atomic Design Principles\n\n## 😮 Example\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_54d700ae6883.png\" alt=\"Example\"\u002F>\n\n## 🌈 Quickstart\n1. Clone repository\n```bash\ngit clone git@github.com:eylonmiz\u002Freact-agent.git\n```\n2. Change to the project directory\n```bash\ncd react-agent\n```\n3. Get an OpenAI [API Key](https:\u002F\u002Fplatform.openai.com\u002Faccount\u002Fapi-keys)\n4. Set OPENAI_SECRET_KEY in backend\u002Fmain .env file (see .env.example) or run the script below\n```bash\necho OPENAI_SECRET_KEY=\"INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE\" >> backend\u002Fmain\u002F.env\n```\n5. Install dependencies\n```bash\nyarn install\n```\n6. Run Backend Script - This script generates the components\n```bash\nyarn backend:dev\n```\n7. Run Frontend App to see your components in action\n```bash\nyarn frontend:dev\n```\n8. Open frontend\u002Fmain\u002Fsrc\u002FGenReactApp.tsx\n```bash\nRead the instructions and change the example component to the component you generated\n```\n9. Read Project Customization Section\n```bash\nRead the Project Customization Section to learn how to customize and operate the project\n```\n\n## 📚 Documentation\n- \u003Ca href=\"https:\u002F\u002Fdocs.reactagent.io\">Docs Website\u003C\u002Fa>\n- Some Docs and architecture in architecture folder\n- \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002Farch.md\">Feature Flow\u003C\u002Fa>\n- \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002Farchitecture\u002FDesign%20Document%20Overview.md\">Raw Design Docs\u003C\u002Fa>\n- \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002Fpersonal-note.md\">Personal Note\u003C\u002Fa>\n## PRD \u002F User Story to code\n\u003Ca href=\"https:\u002F\u002Fres.cloudinary.com\u002Ftutim\u002Fimage\u002Fupload\u002Fv1683750575\u002FReactGPT\u002FFeature_Flow_f8ih6c.jpg\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_82e3e2dc7b1e.png\" alt=\"Feature Flow\"\u002F>\n\u003C\u002Fa>\n\n## Component Generation Flow\n\u003Ca href=\"https:\u002F\u002Fres.cloudinary.com\u002Ftutim\u002Fimage\u002Fupload\u002Fv1683750585\u002FReactGPT\u002FComponent_Generation_atio0s.jpg\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_ee29b686fec4.png\" alt=\"Component Generator\"\u002F>\n\u003C\u002Fa>\n\n\n\n## 🛠️ Project Customization\n1. Customize workflow:\n   - file: backend\u002Fmain\u002Freact-agent\u002FgenerateComponents.ts\n   - description: Can control the flow of the generation process, run step by step or full flow.\n2. Render Application\n   - file: frontend\u002Fmain\u002Fsrc\u002FGenReactApp.tsx\n   - description: Render the generated application, see examples in the file.\n     - use JsonSkeleton to render the skeleton of the page\n     - use demo.tsx files to render the demo page\n3. Generate React Components\n   - folder: create a folder under LOCAL_COMPONENTS_DIR (default frontend\u002Fmain\u002Fsrc\u002Freact-agent) (see .env.example file)\n   - description: Generate a user-story.md file under the folder, make it as detailed as possible.\n   - change CONTAINER_PATH in generateComponents.ts to the folder name\n   - run the backend script to generate the React Components.\n4. Customize Folder Structure (see .env.example file)\n   - UI_COMPONENTS_DIR - Where your UI components are located\n   - DEMO_COMPONENTS_DIR - Where your UI components demo files are located\n   - LOCAL_COMPONENTS_DIR - Where your generated components are located\n\n\n## 📦 Next Steps\n- Edit existing components\n- Test Components after generating\n- Wireframe image to skeleton code\n- Remote design system to generate React Components\n- Use of external libraries\n- Component logic control (state, props, context, effects, api calls, etc.)\n## ⚠️ Limitations\n- The generated code is not production-ready and should be used for prototyping purposes only.\n- Only works well with GPT4, GPT-3.5 is not supported ATM, so make sure you have GPT4 enabled in your OpenAI account.\n- The output may come with a few bugs and errors, so it is recommended to review and test the code before using it in a production environment, or even running it in a development environment.\n- The first step of the generation process is to convert the user story into a JSON file. This step is not perfect and may result in some inaccuracies or missing information, consider changing the JSON file manually if necessary.\n- Advised to run it step by step, and review the generated code after each step.\n\n## 🛡 Disclaimer\n\nThis project, ReactAgent, is an experimental application and is provided \"as-is\" without any warranty, express or implied. By using this software, you agree to assume all risks associated with its use, including but not limited to data loss, system failure, or any other issues that may arise.\n\nThe developers and contributors of this project do not accept any responsibility or liability for any losses, damages, or other consequences that may occur as a result of using this software. You are solely responsible for any decisions and actions taken based on the information provided by ReactAgent.\n\n**Please note that the use of the GPT-4 language model can be expensive due to its token usage.** By utilizing this project, you acknowledge that you are responsible for monitoring and managing your own token usage and the associated costs. It is highly recommended to check your OpenAI API usage regularly and set up any necessary limits or alerts to prevent unexpected charges.\n\nAs an autonomous experiment, ReactAgent may generate content or take actions that are not in line with real-world business practices or legal requirements. It is your responsibility to ensure that any actions or decisions made based on the output of this software comply with all applicable laws, regulations, and ethical standards. The developers and contributors of this project shall not be held responsible for any consequences arising from the use of this software.\n\nBy using ReactAgent, you agree to indemnify, defend, and hold harmless the developers, contributors, and any affiliated parties from and against any and all claims, damages, losses, liabilities, costs, and expenses (including reasonable attorneys' fees) arising from your use of this software or your violation of these terms.\n\n## 👨‍💻 Contribution\n- Special thanks to https:\u002F\u002Fgithub.com\u002Fshadcn\u002Fui for the UI components library that made this project much easier to build\n### 💪 By the community, for the community\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_6d0ebc1219ec.png)\nPowered by [reactagent.io](https:\u002F\u002Freactagent.io)\n- Co-created by @eylonmiz and @leetwito\n","# ReactAgent - 开源的 React.js 自主导航 LLM 代理\n\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Freactagent.io\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_709a19251f0a.jpg\">\n    \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_709a19251f0a.jpg\" alt=\"Logo\"\u002F>\n  \u003C\u002Fpicture>\n\n\n  \u003Cp align=\"center\">\n    \u003Ch3>开源的 React.js 自主导航 LLM 代理\u003C\u002Fh3>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fwww.loom.com\u002Fshare\u002F591fd03b54d04a74a15995815de47c76\">\u003Cstrong>观看演示 »\u003C\u002Fstrong>\u003C\u002Fa>\n    \u003Cbr \u002F>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Freactagent.io\">官网\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fwww.loom.com\u002Fshare\u002F658adb2869174e81a39a0a2cdcfec4eb\">观看演示\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fpull\u002F7\u002Ffiles\">演示代码示例\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fdocs.reactagent.io\">文档\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002F57JjYNKe\">Discord 社区\u003C\u002Fa>\n  \u003C\u002Fp>\n\u003C\u002Fp>\n\n[![MIT 许可证](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Feylonmiz\u002Freact-agent)](https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002FLICENSE) [![GitHub 星标数](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Feylonmiz\u002Freact-agent?logo=github)](https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fstargazers) [![Discord 在线](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Live-green?logo=discord&logoColor=%23fff)](https:\u002F\u002Fdiscord.gg\u002F57JjYNKe) [![文档已更新](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdocs-updated-green?color=blue)](https:\u002F\u002Fdocs.tutim.io) [![Product Hunt](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FProduct%20Hunt-Launch%20soon-orange?logo=producthunt&logoColor=%23fff)](https:\u002F\u002Fwww.producthunt.com\u002F@eylonmiz)\n\nhttps:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fassets\u002F43254163\u002Fd2e36b75-2901-4950-a4f6-6a39b1067796\n\n\u003C\u002Fdiv>\n\n---\n## 📖 简介\nReactAgent 是一个实验性的自主代理，它利用 GPT-4 语言模型根据用户故事生成并组合 React 组件。该项目基于 React、TailwindCSS、TypeScript、Radix UI、Shandcn UI 和 OpenAI API 构建。\n\n## 🚀 特性\n- 根据用户故事生成 React 组件\n- 从现有组件中组合新的 React 组件\n- 使用本地设计系统生成 React 组件\n- 技术栈包括 React、TailwindCSS、TypeScript、Radix UI 和 Shadcn UI\n- 遵循原子设计原则构建\n\n## 😮 示例\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_54d700ae6883.png\" alt=\"Example\"\u002F>\n\n## 🌈 快速入门\n1. 克隆仓库\n```bash\ngit clone git@github.com:eylonmiz\u002Freact-agent.git\n```\n2. 进入项目目录\n```bash\ncd react-agent\n```\n3. 获取 OpenAI 的 [API 密钥](https:\u002F\u002Fplatform.openai.com\u002Faccount\u002Fapi-keys)\n4. 在 backend\u002Fmain\u002F.env 文件中设置 OPENAI_SECRET_KEY（参考 .env.example）或运行以下命令：\n```bash\necho OPENAI_SECRET_KEY=\"INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE\" >> backend\u002Fmain\u002F.env\n```\n5. 安装依赖\n```bash\nyarn install\n```\n6. 运行后端脚本——该脚本负责生成组件\n```bash\nyarn backend:dev\n```\n7. 运行前端应用以查看生成的组件效果\n```bash\nyarn frontend:dev\n```\n8. 打开 frontend\u002Fmain\u002Fsrc\u002FGenReactApp.tsx\n```bash\n阅读说明，并将示例组件替换为你生成的组件\n```\n9. 阅读项目自定义部分\n```bash\n阅读项目自定义部分，了解如何定制和操作该项目\n```\n\n## 📚 文档\n- \u003Ca href=\"https:\u002F\u002Fdocs.reactagent.io\">文档网站\u003C\u002Fa>\n- 部分文档和架构信息位于 architecture 文件夹中\n- \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002Farch.md\">功能流程\u003C\u002Fa>\n- \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002Farchitecture\u002FDesign%20Document%20Overview.md\">原始设计文档\u003C\u002Fa>\n- \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Feylonmiz\u002Freact-agent\u002Fblob\u002Fmain\u002Fpersonal-note.md\">个人笔记\u003C\u002Fa>\n## PRD \u002F 用户故事转代码\n\u003Ca href=\"https:\u002F\u002Fres.cloudinary.com\u002Ftutim\u002Fimage\u002Fupload\u002Fv1683750575\u002FReactGPT\u002FFeature_Flow_f8ih6c.jpg\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_82e3e2dc7b1e.png\" alt=\"Feature Flow\"\u002F>\n\u003C\u002Fa>\n\n## 组件生成流程\n\u003Ca href=\"https:\u002F\u002Fres.cloudinary.com\u002Ftutim\u002Fimage\u002Fupload\u002Fv1683750585\u002FReactGPT\u002FComponent_Generation_atio0s.jpg\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_ee29b686fec4.png\" alt=\"Component Generator\"\u002F>\n\u003C\u002Fa>\n\n\n\n## 🛠️ 项目自定义\n1. 自定义工作流：\n   - 文件：backend\u002Fmain\u002Freact-agent\u002FgenerateComponents.ts\n   - 说明：可以控制生成流程，按步骤执行或一次性完成整个流程。\n2. 渲染应用\n   - 文件：frontend\u002Fmain\u002Fsrc\u002FGenReactApp.tsx\n   - 说明：渲染生成的应用程序，文件中包含示例。\n     - 使用 JsonSkeleton 渲染页面骨架\n     - 使用 demo.tsx 文件渲染演示页面\n3. 生成 React 组件\n   - 文件夹：在 LOCAL_COMPONENTS_DIR 目录下创建一个文件夹（默认为 frontend\u002Fmain\u002Fsrc\u002Freact-agent）（参见 .env.example 文件）\n   - 说明：在该文件夹下创建 user-story.md 文件，尽可能详细地描述需求。\n   - 将 generateComponents.ts 中的 CONTAINER_PATH 修改为新创建的文件夹名称\n   - 运行后端脚本以生成 React 组件。\n4. 自定义文件夹结构（参见 .env.example 文件）\n   - UI_COMPONENTS_DIR —— 存放 UI 组件的目录\n   - DEMO_COMPONENTS_DIR —— 存放 UI 组件演示文件的目录\n   - LOCAL_COMPONENTS_DIR —— 存放生成的组件的目录\n\n\n## 📦 后续步骤\n- 编辑现有组件\n- 生成后对组件进行测试\n- 将线框图转换为骨架代码\n- 使用远程设计系统生成 React 组件\n- 引入外部库\n- 控制组件逻辑（状态、props、上下文、副作用、API 调用等）\n## ⚠️ 局限性\n- 生成的代码并非生产就绪，仅适用于原型开发。\n- 目前仅支持 GPT4，暂不支持 GPT-3.5，请确保你的 OpenAI 账户已启用 GPT4。\n- 输出可能包含一些 bug 和错误，建议在将其用于生产环境之前仔细审查并测试代码，或者先在开发环境中运行。\n- 生成过程的第一步是将用户故事转换为 JSON 文件。这一步并不完美，可能会导致一些不准确或信息缺失，必要时可手动调整 JSON 文件。\n- 建议逐步执行生成流程，并在每一步之后检查生成的代码。\n\n## 🛡 免责声明\n\n本项目 ReactAgent 属于实验性应用，按“原样”提供，不提供任何明示或暗示的担保。使用本软件即表示您同意承担与使用相关的所有风险，包括但不限于数据丢失、系统故障或其他可能出现的问题。\n\n本项目的开发者及贡献者对因使用本软件而导致的任何损失、损害或其他后果不承担任何责任。您应对基于 ReactAgent 提供的信息所作出的任何决策和行动自行负责。\n\n**请注意，由于 GPT-4 语言模型的 token 使用量较高，使用该模型可能会产生较高的费用。** 使用本项目即表示您承认自己有责任监控和管理自身的 token 使用情况及由此产生的费用。强烈建议您定期检查 OpenAI API 的使用情况，并设置必要的限制或提醒，以避免产生意外费用。\n\n作为一项自主实验，ReactAgent 可能会生成不符合现实业务实践或法律要求的内容或采取相应行动。您有责任确保基于本软件输出所作出的所有行为或决策均符合所有适用的法律、法规及道德标准。本项目开发者及贡献者对因使用本软件而产生的任何后果概不负责。\n\n使用 ReactAgent 即表示您同意就因您使用本软件或违反本条款而引起的任何及所有索赔、损害赔偿、损失、责任、成本和费用（包括合理的律师费），向开发者、贡献者及任何关联方进行赔偿、辩护并使其免受损害。\n\n## 👨‍💻 贡献\n- 特别感谢 https:\u002F\u002Fgithub.com\u002Fshadcn\u002Fui 提供的 UI 组件库，它大大简化了本项目的开发。\n### 💪 由社区、为社区\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_readme_6d0ebc1219ec.png)\n由 [reactagent.io](https:\u002F\u002Freactagent.io) 提供支持\n- 由 @eylonmiz 和 @leetwito 共同创建","# ReactAgent 快速上手指南\n\nReactAgent 是一个开源的自主 LLM 代理，能够利用 GPT-4 根据用户故事（User Stories）自动生成并组合 React 组件。本项目基于 React、TailwindCSS、TypeScript、Radix UI 和 Shadcn UI 构建。\n\n> **注意**：本工具为实验性项目，生成的代码仅供原型设计参考，尚未达到生产环境标准。必须使用 **GPT-4** 模型（不支持 GPT-3.5）。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n*   **操作系统**：macOS, Linux 或 Windows (WSL2 推荐)\n*   **Node.js**: 建议版本 18+\n*   **包管理器**: Yarn (`npm install -g yarn`)\n*   **OpenAI API Key**: 您需要一个拥有 **GPT-4** 访问权限的 OpenAI 账户及 API Key。\n*   **Git**: 用于克隆仓库。\n\n## 安装步骤\n\n### 1. 克隆项目\n将仓库克隆到本地并进入项目目录：\n\n```bash\ngit clone git@github.com:eylonmiz\u002Freact-agent.git\ncd react-agent\n```\n\n### 2. 配置 OpenAI 密钥\n获取您的 [OpenAI API Key](https:\u002F\u002Fplatform.openai.com\u002Faccount\u002Fapi-keys)，并将其写入后端配置文件。\n\n您可以直接运行以下命令（将 `INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE` 替换为您的真实 Key）：\n\n```bash\necho OPENAI_SECRET_KEY=\"INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE\" >> backend\u002Fmain\u002F.env\n```\n\n或者手动创建 `backend\u002Fmain\u002F.env` 文件，内容参考 `.env.example`。\n\n### 3. 安装依赖\n使用 Yarn 安装项目所需的所有依赖包：\n\n```bash\nyarn install\n```\n\n## 基本使用\n\n完成安装后，按照以下步骤生成并预览您的第一个 React 组件。\n\n### 1. 启动后端服务（生成组件）\n运行后端脚本，该脚本将调用 GPT-4 根据预设的用户故事生成组件代码：\n\n```bash\nyarn backend:dev\n```\n\n### 2. 启动前端应用（预览组件）\n在新终端窗口中运行前端开发服务器，以查看生成的组件效果：\n\n```bash\nyarn frontend:dev\n```\n\n### 3. 查看与修改\n打开 `frontend\u002Fmain\u002Fsrc\u002FGenReactApp.tsx` 文件。\n*   阅读文件内的注释说明。\n*   将示例组件引用更改为您刚刚生成的组件，即可在浏览器中预览。\n\n### 4. 自定义生成任务（进阶）\n若要生成自定义组件，请按以下步骤操作：\n\n1.  **创建用户故事**：在 `LOCAL_COMPONENTS_DIR` 指定的文件夹下（默认为 `frontend\u002Fmain\u002Fsrc\u002Freact-agent`），新建一个文件夹。\n2.  **编写需求**：在该文件夹内创建 `user-story.md` 文件，尽可能详细地描述您想要的组件功能。\n3.  **配置路径**：打开 `backend\u002Fmain\u002Freact-agent\u002FgenerateComponents.ts`，将 `CONTAINER_PATH` 变量修改为您刚才创建的文件夹名称。\n4.  **重新运行**：再次执行 `yarn backend:dev` 开始生成。\n\n---\n**提示**：由于涉及 GPT-4 Token 消耗，建议在生成过程中分步检查代码质量，并及时监控 API 使用情况以避免产生意外费用。","某初创公司的前端团队需要在两天内为新的 SaaS 仪表盘搭建一套包含多个复杂交互模块的原型，以应对即将到来的投资人演示。\n\n### 没有 react-agent 时\n- 开发人员需花费大量时间将模糊的产品需求文档（PRD）逐行转化为具体的 React 组件代码，效率低下。\n- 手动编写重复性的 UI 结构（如按钮、卡片、表单）导致代码风格不统一，且难以严格遵循原子设计原则。\n- 在整合 TailwindCSS 样式和 Radix UI 组件时，频繁查阅文档并处理类型定义，严重拖慢了原型迭代速度。\n- 面对紧急的需求变更，修改现有组件往往牵一发而动全身，重构成本高昂，难以按时交付。\n\n### 使用 react-agent 后\n- 团队直接输入用户故事，react-agent 即可利用 GPT-4 自动生成完整的 React 组件代码，将数天的工作量压缩至几小时。\n- 工具自动基于本地设计系统组合现有组件，确保输出的代码天然符合原子设计规范，风格高度一致。\n- 生成的代码原生集成 TypeScript、TailwindCSS 及 Shadcn UI，无需人工反复调整样式类名或补全类型接口。\n- 当需求调整时，只需更新描述语句，react-agent 便能快速重新生成并组装新组件，极大提升了应对变化的灵活性。\n\nreact-agent 通过将自然语言需求直接转化为高质量、可维护的 React 代码，让前端团队从繁琐的样板工作中解放出来，专注于核心业务逻辑的创新。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Feylonmiz_react-agent_54d700ae.jpg","eylonmiz","Eylon Miz","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Feylonmiz_2dfd4739.jpg","Building flowtel.ai. The AI OS for hotels.","https:\u002F\u002Fflowtel.ai\u002F","San Francisco",null,"EylonMiz","https:\u002F\u002Fgithub.com\u002Feylonmiz",[25,29,33,37],{"name":26,"color":27,"percentage":28},"TypeScript","#3178c6",83.1,{"name":30,"color":31,"percentage":32},"CSS","#663399",15.9,{"name":34,"color":35,"percentage":36},"JavaScript","#f1e05a",0.8,{"name":38,"color":39,"percentage":40},"HTML","#e34c26",0.2,1656,159,"2026-04-10T19:12:44","MIT",2,"未说明 (基于 Node.js，通常支持 Linux, macOS, Windows)","不需要本地 GPU (依赖 OpenAI API)","未说明",{"notes":50,"python":51,"dependencies":52},"该工具是一个基于 Node.js 的前后端项目，使用 Yarn 进行包管理。运行不需要本地 GPU，但必须拥有 OpenAI API Key 并开通 GPT-4 访问权限（不支持 GPT-3.5）。由于调用 GPT-4，会产生相应的 Token 费用。安装步骤包括克隆仓库、配置 .env 文件中的 API 密钥、运行 yarn install 安装依赖，然后分别启动后端和前端服务。生成的代码仅供原型设计，非生产就绪。","不需要 (基于 Node.js\u002FTypeScript)",[53,54,55,56,57,58,59],"React","TailwindCSS","Typescript","Radix UI","Shadcn UI","OpenAI API","Yarn",[61,62,63],"开发框架","语言模型","Agent",[65,66,67,68,69,70],"agent","gpt-4","headless","headlessui","llm","react","ready","2026-03-27T02:49:30.150509","2026-04-11T23:21:45.374998",[],[76],{"id":77,"version":78,"summary_zh":79,"released_at":80},206557,"initial-release","ReactAgent 是一个实验性的自主代理，利用 GPT-4 语言模型根据用户故事生成并组合 React 组件。它基于 React、TailwindCSS、TypeScript、Radix UI、Shandcn UI 以及 OpenAI API 构建而成。\n\n🚀 功能\n- 根据用户故事生成 React 组件\n- 从现有组件中组合出新的 React 组件\n- 使用本地设计系统生成 React 组件\n- 技术栈包括：React、TailwindCSS、TypeScript、Radix UI、Shandcn UI\n- 遵循原子设计原则构建\n\n[观看演示 »](https:\u002F\u002Fwww.loom.com\u002Fshare\u002F591fd03b54d04a74a15995815de47c76)\n[官网](https:\u002F\u002Freactagent.io\u002F)","2023-05-11T19:33:33",[82,93,101,109,117,126],{"id":83,"name":84,"github_repo":85,"description_zh":86,"stars":87,"difficulty_score":88,"last_commit_at":89,"category_tags":90,"status":71},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[63,61,91,92],"图像","数据工具",{"id":94,"name":95,"github_repo":96,"description_zh":97,"stars":98,"difficulty_score":88,"last_commit_at":99,"category_tags":100,"status":71},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[61,91,63],{"id":102,"name":103,"github_repo":104,"description_zh":105,"stars":106,"difficulty_score":45,"last_commit_at":107,"category_tags":108,"status":71},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",150720,"2026-04-11T11:33:10",[61,63,62],{"id":110,"name":111,"github_repo":112,"description_zh":113,"stars":114,"difficulty_score":45,"last_commit_at":115,"category_tags":116,"status":71},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[61,91,63],{"id":118,"name":119,"github_repo":120,"description_zh":121,"stars":122,"difficulty_score":45,"last_commit_at":123,"category_tags":124,"status":71},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[125,63,91,61],"插件",{"id":127,"name":128,"github_repo":129,"description_zh":130,"stars":131,"difficulty_score":45,"last_commit_at":132,"category_tags":133,"status":71},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[125,61]]