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.

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 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:

npm run dev
# or
yarn dev
# or
pnpm dev

Open 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:

screenrun-02-27-2024-16-20-25.mp4

screenrun-03-02-2024-18-22-16.mp4

screenrun-02-27-2024-16-44-02.mp4