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.
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.
4. This script will generate the components. You can start the backend development server with:
5. To see your generated components in action, you should start the frontend development server:
6. Customize Your Component. Open
frontend/main/src/GenReactApp.tsx, read the instructions and modify the example component to the component you generated.
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.
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
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.