Initial commit: AI Code Generator with React and HTML generation
AI Code Generator Implementation
Overview
Adding a new AI-powered code generation tool that creates React components and HTML/CSS code using Hugging Face's AI models.
Key Features Added
- Real-time code generation for React components and HTML/CSS
- Live preview functionality with syntax highlighting
- Dual model approach (CodeLlama for React, SantaCoder for HTML/CSS)
- Error handling and validation
- Mobile-responsive UI using Tailwind CSS and Shadcn UI
Technical Implementation
- Added CodeCreator component with state management
- Integrated Hugging Face API for code generation
- Implemented Prism.js for syntax highlighting
- Added environment variable support for API key
- Set up proper error handling and loading states
Notes
- Requires Hugging Face API key to be set in
.env.local - Built for Next.js 14 with React 18
- Uses TypeScript for type safety
Testing Done
- Tested React component generation
- Tested HTML/CSS code generation
- Verified mobile responsiveness
- Checked error handling scenarios
- Verified environment variable setup