gpt-frontend-code-gen  by bravekingzhang

React component generator with conversational refinement

created 1 year ago
301 stars

Top 89.6% on sourcepulse

GitHubView on GitHub
Project Summary

This project provides a tool for generating frontend pages and components using AI, specifically targeting developers who need to quickly prototype or iterate on UI designs. It leverages large language models to create React components with support for ShadcnUI and Chakra UI, allowing for iterative refinement through conversational adjustments and real-time previews.

How It Works

The system utilizes GPT-4 (or other configurable LLMs) to generate React components based on user prompts. A Koa backend service handles the AI interactions and serves the frontend application. The core advantage lies in its conversational interface, enabling users to continuously modify and improve generated components through dialogue, eliminating the need for manual coding for initial drafts or rapid prototyping.

Quick Start & Requirements

  • Install dependencies and start with yarn start.
  • Requires Node.js (18+) and optionally Docker.
  • Access the application at http://localhost:9000.
  • Docker Compose provides a one-click setup: docker-compose up -d --build.
  • Recommended to use one-api for broad LLM compatibility.

Highlighted Details

  • Generates React components using GPT-4.
  • Supports ShadcnUI and Chakra UI component styles.
  • Enables real-time preview and iterative modification via conversation.
  • Allows configuration of API keys and base URLs for various LLMs.

Maintenance & Community

The project is maintained by bravekingzhang. Further community interaction and discussion can be found via the author's WeChat public account, "老码沉思录".

Licensing & Compatibility

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License (CC BY-NC-ND 4.0). Commercial use requires explicit authorization.

Limitations & Caveats

The current version focuses on React and does not support other frameworks like Vue, Angular, or Flutter. The license explicitly prohibits derivative works and commercial use without permission.

Health Check
Last commit

9 months ago

Responsiveness

1 day

Pull Requests (30d)
0
Issues (30d)
0
Star History
9 stars in the last 90 days

Explore Similar Projects

Feedback? Help us improve.