https://github.com/XD2Sketch/gpt-react-designer

⚡️ Generate and preview ⚛️ React components with 🤖 ChatGPT
https://github.com/XD2Sketch/gpt-react-designer

chatgpt chatgpt-api code-generation nextjs react reactjs tailwindcss

Last synced: about 1 month ago
JSON representation

⚡️ Generate and preview ⚛️ React components with 🤖 ChatGPT

• Host: GitHub
• URL: https://github.com/XD2Sketch/gpt-react-designer
• Owner: XD2Sketch
• License: apache-2.0
• Created: 2023-07-13T14:48:43.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-04T11:28:52.000Z (7 months ago)
• Last Synced: 2024-06-15T16:38:31.634Z (3 months ago)
• Topics: chatgpt, chatgpt-api, code-generation, nextjs, react, reactjs, tailwindcss
• Language: TypeScript
• Homepage: https://gpt-react-designer.vercel.app
• Size: 205 KB
• Stars: 140
• Watchers: 6
• Forks: 22
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GPT React Designer

A ChatGPT powered React Code Generator

Specify what kind of React component you want to build and directly get the code and a live preview.

With GPT React Designer you can easily get a quick preview of the React code generated by ChatGPT. Engineers can use it to draft up components and then copy it into their main code base. The code generated by GPT React Designer is styled with [TailwindCSS](https://tailwindcss.com/) or plain inline CSS.

## Goals

The goal of this project is to have a playground for frontend developers to quickly generate and try out code snippets. In the current state it only understands TailwindCSS and plain inline CSS but this could easily be extended.

## Example

https://github.com/XD2Sketch/gpt-react-designer/assets/5519740/f42c36ed-62cc-4275-9d19-86b6028961b0

## Roadmap

Things we could add:

- Support for other styling frameworks (ChakraUI, ...)

- Setup entire projects

- Auto-save and deploy projects to Vercel or Netlify

- TypeScript support

- Provide context to an existing project that needs to be extended

- Export React code to Figma

Please feel free to open a PR to add feature suggestions to this list.

## Getting Started

Install dependencies with `yarn`, `npm` or `pnpm`.

Set your OpenAI key by running the setup script `./setup.sh`. 

Or by editing `.env.local` if you're running this code locally.

Then run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Contribute

We would love for you to contribute. Let's grow this project together and build something that enables engineers to achieve more.