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.
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
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 devOpen http://localhost:3000 with your browser to see the result.
For example, this page was generated with a single a prompt and included the axios request setup:
