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

Visit https://console.x.ai/
Sign up or log in to your account
Navigate to API Keys section
Create a new API key for your project
Copy the generated API key

Step 2: Update the .env File

Open the .env file in your project directory
Find the line that says: GROK_API_KEY=your_grok_api_key_here
Replace your_grok_api_key_here with your actual Grok API key
Save the file

Example:

GROK_API_KEY=gsk-proj-abc123def456ghi789jkl012mno345pqr678stu901vwx234yz567

Step 3: Test the Integration

Open your SEO Image Renamer website
Upload some images
Add keywords and click "Generate SEO Keywords"
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:

Check that your API key is valid and has sufficient credits
Ensure your API key has access to Grok-2-Vision model
Check browser console for specific error messages

Issue: .env file not loading Solution:

Make sure the .env file is in the same directory as index.html
Ensure your web server allows access to .env files (may need to serve from a local server)
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:

X.AI API documentation: https://docs.x.ai/
Your API key permissions and quotas
Browser console for detailed error messages

3 KiB Raw Blame History