Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement free models filter for OpenRouter #1290

Open
YadavSourabhGH opened this issue Feb 9, 2025 · 3 comments
Open

Implement free models filter for OpenRouter #1290

YadavSourabhGH opened this issue Feb 9, 2025 · 3 comments
Labels
feature A pretty vague description of how a capability of our software can be added or improved.

Comments

@YadavSourabhGH
Copy link

Motivation

The current model selection interface doesn't provide an easy way to filter and identify free models from OpenRouter. Users often need to manually scan through the model list to find free options, which is time-consuming and may lead to accidentally selecting paid models. By implementing a dedicated free models toggle, we can help users quickly access free AI models and make informed choices about their model selection.

Scope

  • Add a toggle switch specifically for OpenRouter provider to filter free models
  • Implement model filtering based on :free suffix in model names
  • Add proper sorting of models by provider name
  • Style the toggle following Bolt design system
  • Implement responsive layout (30/70 split) for provider/model selection
  • Add text truncation for long model names
  • Ensure proper accessibility with ARIA labels and focus states
  • Maintain proper TypeScript type safety
  • Add hover states and smooth transitions

Options

Implementation approach:

  1. Use RadixUI Switch component for the toggle
  2. Filter models using the pattern model.name.includes(':free')
  3. Sort models alphabetically by provider name
  4. Style using Tailwind CSS classes matching Bolt design system
  5. Add proper state management for toggle visibility
  6. Implement responsive design with flexbox

Technical considerations:

// Model filtering logic
const filteredModelList = provider?.name === 'OpenRouter'
  ? modelList
      .filter((m) => m.provider === 'OpenRouter')
      .sort((a, b) => getProviderName(a.label).localeCompare(getProviderName(b.label)))
      .filter((m) => !showFreeModels || m.name.includes(':free'))
  : modelList.filter((m) => m.provider === provider?.name);

Related

  • Related to model selection UX improvements
  • Part of the OpenRouter integration features
  • Enhances model accessibility for new users
  • Supports free tier usage optimization
@YadavSourabhGH YadavSourabhGH added the feature A pretty vague description of how a capability of our software can be added or improved. label Feb 9, 2025
@patriciahasanah
Copy link

Image
selecting model should like this, I think will better

@YadavSourabhGH
Copy link
Author

Image

i have implemented it in my local code , it will look like this , basically a toggle to filter only for openrouter

@kamilfurtak
Copy link

#1322

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A pretty vague description of how a capability of our software can be added or improved.
Projects
None yet
Development

No branches or pull requests

3 participants