Skip to content

Commit c260e97

Browse files
geelengetampcode
andauthored
Added openrouter (#25)
* Add models.dev data fetching script and pnpm command - Created scripts/update-models.ts to fetch and filter models from models.dev API - Added pnpm update-models command to package.json - Generated initial models.json with 39 models from 3 providers - Filtered to only include anthropic, groq, and openrouter providers - Added tsx as dev dependency for TypeScript execution Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Create new type system and authentication for multi-provider support - Refactored types/models.ts with new Provider and Model interfaces - Added support for OAuth authentication alongside API keys - Created useModels hook for favorites management and model data loading - Added comprehensive auth utils with OAuth PKCE flow implementation - Updated apiKeys.ts to use new auth system for backward compatibility - Created OAuthCallback component for OAuth flow completion - Added support for OpenRouter OAuth configuration Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Implement comprehensive ModelSelector refactor with favorites and OAuth support - Refactored ModelSelector to use new favorites-based system with search and filtering - Added star ratings for favorite models with local storage persistence - Added search functionality to filter models by name/provider - Added "Tools Only" and "Favorites" filter toggles - Updated authentication to support OAuth PKCE flow alongside API keys - Added OpenRouter OAuth support with proper error handling - Updated ConversationThread, ModelSelectionModal, and ApiKeyModal to use new Provider type - Added OAuth success message handling in ChatApp - Updated useStreamResponse to support OpenRouter via @ai-sdk/openai - Fixed all TypeScript compilation errors for new model system - Added proper auth headers for all three providers (Groq, Anthropic, OpenRouter) Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Add final touches and documentation for model selector system - Fixed unused import in useStreamResponse.ts - Added .env.example for OpenRouter OAuth configuration - Created comprehensive MODEL_SELECTOR_GUIDE.md with usage instructions - Documented all features including favorites, search, filtering, and OAuth - Added setup instructions for OpenRouter OAuth - Included troubleshooting guide and local storage details Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Implement clean provider-first model selector with favorites workflow - Refactored ModelSelector to show providers first, then starred models - Created ProviderModelsModal for provider-specific model selection and starring - Removed search/filter complexity from main dropdown - Added handleProviderSelect to route between OAuth/API key flows - OAuth providers show model selection after successful authentication - API key providers show model selection after key entry - Starred models appear grayed out when provider not configured - Clicking unconfigured starred model redirects to provider setup - Added OAuth success message handling to auto-open provider models - Clean two-step workflow: configure provider → select/star models Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Fix ModelSelectionModal to use provider-first workflow - Replaced the old flat model list in ModelSelectionModal with provider-first design - Shows 3 provider cards (Anthropic, Groq, OpenRouter) with auth status - Added starred models section below providers (empty initially) - OAuth flow for OpenRouter, API key modals for Anthropic/Groq - Provider selection leads to ProviderModelsModal for browsing and starring - Grayed out starred models when provider not configured - Click unconfigured starred model redirects to provider setup - OAuth success automatically opens provider models modal - Clean, intuitive workflow: Select Provider → Configure Auth → Browse Models → Star Favorites Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Fix OpenRouter OAuth flow to match their API specification - Updated authorization URL from /oauth/authorize to /auth - Changed token URL to /api/v1/auth/keys - Removed client_id requirement (OpenRouter doesn't use it) - Removed scopes (OpenRouter doesn't use them) - Updated OAuth flow to use callback_url instead of redirect_uri - Changed token exchange to use JSON body instead of form data - Handle OpenRouter's response format {key: "..."} instead of {access_token: "..."} - Made state parameter optional for OpenRouter (they don't use it) - Updated sessionStorage handling for providers without state parameter - Simplified .env.example to remove client_id requirement Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Fix model selection and favorites system - **Fixed multiple useModels hook instances**: Removed duplicate hook from ModelSelectionModal and consolidated all model state management in ChatApp - **Fixed auto-starring**: Models are now automatically starred when selected from any UI (provider modal or favorites list) - **Fixed favorites persistence**: Starred models now properly persist in localStorage and are restored on page refresh - **Fixed selected model highlighting**: Currently selected model is now highlighted in the starred models list with blue border, ring effect, and checkmark - **Improved prop passing**: Pass all model-related functions (addToFavorites, toggleFavorite, isFavorite, getFavoriteModels) down through ChatApp → ConversationThread → ModelSelectionModal - **Removed debug logs**: Cleaned up console.log statements added during debugging The root cause was multiple instances of the useModels hook running simultaneously, causing state conflicts where one instance would load favorites correctly but another would reset them to an empty array. Now there's a single source of truth for all model state in ChatApp. This fixes the specific issues where: 1. Selected models weren't being auto-starred 2. Starred models list was forgotten on page refresh 3. Selected model highlighting wasn't working in the modal Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Replace nested modals with single modal navigation - **Improved UX**: Replaced stacked modals with a single modal that switches between views - **Added back navigation**: Provider models view now has a back button in the top left to return to main view - **Unified modal structure**: Single modal container with conditional rendering for main vs provider views - **Added search functionality**: Provider models view includes a search bar to filter models - **Better visual hierarchy**: Provider view shows provider logo and name in header - **Removed ProviderModelsModal**: Consolidated functionality into ModelSelectionModal - **Enhanced interaction**: Cleaner navigation flow without modal stacking Main view shows: - List of providers with authentication status - Starred models section Provider view shows: - Back button + provider logo/name in header - Search bar for filtering models - List of provider's models with star/select actions - Model count at bottom This creates a much more intuitive navigation experience similar to mobile app patterns, avoiding the confusing nested modal behavior. Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Fix modal scrolling for overflow content - **Fixed height constraints**: Modal now uses flexbox layout with proper height management - **Added flex-shrink-0 to header**: Prevents header from shrinking and maintains fixed height - **Added flex-1 min-h-0 to content**: Allows content area to take remaining space and scroll properly - **Improved responsive behavior**: Modal content now scrolls vertically when overflowing on smaller screens Key changes: - Modal container: Added `flex flex-col` for vertical layout - Header: Added `flex-shrink-0` to maintain fixed height - Content area: Added `flex-1 min-h-0` to fill remaining space and enable scrolling This ensures that: 1. Header stays fixed at top 2. Content area takes remaining vertical space 3. Content scrolls independently when overflowing 4. Works properly on all screen sizes, including small screens with many models Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * Make provider model rows fully clickable - **Improved UX consistency**: Provider model rows now behave like starred model rows - **Full row clickable**: Click anywhere in the row to select and star the model - **Event handling**: Star button uses stopPropagation to prevent row click when toggling favorites - **Visual clarity**: Replaced "Select" button with subtle "Click to select" hint - **Added cursor pointer**: Clear visual indication that rows are clickable Changes: - Added `cursor-pointer` and `onClick` to model rows in provider view - Star button now stops event propagation to allow independent toggling - Removed separate "Select" button for cleaner, more consistent interface - Added "Click to select" text hint on the right side This creates a consistent interaction pattern across both: - Main view starred models (click row to select) - Provider view models (click row to select and star) Users can now efficiently browse and select models with single clicks, while still having granular control over favorites via the star button. Amp-Thread: https://ampcode.com/threads/T-918d21db-3d47-4c6f-a3d8-96a60b59674a Co-authored-by: Amp <amp@ampcode.com> * localstorage saving working --------- Co-authored-by: Amp <amp@ampcode.com>
1 parent 85efc2d commit c260e97

