{"id":20039844,"url":"https://github.com/cameronking4/nextjs-ai-page-generator","last_synced_at":"2025-09-20T09:31:03.029Z","repository":{"id":225301061,"uuid":"765603715","full_name":"cameronking4/nextjs-ai-page-generator","owner":"cameronking4","description":"⚡️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. ","archived":false,"fork":false,"pushed_at":"2024-03-03T02:29:04.000Z","size":13267,"stargazers_count":14,"open_issues_count":0,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-13T10:43:41.695Z","etag":null,"topics":["ai","app-builder","chatgpt","code-generation","gpt-4","gpt-react-designer","nextjs","sandpack"],"latest_commit_sha":null,"homepage":"https://nextjs-page-generator.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cameronking4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-01T08:52:40.000Z","updated_at":"2024-10-16T05:58:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"e8b07989-3531-4581-8453-fa9772d5eb65","html_url":"https://github.com/cameronking4/nextjs-ai-page-generator","commit_stats":null,"previous_names":["cameronking4/nextjs-page-generator-main"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fnextjs-ai-page-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fnextjs-ai-page-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fnextjs-ai-page-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fnextjs-ai-page-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cameronking4","download_url":"https://codeload.github.com/cameronking4/nextjs-ai-page-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233648596,"owners_count":18708225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","app-builder","chatgpt","code-generation","gpt-4","gpt-react-designer","nextjs","sandpack"],"created_at":"2024-11-13T10:39:21.159Z","updated_at":"2025-09-20T09:30:56.921Z","avatar_url":"https://github.com/cameronking4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nextjs Page Generator\nInspired 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. \nWith 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.\n\n\u003cimg width=\"440\" alt=\"Screenshot 2024-03-02 165534\" src=\"https://github.com/cameronking4/nextjs-ai-page-generator/assets/35708477/c5e3743b-1bd0-4b90-9bb8-c7f0f149abe8\"\u003e\n\n## Goals\n\nThe 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.\n\nFuture investments includes:\n- Support for other styling frameworks (Shadcn imports TSX \u0026 Stackblitz)\n- Auto-save and deploy projects to Vercel or Netlify\n- Provide context to an existing project that needs to be extended\n\n## Getting Started\n\nInstall dependencies with `yarn`, `npm` or `pnpm`.\n\n\nSet your OpenAI key by running the setup script `./setup.sh`. \nOr by editing `.env.local` if you're running this code locally.\n\nThen run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### Demos\nFor example, this page was generated with a single a prompt and included the axios request setup:\n\u003cimg width=\"736\" alt=\"Screenshot 2024-03-02 004705\" src=\"https://github.com/cameronking4/nextjs-ai-page-generator/assets/35708477/7d571f3b-771a-4828-b9e6-1d1a854e481a\"\u003e\n\nhttps://github.com/cameronking4/nextjs-page-generator-main/assets/35708477/1aacd777-a2b1-4d85-8f90-f4a61c0b4447\n\nhttps://github.com/cameronking4/nextjs-ai-page-generator/assets/35708477/add6086d-d314-4be2-b2aa-5b3f71c48c97\n\nhttps://github.com/cameronking4/nextjs-page-generator-main/assets/35708477/b5f0698d-720d-4613-809d-4094fc2e4646\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcameronking4%2Fnextjs-ai-page-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcameronking4%2Fnextjs-ai-page-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcameronking4%2Fnextjs-ai-page-generator/lists"}