AI Article Generator

A powerful web application for generating high-quality blog articles using Google's Gemini API. The app automatically creates SEO-optimized content, generates relevant images with Imagen, and saves everything directly to your Google Drive.

✨ Features

• 🤖 AI-Powered Content Generation - Uses Gemini 2.5 Pro for high-quality article writing
• 🖼️ Automatic Image Generation - Creates featured images and in-content images with Imagen 4
• 📊 Google Sheets Integration - Manage your content queue directly from spreadsheets
• 💾 Google Drive Storage - Automatically saves articles and images to organized folders
• 🎨 Multiple Blog Profiles - Support for different writing styles and target audiences
• 📝 Article Customization - Control length, language, image count, and more
• 🔄 Regeneration Options - Regenerate text or images if you're not satisfied
• ✏️ Built-in Editor - Edit and refine articles before saving
• 📱 Modern UI - Clean, responsive interface with real-time progress tracking
• 🔒 Secure Backend - API keys protected via Firebase Cloud Functions
• 🔐 Email-Based Access Control - Restrict access to authorized users only

🚀 Live Demo

The application is deployed at: https://ai-article-gen-pavel.web.app

Note: The live demo is restricted to authorized email addresses only.

🛠️ Technology Stack

• Frontend: React 19 + TypeScript + Vite
• Backend: Firebase Cloud Functions (Node.js 20)
• Styling: Tailwind CSS (via CDN)
• AI Services: Google Gemini API (text + image generation)
• Cloud Storage: Google Drive API
• Data Management: Google Sheets API
• Hosting: Firebase Hosting

🔒 Security Features

This application implements several security measures:

1. Backend API Proxy - Gemini API calls are made through Firebase Cloud Functions, keeping the API key secure on the server
2. Email Authorization - Only specified email addresses can access the application
3. No Client-Side Secrets - API keys are never exposed in the browser or frontend code
4. Environment Variables - Sensitive data stored in .env files (excluded from Git)

📋 Prerequisites

Before you begin, you'll need:

1. Google Cloud Project with the following APIs enabled:

   • Google Drive API
   • Google Sheets API
   • OAuth 2.0 credentials (Client ID)

2. Gemini API Key from Google AI Studio

3. Firebase Project on the Blaze (pay-as-you-go) plan

   • Required for Cloud Functions
   • Free tier includes 2M function invocations/month

🔧 Installation & Setup

1. Clone the Repository

git clone https://github.com/yourusername/ai-article-generator.git
cd ai-article-generator

2. Install Frontend Dependencies

npm install

3. Install Backend Dependencies

cd functions
npm install
cd ..

4. Configure Environment Variables

Frontend Configuration

Create .env.local in the root directory (this file is gitignored):

# Not needed anymore - API key is now on backend only
# VITE_GEMINI_API_KEY is no longer used

Backend Configuration

Edit functions/.env and add your Gemini API key:

GEMINI_API_KEY=your_actual_gemini_api_key_here

Important: Never commit .env files to Git! They are already in .gitignore.

5. Configure Access Control

Edit the ALLOWED_EMAILS array in two locations to specify who can access your application:

File 1: functions/src/index.ts (lines 16-19)

const ALLOWED_EMAILS = [
    'your-email@example.com',
    'another-email@example.com'
];

File 2: services/googleAuthService.ts (lines 7-10)

const ALLOWED_EMAILS = [
    'your-email@example.com',
    'another-email@example.com'
];

Note: Both files must have the same email list for proper authorization.

6. Update Firebase Configuration

If your Firebase project ID or region differs, update FUNCTIONS_BASE_URL in services/geminiService.ts:

const FUNCTIONS_BASE_URL = 'https://YOUR-REGION-YOUR-PROJECT-ID.cloudfunctions.net';

7. Initialize Firebase

firebase login
firebase init

Select:

• Hosting
• Functions
• Use existing project (select your Firebase project)

8. Build and Deploy Cloud Functions

cd functions
npm run build
cd ..
firebase deploy --only functions

9. Build and Deploy Frontend

