{"id":13646115,"url":"https://github.com/xd2sketch/gpt-react-designer","last_synced_at":"2025-08-13T06:34:42.746Z","repository":{"id":182025604,"uuid":"666032372","full_name":"XD2Sketch/gpt-react-designer","owner":"XD2Sketch","description":"⚡️ Generate and preview ⚛️ React components with 🤖 ChatGPT","archived":false,"fork":false,"pushed_at":"2024-02-04T11:28:52.000Z","size":210,"stargazers_count":148,"open_issues_count":2,"forks_count":24,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-11-09T19:41:22.655Z","etag":null,"topics":["chatgpt","chatgpt-api","code-generation","nextjs","react","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://gpt-react-designer.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/XD2Sketch.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":"2023-07-13T14:48:43.000Z","updated_at":"2024-10-18T03:08:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"eef2e065-efd3-45a4-ae86-039b25f5b52b","html_url":"https://github.com/XD2Sketch/gpt-react-designer","commit_stats":null,"previous_names":["xd2sketch/gpt-react-designer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XD2Sketch%2Fgpt-react-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XD2Sketch%2Fgpt-react-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XD2Sketch%2Fgpt-react-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XD2Sketch%2Fgpt-react-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XD2Sketch","download_url":"https://codeload.github.com/XD2Sketch/gpt-react-designer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229744926,"owners_count":18117653,"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":["chatgpt","chatgpt-api","code-generation","nextjs","react","reactjs","tailwindcss"],"created_at":"2024-08-02T01:02:48.854Z","updated_at":"2024-12-14T19:20:23.230Z","avatar_url":"https://github.com/XD2Sketch.png","language":"TypeScript","funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# GPT React Designer\n\nA ChatGPT powered React Code Generator\n\nSpecify what kind of React component you want to build and directly get the code and a live preview.\n\nWith GPT React Designer you can easily get a quick preview of the React code generated by ChatGPT. Engineers can use it to draft up components and then copy it into their main code base. The code generated by GPT React Designer is styled with [TailwindCSS](https://tailwindcss.com/) or plain inline CSS.\n\n## Goals\n\nThe goal of this project is to have a playground for frontend developers to quickly generate and try out code snippets. In the current state it only understands TailwindCSS and plain inline CSS but this could easily be extended.\n\n## Example\n\nhttps://github.com/XD2Sketch/gpt-react-designer/assets/5519740/f42c36ed-62cc-4275-9d19-86b6028961b0\n\n## Roadmap\n\nThings we could add:\n\n- Support for other styling frameworks (ChakraUI, ...)\n- Setup entire projects\n- Auto-save and deploy projects to Vercel or Netlify\n- TypeScript support\n- Provide context to an existing project that needs to be extended\n- Export React code to Figma\n\nPlease feel free to open a PR to add feature suggestions to this list.\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```\n\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Contribute\n\nWe would love for you to contribute. Let's grow this project together and build something that enables engineers to achieve more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxd2sketch%2Fgpt-react-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxd2sketch%2Fgpt-react-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxd2sketch%2Fgpt-react-designer/lists"}