|
| 1 | +# Model Selector Guide |
| 2 | + |
| 3 | +This guide explains how to use the new favorites-based model selector system. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +The chat UI now supports: |
| 8 | +- **39 models** from 3 providers (Anthropic, Groq, OpenRouter) |
| 9 | +- **Favorites system** - star your preferred models |
| 10 | +- **Search functionality** - find models by name or provider |
| 11 | +- **Tool filtering** - show only models that support tool calling |
| 12 | +- **OAuth authentication** - seamless OpenRouter integration |
| 13 | + |
| 14 | +## Features |
| 15 | + |
| 16 | +### Model Selection |
| 17 | +- Click the model selector to view all available models |
| 18 | +- Models are loaded from the live models.dev API |
| 19 | +- Each model shows provider logo, name, and capabilities |
| 20 | + |
| 21 | +### Favorites System |
| 22 | +- ⭐ Star models to add them to your favorites |
| 23 | +- Starred models are saved to local storage |
| 24 | +- Use the "Favorites" filter to show only starred models |
| 25 | + |
| 26 | +### Search & Filtering |
| 27 | +- 🔍 Search box to find models by name or provider |
| 28 | +- 🔧 "Tools Only" filter (appears when MCP tools are available) |
| 29 | +- ⭐ "Favorites" filter to show only starred models |
| 30 | + |
| 31 | +### Authentication |
| 32 | +- **API Keys**: Enter manually for Anthropic and Groq |
| 33 | +- **OAuth**: One-click authentication for OpenRouter |
| 34 | +- Authentication status shown with icons (✓ or ⚠️) |
| 35 | + |
| 36 | +## Provider Support |
| 37 | + |
| 38 | +### Anthropic |
| 39 | +- **Models**: 9 models including Claude 4 Sonnet |
| 40 | +- **Auth**: API key (requires manual entry) |
| 41 | +- **Tools**: All models support tool calling |
| 42 | + |
| 43 | +### Groq |
| 44 | +- **Models**: 13 models including Llama and Qwen variants |
| 45 | +- **Auth**: API key (requires manual entry) |
| 46 | +- **Tools**: 11 models support tool calling |
| 47 | + |
| 48 | +### OpenRouter |
| 49 | +- **Models**: 17 models from various providers |
| 50 | +- **Auth**: OAuth PKCE flow (one-click authentication) |
| 51 | +- **Tools**: All models support tool calling |
| 52 | + |
| 53 | +## Setting Up OpenRouter OAuth |
| 54 | + |
| 55 | +1. Create an OpenRouter account at https://openrouter.ai |
| 56 | +2. Go to your dashboard and create an OAuth app |
| 57 | +3. Set the redirect URI to: `http://localhost:5002/oauth/openrouter/callback` |
| 58 | +4. Copy your client ID to your `.env` file: |
| 59 | + ``` |
| 60 | + VITE_OPENROUTER_CLIENT_ID=your_client_id_here |
| 61 | + ``` |
| 62 | + |
| 63 | +## Usage Tips |
| 64 | + |
| 65 | +1. **Star your favorites** - This makes model selection much faster |
| 66 | +2. **Use search** - With 39 models, search helps find what you need |
| 67 | +3. **Filter by tools** - When using MCP tools, enable "Tools Only" filter |
| 68 | +4. **Try different providers** - Each has unique models with different strengths |
| 69 | + |
| 70 | +## Model Data Updates |
| 71 | + |
| 72 | +Model data is fetched from models.dev API and can be updated with: |
| 73 | + |
| 74 | +```bash |
| 75 | +pnpm update-models |
| 76 | +``` |
| 77 | + |
| 78 | +This will refresh the model list with the latest information from the API. |
| 79 | + |
| 80 | +## Local Storage |
| 81 | + |
| 82 | +The following preferences are saved locally: |
| 83 | +- **Favorites**: `aiChatTemplate_favorites_v1` |
| 84 | +- **Tokens**: `aiChatTemplate_token_[provider]` |
| 85 | +- **Selected Model**: `aiChatTemplate_selectedModel` |
| 86 | + |
| 87 | +## Troubleshooting |
| 88 | + |
| 89 | +- **OAuth popup blocked**: Allow popups for this site |
| 90 | +- **Authentication failed**: Check your API keys or re-authenticate |
| 91 | +- **Model not working**: Verify the model supports the features you're using |
| 92 | +- **Tools not showing**: Enable "Tools Only" filter when MCP tools are configured |
0 commit comments