An open API service indexing awesome lists of open source software.

https://github.com/cameronking4/nextjs-ai-page-generator

⚡️Design, generate, iterate and live preview Nextjs pages with 🤖 GPT! Watch AI code right in front of you and bring UI to life using chat as if you're making these updates yourself. Copy and paste Next pages into your main repo or extend AI generated pages into codesandboxes.
https://github.com/cameronking4/nextjs-ai-page-generator

ai app-builder chatgpt code-generation gpt-4 gpt-react-designer nextjs sandpack

Last synced: 5 months ago
JSON representation

⚡️Design, generate, iterate and live preview Nextjs pages with 🤖 GPT! Watch AI code right in front of you and bring UI to life using chat as if you're making these updates yourself. Copy and paste Next pages into your main repo or extend AI generated pages into codesandboxes.

Awesome Lists containing this project

README

        

# Nextjs Page Generator
Inspired by project ChatGPT powered React Code Generator which already allows you to specify what kind of React component you want to build and directly get the code and a live preview.
With Nextjs Page Generator you can easily craft UI for pages in your Nextjs project. Use chat to continue your UI as if you're coding it. Engineers can use it to draft up several pages to copy as pages into your main code base. If starting from scratch, you can export the preview to CodeSandbox, where you can develop within a devbox or initiate a Github Repo. The code generated by Nextjs Page Generator is styled with [TailwindCSS](https://tailwindcss.com/) or plain inline CSS.

Screenshot 2024-03-02 165534

## Goals

The goal of this project is to have a playground for frontend developers to quickly generate and tweak and export AI generated UI. In the current state it supports TailwindCSS and plain inline CSS but this could easily be extended with prompting.

Future investments includes:
- Support for other styling frameworks (Shadcn imports TSX & Stackblitz)
- Auto-save and deploy projects to Vercel or Netlify
- Provide context to an existing project that needs to be extended

## 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.

### Demos
For example, this page was generated with a single a prompt and included the axios request setup:
Screenshot 2024-03-02 004705

https://github.com/cameronking4/nextjs-page-generator-main/assets/35708477/1aacd777-a2b1-4d85-8f90-f4a61c0b4447

https://github.com/cameronking4/nextjs-ai-page-generator/assets/35708477/add6086d-d314-4be2-b2aa-5b3f71c48c97

https://github.com/cameronking4/nextjs-page-generator-main/assets/35708477/b5f0698d-720d-4613-809d-4094fc2e4646