ReactAgent is an open-source React component generator built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI’s GPT-4 language model.
The heart of ReactAgent’s functionality lies in its capability to translate user stories into concrete, functional React components. This reduces the gap between conception and realization, helping developers, product managers, and designers streamline their collaborative efforts.
ReactAgent can also compose components using existing ones, promoting reuse and consistent design language across your application. The integration with a local design system allows the generated React components to align perfectly with the organization’s design standards and aesthetics, ensuring a consistent user experience.
Demo:
Get Started:
1. Clone the repository to your local machine.
git clone [email protected]:eylonmiz/react-gpt.git
2. To interact with the OpenAI API, you’ll need to get an API key. Once you have this, add it to the backend/main .env file. Replace INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE with your actual key:
.echo OPENAI_SECRET_KEY="INSERT_YOUR_OPENAI_SECRET_KEY_VALUE_HERE" >> backend/main/.env
3. Install all the project dependencies.
yarn install
4. This script will generate the components. You can start the backend development server with:
yarn backend:dev
5. To see your generated components in action, you should start the frontend development server:
yarn frontend:dev
6. Customize Your Component. Open frontend/main/src/GenReactApp.tsx, read the instructions and modify the example component to the component you generated.
Customizations:
Customize Workflow
File: backend/main/react-agent/generateComponents.ts This file allows you to control the flow of the generation process. You can run it step-by-step or run the full flow.
Render Application
File: frontend/main/src/GenReactApp.tsx This file allows you to render the generated application. You can use JsonSkeleton to render the skeleton of the page and the demo.tsx files to render the demo page.
Generate React Components
Create a new folder under LOCAL_COMPONENTS_DIR (default is frontend/main/src/react-agemt). Within this new folder, generate a user-story.md file. Make sure to provide as many details as possible. Afterward, change CONTAINER_PATH in generateComponents.ts to your folder name. Run the backend script to generate the React Components.
Customize Folder Structure
This is defined in the .env.example file. It includes:
UI_COMPONENTS_DIR: Where your UI components are located.DEMO_COMPONENTS_DIR: Where your UI components’ demo files are located.LOCAL_COMPONENTS_DIR: Where your generated components are located.