npm run build
firebase deploy --only hosting

🎯 Usage

Setting Up Google Cloud OAuth

1. Go to Google Cloud Console
2. Create OAuth 2.0 credentials (Web application)
3. Add authorized JavaScript origins and redirect URIs:
   • For local development: http://localhost:5173
   • For production: https://your-app.web.app
4. Copy the Client ID

Creating a Blog Profile

1. Sign in with your authorized Google account
2. Enter your Google OAuth Client ID
3. Create a new blog profile with:
   • Profile name
   • Writing style/persona
   • Target audience
   • Image style preferences
   • Google Drive folder ID (for saving articles)
   • Optional: Google Sheet URL (for content queue)

Generating Articles

Option 1: From Google Sheets

1. Create a Google Sheet with columns: topic, keywords, category, status
2. Add the sheet URL to your profile
3. Load topics and click "Generate" on any topic

Option 2: From XLSX File

1. Upload an XLSX file with the required columns
2. Click "Generate" on any topic

Article Generation Process

The app will:

1. ✍️ Generate article text using Gemini 2.5 Pro
2. 🖼️ Create images with Imagen 4
3. 🔍 Find relevant external sources via Google Search
4. 📄 Format and save HTML to Google Drive
5. ✅ Update status in Google Sheets (if applicable)

🔐 Security Best Practices

For Developers

1. Never commit .env files - They're in .gitignore but double-check before pushing
2. Rotate API keys regularly - Especially if you suspect exposure
3. Review Cloud Function logs - Monitor for unauthorized access attempts
4. Keep dependencies updated - Run npm audit regularly
5. Use environment-specific configs - Different keys for dev/staging/production

For Users

1. Protect your OAuth Client ID - Don't share it publicly
2. Review authorized users - Regularly check who has access
3. Monitor API usage - Check Google Cloud Console for unexpected usage
4. Enable 2FA - On your Google account for added security

📊 Cost Considerations

Firebase (Blaze Plan)

• Cloud Functions: 2M invocations/month free, then $0.40 per million
• Hosting: 10GB storage + 360MB/day transfer free
• Typical usage: Should stay within free tier for personal use

Google Gemini API

• Gemini 2.5 Pro: Free tier available, check current pricing
• Imagen 4: Paid service, check Google AI Studio for rates

Google Cloud APIs

• Drive API: Free for reasonable use
• Sheets API: Free for reasonable use

🐛 Troubleshooting

"UNAUTHORIZED" Error

• Check that your email is in the ALLOWED_EMAILS array in both files
• Verify you're signed in with the correct Google account

"Failed to generate content" Error

• Check that Cloud Functions are deployed: firebase deploy --only functions
• Verify GEMINI_API_KEY is set in functions/.env
• Check Firebase Functions logs: firebase functions:log

Images Not Generating

• Verify Imagen API is enabled in Google Cloud Console
• Check API quota limits
• Review Cloud Functions logs for detailed error messages

Build Errors

• Ensure all dependencies are installed: npm install and cd functions && npm install
• Check Node.js version (requires Node 20 for functions)
• Clear cache: npm cache clean --force

📝 Development

Local Development

# Run frontend dev server
npm run dev

# Run functions emulator (optional)
cd functions
npm run serve

Testing

Before deploying, verify:

1. API key not in build:

   npm run build
   findstr /s /i "AIza" dist\assets\*.js
   # Should return nothing

2. Email restriction works:

   • Try signing in with unauthorized email
   • Should see "Access Denied" message

3. Functions are working:

   • Test article generation end-to-end
   • Check all features (text, images, sources)

🤝 Contributing

Contributions are welcome! Please:

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 licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Gemini API for powerful AI capabilities
• Firebase for hosting and backend infrastructure
• React and Vite for the excellent development experience

📧 Contact

For questions or support, please open an issue on GitHub.

---

⚠️ Important Security Note:

This application handles API keys and user data. Always:

• Keep your .env files private
• Regularly review access logs
• Update dependencies for security patches
• Follow the principle of least privilege for API access