# Grok-2-Vision Integration Setup ## How to Configure Your Grok API Key The SEO Image Renamer now supports Grok-2-Vision for enhanced image analysis. Follow these steps to set up your API key: ### Step 1: Get Your Grok API Key 1. Visit [https://console.x.ai/](https://console.x.ai/) 2. Sign up or log in to your account 3. Navigate to API Keys section 4. Create a new API key for your project 5. Copy the generated API key ### Step 2: Update the .env File 1. Open the `.env` file in your project directory 2. Find the line that says: `GROK_API_KEY=your_grok_api_key_here` 3. Replace `your_grok_api_key_here` with your actual Grok API key 4. Save the file Example: ```env GROK_API_KEY=gsk-proj-abc123def456ghi789jkl012mno345pqr678stu901vwx234yz567 ``` ### Step 3: Test the Integration 1. Open your SEO Image Renamer website 2. Upload some images 3. Add keywords and click "Generate SEO Keywords" 4. Check the browser console for the message: "Grok API Key configured: Yes" ## What's New with Grok-2-Vision ### Enhanced Image Analysis - **Better Keyword Extraction**: Grok-2-Vision provides more accurate and contextual keywords from your images - **SEO-Focused Analysis**: The AI is specifically prompted to identify keywords useful for SEO image naming - **Improved Accuracy**: Better object and action recognition compared to previous vision models ### Technical Improvements - **Dedicated Vision API**: Separate API endpoint optimized for vision tasks - **Enhanced Prompts**: Specialized prompts for extracting SEO-relevant keywords - **Better Error Handling**: Improved fallback mechanisms if vision analysis fails - **Cleaner Responses**: Better parsing and filtering of AI responses ## Troubleshooting ### Common Issues **Issue**: "Grok API Key configured: No" in console **Solution**: Make sure you've replaced `sk-voidai-vVU2HHiq1txTNmXdZOP98LzARmi4HsptTixMqFSX4yBbw8ogvmKlJEPeKrH1hwEd6j6AnED9LsR6ztPtRMT7UzeLOyxQkasbwKow` with your actual API key in the .env file **Issue**: Vision analysis fails or returns generic keywords **Solution**: 1. Check that your API key is valid and has sufficient credits 2. Ensure your API key has access to Grok-2-Vision model 3. Check browser console for specific error messages **Issue**: .env file not loading **Solution**: 1. Make sure the .env file is in the same directory as index.html 2. Ensure your web server allows access to .env files (may need to serve from a local server) 3. For production, you may need to hardcode the API key in the JavaScript file ### API Limits - Grok-2-Vision has rate limits and usage quotas - If you hit limits, the system will fallback to generic keywords - Monitor your usage in the X.AI console ## Security Note Keep your API key secure and never commit it to public repositories. The .env file should be added to your .gitignore file. ## Support If you encounter issues with the Grok-2-Vision integration, check: 1. X.AI API documentation: [https://docs.x.ai/](https://docs.x.ai/) 2. Your API key permissions and quotas 3. Browser console for detailed error messages