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! 🔧