ReactAgent is an experimental autonomous agent designed to generate and compose React.js components from user stories using GPT-4. It targets developers seeking to accelerate UI development by leveraging AI to translate natural language descriptions into functional React code, built with modern web technologies and atomic design principles.

How It Works

The agent utilizes GPT-4 to interpret user stories, converting them into a structured JSON format that guides the component generation process. It then composes these components, potentially integrating with local design systems (Shadcn UI, Radix UI) and TailwindCSS, following atomic design principles for modularity. This approach aims to automate the initial scaffolding and composition of React UIs from high-level requirements.

Quick Start & Requirements

• Install dependencies: yarn install
• Run backend (component generation): yarn backend:dev
• Run frontend (view components): yarn frontend:dev
• Requires an OpenAI API key with GPT-4 access, set as OPENAI_SECRET_KEY in backend/main/.env.
• Documentation: Docs Website

Highlighted Details

• Generates React components from user stories.
• Composes components using existing ones and a local design system.
• Built with React, TailwindCSS, TypeScript, Radix UI, and Shadcn UI.
• Adheres to Atomic Design principles.

Maintenance & Community

• Active Discord community available: Discord
• Co-created by @eylonmiz and @leetwito.

Licensing & Compatibility

• Licensed under the MIT License.
• Permissive license suitable for commercial use and integration into closed-source projects.

Limitations & Caveats

Generated code is experimental and not production-ready, requiring review and testing. Only GPT-4 is supported; GPT-3.5 is not compatible. The initial user story to JSON conversion may have inaccuracies. OpenAI API usage costs apply.