{"id":13475507,"url":"https://github.com/eylonmiz/react-agent","last_synced_at":"2025-05-15T20:00:38.391Z","repository":{"id":164132059,"uuid":"639499319","full_name":"eylonmiz/react-agent","owner":"eylonmiz","description":"The open-source React.js Autonomous LLM Agent","archived":false,"fork":false,"pushed_at":"2024-04-12T13:38:37.000Z","size":5440,"stargazers_count":1570,"open_issues_count":13,"forks_count":142,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-04-08T01:37:22.186Z","etag":null,"topics":["agent","gpt-4","headless","headlessui","llm","react"],"latest_commit_sha":null,"homepage":"https://reactagent.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eylonmiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-11T15:18:23.000Z","updated_at":"2025-04-03T08:18:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"520e564a-488a-434b-b689-58e15f75fd38","html_url":"https://github.com/eylonmiz/react-agent","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eylonmiz%2Freact-agent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eylonmiz%2Freact-agent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eylonmiz%2Freact-agent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eylonmiz%2Freact-agent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eylonmiz","download_url":"https://codeload.github.com/eylonmiz/react-agent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414455,"owners_count":22067262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","gpt-4","headless","headlessui","llm","react"],"created_at":"2024-07-31T16:01:21.007Z","updated_at":"2025-05-15T20:00:38.106Z","avatar_url":"https://github.com/eylonmiz.png","language":"TypeScript","funding_links":[],"categories":["Agent Categories","TypeScript","Links","Developer \u0026 Coding Assistants"],"sub_categories":["\u003ca name=\"Unclassified\"\u003e\u003c/a\u003eUnclassified","Category","Code Generation \u0026 Refactoring"],"readme":"# ReactAgent - The open-source React.js Autonomous LLM Agent\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://reactagent.io\" target=\"_blank\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://res.cloudinary.com/tutim/image/upload/v1684019623/ReactAgent/flow_kzcpeb.jpg\"\u003e\n    \u003cimg src=\"https://res.cloudinary.com/tutim/image/upload/v1684019623/ReactAgent/flow_kzcpeb.jpg\" alt=\"Logo\"/\u003e\n  \u003c/picture\u003e\n\n\n  \u003cp align=\"center\"\u003e\n    \u003ch3\u003eThe open-source React.js Autonomous LLM Agent\u003c/h3\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.loom.com/share/591fd03b54d04a74a15995815de47c76\"\u003e\u003cstrong\u003eWatch Demo »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://reactagent.io\"\u003eWebsite\u003c/a\u003e\n    ·\n    \u003ca href=\"https://www.loom.com/share/658adb2869174e81a39a0a2cdcfec4eb\"\u003eWatch Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/eylonmiz/react-agent/pull/7/files\"\u003eDemo Code Example\u003c/a\u003e\n    ·\n    \u003ca href=\"https://docs.reactagent.io\"\u003eDocs\u003c/a\u003e\n    ·\n    \u003ca href=\"https://discord.gg/57JjYNKe\"\u003eDiscord\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n[![MIT License](https://img.shields.io/github/license/eylonmiz/react-agent)](https://github.com/eylonmiz/react-agent/blob/main/LICENSE) [![Number of GitHub stars](https://img.shields.io/github/stars/eylonmiz/react-agent?logo=github)](https://github.com/eylonmiz/react-agent/stargazers) [![Discord is Live](https://img.shields.io/badge/Discord-Live-green?logo=discord\u0026logoColor=%23fff)](https://discord.gg/57JjYNKe) [![Docs are updated](https://img.shields.io/badge/docs-updated-green?color=blue)](https://docs.tutim.io) [![Product Hunt](https://img.shields.io/badge/Product%20Hunt-Launch%20soon-orange?logo=producthunt\u0026logoColor=%23fff)](https://www.producthunt.com/@eylonmiz)\n\nhttps://github.com/eylonmiz/react-agent/assets/43254163/d2e36b75-2901-4950-a4f6-6a39b1067796\n\n\u003c/div\u003e\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://github.com/eylonmiz/react-agent/assets/43254163/e5921e79-140d-4ccb-bbdf-96b2b28e2d77\" alt=\"Example\"/\u003e\n\n## 🌈 Quickstart\n1. Clone repository\n```bash\ngit clone git@github.com:eylonmiz/react-agent.git\n```\n2. Change to the project directory\n```bash\ncd react-agent\n```\n3. Get an OpenAI [API Key](https://platform.openai.com/account/api-keys)\n4. Set OPENAI_SECRET_KEY in backend/main .env file (see .env.example) or run the script below\n```bash\necho OPENAI_SECRET_KEY=\"INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE\" \u003e\u003e backend/main/.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/main/src/GenReactApp.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://docs.reactagent.io\"\u003eDocs Website\u003c/a\u003e\n- Some Docs and architecture in architecture folder\n- \u003ca href=\"https://github.com/eylonmiz/react-agent/blob/main/arch.md\"\u003eFeature Flow\u003c/a\u003e\n- \u003ca href=\"https://github.com/eylonmiz/react-agent/blob/main/architecture/Design%20Document%20Overview.md\"\u003eRaw Design Docs\u003c/a\u003e\n- \u003ca href=\"https://github.com/eylonmiz/react-agent/blob/main/personal-note.md\"\u003ePersonal Note\u003c/a\u003e\n## PRD / User Story to code\n\u003ca href=\"https://res.cloudinary.com/tutim/image/upload/v1683750575/ReactGPT/Feature_Flow_f8ih6c.jpg\" target=\"_blank\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/tutim/image/upload/v1683751641/ReactGPT/min-feature-flow_xkeyb5.png\" alt=\"Feature Flow\"/\u003e\n\u003c/a\u003e\n\n## Component Generation Flow\n\u003ca href=\"https://res.cloudinary.com/tutim/image/upload/v1683750585/ReactGPT/Component_Generation_atio0s.jpg\" target=\"_blank\"\u003e\n\u003cimg src=\"https://res.cloudinary.com/tutim/image/upload/v1683751641/ReactGPT/min-component-generator_prs1u1.png\" alt=\"Component Generator\"/\u003e\n\u003c/a\u003e\n\n\n\n## 🛠️ Project Customization\n1. Customize workflow:\n   - file: backend/main/react-agent/generateComponents.ts\n   - description: Can control the flow of the generation process, run step by step or full flow.\n2. Render Application\n   - file: frontend/main/src/GenReactApp.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/main/src/react-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://github.com/shadcn/ui for the UI components library that made this project much easier to build\n### 💪 By the community, for the community\n\n![](https://contrib.rocks/image?repo=eylonmiz/react-agent)\nPowered by [reactagent.io](https://reactagent.io)\n- Co-created by @eylonmiz and @leetwito\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feylonmiz%2Freact-agent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feylonmiz%2Freact-agent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feylonmiz%2Freact-agent/lists"}