21 files changed

+2706
-216
lines changed

examples/chat-ui/.env.example

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# OpenRouter OAuth Configuration
2+
# Note: OpenRouter OAuth doesn't require client ID, only callback URL configuration
3+
VITE_OPENROUTER_REDIRECT_URI=http://localhost:5002/oauth/openrouter/callback
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
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

examples/chat-ui/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@
1212
"test": "playwright test",
1313
"test:ui": "playwright test --ui",
1414
"test:headed": "playwright test --headed",
15-
"test:html": "playwright test --reporter=html"
15+
"test:html": "playwright test --reporter=html",
16+
"update-models": "tsx scripts/update-models.ts"
1617
},
1718
"dependencies": {
1819
"@ai-sdk/anthropic": "^1.2.12",
1920
"@ai-sdk/groq": "^1.2.9",
21+
"@ai-sdk/openai": "^1.3.23",
2022
"@tailwindcss/typography": "^0.5.16",
2123
"@tailwindcss/vite": "^4.0.14",
2224
"ai": "^4.1.61",
@@ -46,6 +48,7 @@
4648
"eslint-plugin-react-refresh": "^0.4.19",
4749
"globals": "^15.15.0",
4850
"prettier": "^3.5.3",
51+
"tsx": "^4.20.3",
4952
"typescript": "~5.7.2",
5053
"typescript-eslint": "^8.24.1",
5154
"use-mcp": "link:../..",

examples/chat-ui/pnpm-lock.yaml

Lines changed: 54 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)