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.
- Host: GitHub
- URL: https://github.com/cameronking4/nextjs-ai-page-generator
- Owner: cameronking4
- License: apache-2.0
- Created: 2024-03-01T08:52:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-03T02:29:04.000Z (over 1 year ago)
- Last Synced: 2024-11-13T10:43:41.695Z (7 months ago)
- Topics: ai, app-builder, chatgpt, code-generation, gpt-4, gpt-react-designer, nextjs, sandpack
- Language: TypeScript
- Homepage: https://nextjs-page-generator.vercel.app/
- Size: 12.7 MB
- Stars: 14
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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.
## 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:
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