OPENROUTER_DEBUG.md

🔍 OpenRouter Model Loading Debug Guide

🐛 Issue: Cannot load models via OpenRouter

📊 Debugging Steps Added

I've added comprehensive logging to help identify the issue:

1. Hook Debugging (/hooks/useOpenRouterModels.ts):

   • Console logs for fetch start/end
   • Response status logging
   • Model count logging

2. API Route Debugging (/app/api/openrouter/models/route.ts):

   • Request logging
   • API key status logging
   • Success/error logging

3. OpenRouter Client Debugging (/lib/openrouter.ts):

   • Request headers logging
   • Response status logging
   • Error details logging

4. Component Debugging (/components/openrouter-model-selector/index.tsx):

   • Render state logging

🔧 Fixes Applied

1. Fixed Infinite Loop: Removed dependency array issue in useOpenRouterModels hook
2. Updated Referer: Changed from deepsite.hf.co to localhost:3000 for local development
3. Enhanced Error Handling: Better error messages and logging

🧪 How to Debug

Step 1: Open Browser Console

1. Go to http://localhost:3000
2. Open Developer Tools (F12)
3. Go to Console tab

Step 2: Test Settings Panel

1. Open the AI chat settings
2. Toggle "Use Custom OpenRouter Models" ON
3. Watch console for logs starting with:
   • 🔄 (fetch start)
   • 📡 (request details)
   • 📥 (response status)
   • ✅ (success) or ❌ (error)

Step 3: Test Model Selector

1. Click "Select Model" button
2. Watch console for:
   • 🔍 OpenRouterModelSelector render logs
   • Loading state changes
   • Model count updates

Step 4: Test Direct API

1. Go to http://localhost:3000/test-openrouter.html
2. Click "Test API" button
3. Check both page result and console logs

🔍 Common Issues to Look For

Network Issues

• Check Console → Network tab
• Look for /api/openrouter/models request
• Status should be 200, not 404/500

CORS Issues

• Error messages mentioning CORS
• OpenRouter API blocking requests
• Referer header issues

API Rate Limiting

• OpenRouter returning 429 status
• "Too many requests" errors

Environment Issues

• Missing environment variables
• Local development configuration

Code Issues

• JavaScript errors in console
• Component not mounting
• Hook not calling fetch

📝 Expected Console Output

Successful Flow:

🔄 Fetching OpenRouter models...
📡 Requesting: http://localhost:3000/api/openrouter/models
🔄 OpenRouter models API called
🔑 API key provided: false
📡 Fetching models from OpenRouter...
🔗 Headers: ['Content-Type', 'HTTP-Referer', 'X-Title']
📥 OpenRouter API response status: 200
✅ OpenRouter API returned 200+ models
✅ Successfully fetched 200+ models from OpenRouter
📥 Response status: 200
📋 Response data: { success: true, data: [...] }
✅ Successfully fetched 200+ models
🔍 OpenRouterModelSelector render: { modelsCount: 200+, loading: false, error: null }

Error Flow Examples:

❌ Error fetching models: Failed to fetch
❌ OpenRouter API error: 403 Forbidden
❌ Network error: fetch failed

🚨 If Still Not Working

Check 1: API Endpoint Accessibility

Try: http://localhost:3000/api/openrouter/models Should return JSON with success: true

Check 2: OpenRouter API Direct

Try: https://openrouter.ai/api/v1/models Should return list of models

Check 3: Network Tab

• Failed requests (red)
• CORS errors
• Timeout issues

Check 4: Console Errors

• JavaScript compilation errors
• React component errors
• Network fetch errors

Let me know what you see in the console and I'll help identify the specific issue! 🔧