AI Code Generator

A modern, responsive web application that generates code based on user prompts using AI. Features a beautiful UI with dark mode, syntax highlighting, and multiple creative features.

Features

Core Functionality

• Text Prompt Input: Accept detailed descriptions of what users want to build
• AI Code Generation: Generate code in multiple programming languages
• Code Display: Beautiful syntax-highlighted code output
• Copy to Clipboard: One-click code copying functionality
• Run Code: Execute code in a new window/tab

Creative Features

• Dark/Light Theme Toggle: Switch between themes with persistent storage
• Export Functionality: Download generated code as files
• Multiple Language Support: JavaScript, Python, HTML, CSS, React, Vue.js, Node.js, SQL
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Toast Notifications: User-friendly feedback messages
• Loading Animations: Smooth loading states during code generation
• Auto-resizing Textarea: Dynamic input field that grows with content
• Keyboard Shortcuts: Ctrl+Enter to generate code
• Rotating Placeholders: Dynamic example prompts for inspiration

UI/UX Features

• Modern Design: Clean, professional interface with smooth animations
• Syntax Highlighting: Powered by Prism.js for beautiful code display
• Gradient Buttons: Eye-catching call-to-action buttons
• Hover Effects: Interactive elements with smooth transitions
• Feature Cards: Showcase app capabilities with animated cards
• Mobile-First: Responsive design that works on all devices

Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No server required - runs entirely in the browser

Installation

1. Clone or download the project files
2. Open index.html in your web browser
3. Start generating code!

File Structure

ai-code-generator/
├── index.html          # Main HTML structure
├── styles.css          # CSS styling and responsive design
├── script.js           # JavaScript functionality
└── README.md           # This file

Usage

1. Enter a Prompt: Describe what you want to build in the text area
2. Select Language: Choose your preferred programming language
3. Generate Code: Click the "Generate Code" button or press Ctrl+Enter
4. View Results: Generated code appears with syntax highlighting
5. Copy or Run: Use the copy button to copy code or run button to execute it
6. Export: Download the code as a file using the export button

Example Prompts

• "Create a React component for a todo list with add, edit, and delete functionality"
• "Build a Python class for managing a library with books and users"
• "Write HTML and CSS for a modern contact form with validation"
• "Create a Node.js Express server with authentication middleware"
• "Design a SQL database schema for an e-commerce website"

AI API Integration

Current Implementation

The app currently uses mock responses for demonstration purposes. To integrate with a real AI API:

OpenAI Integration

Replace the callAIAPI method in script.js:

async callAIAPI(prompt, language) {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${YOUR_OPENAI_API_KEY}`
        },
        body: JSON.stringify({
            model: 'gpt-4.1',
            messages: [
                {
                    role: 'system',
                    content: `You are a helpful coding assistant. Generate clean, well-commented code in ${language} based on the user's request.`
                },
                {
                    role: 'user',
                    content: prompt
                }
            ],
            max_tokens: 2000,
            temperature: 0.7
        })
    });
    
    const data = await response.json();
    return data.choices[0].message.content;
}

Other AI APIs

You can integrate with other AI services like:

• Anthropic Claude: Use their API for code generation
• Google Bard: Integrate with Google's AI services
• GitHub Copilot: Use Copilot's API for code suggestions
• Custom AI Models: Deploy your own AI model and integrate via API

Environment Variables

For production use, store your API keys securely:

// Add to your environment or config
const API_KEY = process.env.OPENAI_API_KEY || 'your-api-key-here';
const API_BASE_URL = process.env.API_BASE_URL || 'https://api.openai.com/v1';

Customization

Styling Customization

• Modify CSS variables in :root for color themes
• Add new animations in the CSS file
• Customize the layout in the HTML structure

Feature Extensions

• Add code validation
• Implement code formatting
• Add version control integration
• Create code templates
• Add collaborative features

Browser Compatibility

• Chrome: 80+
• Firefox: 75+
• Safari: 13+
• Edge: 80+

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Support

For questions or issues:

1. Check the browser console for errors
2. Ensure all files are properly loaded
3. Verify API keys are correctly configured
4. Test with different browsers

Future Enhancements

• Real-time Collaboration: Multiple users editing together
• Code Templates: Pre-built templates for common patterns
• Version History: Track changes and revert if needed
• Code Analysis: Static analysis and optimization suggestions
• Integration: Connect with GitHub, GitLab, or other platforms
• AI Chat: Interactive chat interface for code assistance
• Code Testing: Automated test generation
• Documentation: Auto-generate documentation from code

---

Note: This is a demonstration app with mock AI responses. For production use, integrate with a real AI API service and implement proper error handling, rate limiting, and security measures.