Snippet
AI Model Picker
Card-based selector for choosing between Claude, GPT, Gemini, and Grok.
Last updated: October 2026
What this snippet does: A grid of model cards showing name, description, price, and speed. Click to select. Perfect for any AI product that supports multiple LLMs.
🎬 Live Demo
Click a card to select it.
Selected: none
📝
How It Works
A responsive grid of button elements. Clicking one adds a selected class and stores the model name. Model metadata (price, speed) is embedded in the card's data attributes.
1
HTML
<button class="model-card" data-model="Claude Sonnet 4.6">
<div class="mc-head">
<div class="mc-icon mc-claude">C</div>
<div class="mc-name">Claude Sonnet 4.6</div>
</div>
<div class="mc-desc">Best balance...</div>
<div class="mc-meta">
<span>Speed: Fast</span>
<span>Cost: $$</span>
</div>
</button>
2
Core CSS
.model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.model-card.selected {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
3
JavaScript
document.querySelectorAll('.model-card').forEach(card => {
card.addEventListener('click', () => {
document.querySelectorAll('.model-card')
.forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
// Use the selected model in your API call
const model = card.dataset.model;
console.log('Selected model:', model);
});
});🎯 Use Cases
- Multi-model AI apps — Let users pick per task
- Cost-conscious tools — Show pricing tier at selection time
- Settings pages — Default model preference
- Onboarding wizards — Choose a starting model
⚠️ Common Mistakes
- No default selection. Pre-select the recommended model so users aren't stuck.
- Hiding pricing. Users want to know cost upfront. Show it on the card.
- Too many options. 4–6 models max. More becomes overwhelming.
- No icons or color coding. Visual identity helps users remember brands.
- Not updating the UI on select. Show which model is active somewhere prominent.