https://github.com/lhcee3/ai-code-gen-editor
🚀 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 & HTML/CSS generation
https://github.com/lhcee3/ai-code-gen-editor
ai ai-tools code-generation developer-tools hackathon html-css huggingface nextjs react react-components shadcn-ui tailwi typescript web-development
Last synced: 3 months ago
JSON representation
🚀 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 & HTML/CSS generation
- Host: GitHub
- URL: https://github.com/lhcee3/ai-code-gen-editor
- Owner: lhcee3
- Created: 2025-01-25T18:10:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-02T04:59:09.000Z (over 1 year ago)
- Last Synced: 2025-03-02T05:27:07.111Z (over 1 year ago)
- Topics: ai, ai-tools, code-generation, developer-tools, hackathon, html-css, huggingface, nextjs, react, react-components, shadcn-ui, tailwi, typescript, web-development
- Language: TypeScript
- Homepage:
- Size: 8.68 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AI Code Generator: Bridging Development Gaps in 2025
A 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.
## Why AI Code Generation Matters in 2025
- **Development Velocity**: With increasing project complexities, AI assistance can reduce development time by 60-70%
- **Learning Tool**: Helps junior developers understand best practices and modern coding patterns
- **Standardization**: Ensures consistent code style and structure across teams
- **Resource Optimization**: Reduces time spent on boilerplate code, allowing developers to focus on business logic
- **Cross-Framework Knowledge**: Assists developers in working with unfamiliar frameworks or languages
## Features
- Real-time React component generation with TypeScript support
- Responsive HTML/CSS, React code generation
- Live preview with hot reload
- Syntax highlighting using Prism.js
- Error handling and validation
- Mobile-responsive interface
- Clean, modern UI using Tailwind CSS
### Component Structure
CodeCreator
├── State Management
│ ├── Code State
│ ├── Preview State
│ └── Error Handling
├── AI Integration
│ ├── Hugging Face API
│ └── Code Generation Pipeline
└── UI Components
├── Code Editor
├── Live Preview
└── Control Panel
### AI Pipeline
1. **Input Processing**: User prompt analysis and context extraction
2. **Model Selection**: Dynamic routing between React and HTML/CSS models
3. **Code Generation**: Using Hugging Face's CodeLlama-7b-hf and SantaCoder models
4. **Post-processing**: Code cleaning and formatting
5. **Preview Rendering**: Real-time code execution and display
## Tech Stack
- **Frontend**: Next.js 14, React 18, TypeScript
- **Styling**: Tailwind CSS, Shadcn UI
- **AI Models**: Hugging Face's CodeLlama and SantaCoder
- **Code Processing**: Prism.js for syntax highlighting
- **Development**: ESLint, Prettier
## Setup
NOTE: Entire code base is present in the feature of this repository.
1. Clone the repository
2. Install dependencies: `npm install`
3. Copy `.env.example` to `.env.local` and add your Hugging Face API key
4. Run development server: `npm run dev`
## Environment Variables
- `HUGGING_FACE_API_KEY`: Your Hugging Face API key
## Code Walkthrough
### Core Component (code-creator.tsx)
typescript
export function CodeCreator() {
// State management for code, preview, and errors
const [code, setCode] = useState("")
const [preview, setPreview] = useState("")
// AI integration and code generation
const handleGenerate = async (prompt: string) => {
// Process user input
// Generate code using AI
// Update preview
}
// Live preview rendering
useEffect(() => {
// Code highlighting and preview updates
}, [code])
}
### Key Implementation Details
- **Dual Model Approach**: Separate models for React and HTML/CSS generation
- **Real-time Preview**: Sandboxed iframe for safe code execution
- **Error Handling**: Comprehensive error catching and user feedback
- **Responsive Design**: Mobile-first approach using Tailwind CSS
- **Type Safety**: Full TypeScript implementation for reliability
## Future Enhancements
- Multi-framework support
- Custom model fine-tuning for better code generation
- Code explanation and documentation generation
- Team collaboration features
- Version control integration
## Impact and Innovation
This 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.