{"id":24756787,"url":"https://github.com/lhcee3/ai-code-gen-editor","last_synced_at":"2026-04-12T13:56:22.271Z","repository":{"id":274216617,"uuid":"922254044","full_name":"lhcee3/AI-Code-Gen-Editor","owner":"lhcee3","description":"🚀 AI-Powered Code Generator built for Swecha AI Hackday 2025. Generate production-ready React components and HTML/CSS code in real-time using Hugging Face AI models. Features live preview, syntax highlighting, and a modern UI.  Key Features  React \u0026 HTML/CSS generation","archived":false,"fork":false,"pushed_at":"2025-03-02T04:59:09.000Z","size":9106,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T05:27:07.111Z","etag":null,"topics":["ai","ai-tools","code-generation","developer-tools","hackathon","html-css","huggingface","nextjs","react","react-components","shadcn-ui","tailwi","typescript","web-development"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lhcee3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-01-25T18:10:38.000Z","updated_at":"2025-03-02T04:59:12.000Z","dependencies_parsed_at":"2025-01-25T19:33:00.005Z","dependency_job_id":null,"html_url":"https://github.com/lhcee3/AI-Code-Gen-Editor","commit_stats":null,"previous_names":["lhcee3/ai-code-gen-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhcee3%2FAI-Code-Gen-Editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhcee3%2FAI-Code-Gen-Editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhcee3%2FAI-Code-Gen-Editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhcee3%2FAI-Code-Gen-Editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lhcee3","download_url":"https://codeload.github.com/lhcee3/AI-Code-Gen-Editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245071064,"owners_count":20556236,"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","ai-tools","code-generation","developer-tools","hackathon","html-css","huggingface","nextjs","react","react-components","shadcn-ui","tailwi","typescript","web-development"],"created_at":"2025-01-28T14:20:35.573Z","updated_at":"2025-10-11T18:01:26.444Z","avatar_url":"https://github.com/lhcee3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Code Generator: Bridging Development Gaps in 2025\n\n![swecha ai](https://github.com/user-attachments/assets/08db49aa-928b-4b6a-bc47-67925fac060a)\n\nA next-generation code generation tool that leverages AI to create React components and HTML/CSS code in real-time. Built for the modern developer ecosystem where rapid prototyping meets production-ready code.\n\n## Why AI Code Generation Matters in 2025\n- **Development Velocity**: With increasing project complexities, AI assistance can reduce development time by 60-70%\n- **Learning Tool**: Helps junior developers understand best practices and modern coding patterns\n- **Standardization**: Ensures consistent code style and structure across teams\n- **Resource Optimization**: Reduces time spent on boilerplate code, allowing developers to focus on business logic\n- **Cross-Framework Knowledge**: Assists developers in working with unfamiliar frameworks or languages\n\n## Features\n- Real-time React component generation with TypeScript support\n- Responsive HTML/CSS, React code generation\n- Live preview with hot reload\n- Syntax highlighting using Prism.js\n- Error handling and validation\n- Mobile-responsive interface\n- Clean, modern UI using Tailwind CSS\n\n### Component Structure\n\nCodeCreator     \n├── State Management    \n│ ├── Code State    \n│ ├── Preview State     \n│ └── Error Handling    \n├── AI Integration  \n│ ├── Hugging Face API  \n│ └── Code Generation Pipeline  \n└── UI Components   \n├── Code Editor     \n├── Live Preview         \n└── Control Panel       \n\n\n### AI Pipeline\n1. **Input Processing**: User prompt analysis and context extraction\n2. **Model Selection**: Dynamic routing between React and HTML/CSS models\n3. **Code Generation**: Using Hugging Face's CodeLlama-7b-hf and SantaCoder models\n4. **Post-processing**: Code cleaning and formatting\n5. **Preview Rendering**: Real-time code execution and display\n\n## Tech Stack\n- **Frontend**: Next.js 14, React 18, TypeScript\n- **Styling**: Tailwind CSS, Shadcn UI\n- **AI Models**: Hugging Face's CodeLlama and SantaCoder\n- **Code Processing**: Prism.js for syntax highlighting\n- **Development**: ESLint, Prettier\n\n## Setup\nNOTE: Entire code base is present in the feature of this repository.\n1. Clone the repository\n2. Install dependencies: `npm install`\n3. Copy `.env.example` to `.env.local` and add your Hugging Face API key\n4. Run development server: `npm run dev`\n\n## Environment Variables\n- `HUGGING_FACE_API_KEY`: Your Hugging Face API key\n\n## Code Walkthrough\n\n### Core Component (code-creator.tsx)\ntypescript  \nexport function CodeCreator() {     \n// State management for code, preview, and errors   \nconst [code, setCode] = useState(\"\")    \nconst [preview, setPreview] = useState\u003cstring\u003e(\"\")  \n// AI integration and code generation   \nconst handleGenerate = async (prompt: string) =\u003e {  \n// Process user input   \n// Generate code using AI   \n// Update preview   \n}   \n// Live preview rendering   \nuseEffect(() =\u003e {   \n// Code highlighting and preview updates    \n}, [code])  \n}   \n\n### Key Implementation Details\n- **Dual Model Approach**: Separate models for React and HTML/CSS generation\n- **Real-time Preview**: Sandboxed iframe for safe code execution\n- **Error Handling**: Comprehensive error catching and user feedback\n- **Responsive Design**: Mobile-first approach using Tailwind CSS\n- **Type Safety**: Full TypeScript implementation for reliability\n\n## Future Enhancements\n- Multi-framework support \n- Custom model fine-tuning for better code generation\n- Code explanation and documentation generation\n- Team collaboration features\n- Version control integration\n\n## Impact and Innovation\nThis project demonstrates the practical application of AI in modern development workflows, potentially saving thousands of development hours while maintaining code quality and consistency. It serves as a bridge between traditional coding practices and AI-assisted development, making it an essential tool for developers in 2025.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhcee3%2Fai-code-gen-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flhcee3%2Fai-code-gen-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhcee3%2Fai-code-gen-editor/lists"}