Build your front end with ChatGPT (OpenAI)
No editor? Have ChatGPT write the files and paste them into the template.
Best for: People building entirely in a chat window who are comfortable pasting files.
Open ChatGPT (OpenAI) βThe prompt
Copy this, fill in the [bracketed] parts, and paste it into ChatGPT (OpenAI).
I have a Next.js 15 App Router template (BringTheFront) that connects to a backend called Orgalized through a secure server-side layer at lib/api. I will paste files and you will rewrite them for my business β presentation and copy only. Never add backend calls, auth, or fetches; that is already handled and must stay in lib/api. My business: [YOUR BUSINESS] β [what you do]. Brand color: [color]. Tone: [tone]. Mobile-first, accessible. First, give me the full replacement for site.config.ts (name, tagline, description, brandPalette, nav) for my business. Then I'll paste lib/content/marketing.ts and lib/content/services and you'll rewrite the copy. Use only semantic color tokens (content-*, surface-*, action-*), never hardcoded hex. Return complete files I can paste as-is.
How to do it
Fork the template
Fork BringTheFront (Setup Guide). You will paste ChatGPT's output into these files.
Work file by file
Paste the prompt, then feed ChatGPT one file at a time (site.config.ts, then the content files). Ask for complete files back, not snippets.
Paste + commit
Drop each returned file into the template, replacing the original. Commit as you go.
Verify + deploy
Run pnpm verify locally (or let a deploy preview catch issues), fix anything flagged, and deploy on Vercel.
Watch out for
- Chat tools can't see your whole repo, so give them one file at a time and always ask for the complete file back β partial snippets are where mistakes hide.
- Explicitly forbid new fetch/auth code every time; without the repo in view, ChatGPT may invent API calls that duplicate lib/api.
Ready to bring your front?
Create your backend first, then use ChatGPT (OpenAI) to build the front that connects to it.