Model Selector

from djust import LiveView
from djust.decorators import event_handler
from djust.components import ModelSelector


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.component = ModelSelector(name='model', label='Model', options=[{'value': 'claude-opus-5', 'label': 'Opus 5', 'description': 'Most capable', 'context_window': '200k', 'tier': 'premium'}, {'value': 'claude-sonnet-5', 'label': 'Sonnet 5', 'description': 'Balanced', 'context_window': '200k', 'tier': 'standard'}, {'value': 'claude-haiku-4-5', 'label': 'Haiku 4.5', 'description': 'Fast and cost-effective', 'context_window': '200k', 'tier': 'free'}], value='claude-sonnet-5', event='select_model')

    @event_handler()
    def toggle_model_selector(self, **kwargs):
        self.component.is_open = not self.component.is_open

    @event_handler()
    def select_model(self, value, **kwargs):
        self.component.value = value
        self.component.is_open = False

{{ component }}