This is a Next.js project bootstrapped with create-next-app.
This project generates pages via a formatted prompt sent to gpt3-turbo, and then renders output with the ability to click DOM nodes to copy to your clipboard.
View deployment on Vercel (note: using "hobby" tier; your own openAI API key is needed)
The intent of this project is to leverage openAI products' abilities to generate valid webpages based on a prompt, and experiment with processing the output for actual usage outside this utility webapp.
The backend of this system does some light Prompt Engineering on top of user input to encourage consistent display.
Output from gpt3-turbo is recieved from the nextJS API route, then further processed on the client to inline CSS, and add JS and CSS to the DOM for element export.
TODO:
- UI Refinements
- "Login" UI for setting API key
Do your basic setup
npm i(or yarn or pnpm equivalent)
Then, set your OpenAI API key (or use the GUI if you prefer)
cp .env.sample .envand set your API key in place of the sample key
Finally, run the development server:
npm run dev(or yarn or pnpm equivalent)
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.