Gpt Frontend Code Gen

screenshot of Gpt Frontend Code Gen

一个生成前端页面和组件代码的神器,支持Chakra UI 、ShadcnUI ,支持本地大模型、可对话不断调整效果,直到获得满意的效果

Overview

Introducing a powerful tool for frontend development, this project harnesses the capabilities of React and Vite along with a Koa backend to facilitate the seamless generation and previewing of frontend pages. This innovative solution allows users to iteratively adjust the page's design through dialogue, making it an impressive resource for achieving dynamic interactive effects in no time. The integration of GPT-4 further enhances the experience by generating React components efficiently.

The user-friendly aspects of this tool stand out, especially with its Docker and Docker Compose support, which allows for a simple, one-click setup. Whether you're a beginner or experienced developer, this tool simplifies the process of building and testing applications, encouraging experimentation and creativity.

Features

  • GPT-4 Powered Component Generation: Leverage the intelligence of GPT-4 to automatically generate React components tailored to your needs.
  • ShadcnUI Styled Components: Create aesthetically pleasing components that align with the ShadcnUI design framework effortlessly.
  • Real-time Component Preview: Instantly see the changes you make with a live preview, enhancing the development experience without the need for constant refreshes.
  • Continuous Dialogue Interaction: Adjust and refine your components through an ongoing conversational interface, allowing for detailed customization.
  • Docker One-Click Setup: Get up and running effortlessly with a foolproof Docker setup, ensuring an easy initiation process.
  • Historical Generation Records: Keep track of your design evolution with the ability to select and preview previously generated components.
  • Custom API Key Configuration: Easily configure your own API key and base URL, providing flexibility across various deployment scenarios.
  • Future Expandability: Plans are underway to support additional frontend frameworks like Vue, Angular, and Flutter, broadening the tool's applicability.