AiModelSelector

Bit.BlazorUI.AIModelPicker

BitAiModelSelector is the model picker of an AI chat: a BitDropdown of the models of the registered catalog (or of a catalog or list of your own), grouped under their family or provider, each model's description as the tooltip of its option. It offers only the models that declare the capabilities you require, hides deprecated ones unless asked, and never shows a model the bound ModelId does not name without saying so: a selection it had to make on its own is raised through ModelIdChanged and OnModelSelected.

ForceAnimation (whole page)

Notes

To use this component, you need to install the Bit.BlazorUI.AI(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

The models come from the IBitAiModelCatalog registered with builder.Services.AddBitBlazorUIAIServices(ai => ai.AddModels(models, providers, defaultModelId)), unless a Catalog or a list of Models is given. A BitAiModel only describes a model - the picker never calls a provider - so what the chosen id means is up to your transport. The selector renders nothing while no model is left to offer. See the usage scenario for it in the prefix of a composer, beside the context meter and the token usage it drives.

The picker is named Model for assistive technologies, the header of the models without a group is Other, and a deprecated model is labelled "Name (deprecated)". These texts come from the strings in force (Model, OtherModels, ModelDeprecated), which a BitAiOptionsProvider localizes.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Bind ModelId: the picker lists the models of the registered catalog under their family or provider, and the description of a model is the tooltip of its option.

ModelId: demo-model-1

OnModelSelected

OnModelSelected hands over the whole BitAiModel record - its description, context window, prices and capabilities - whenever the selection changes. A ModelId naming no model on offer (unset, as here, deprecated or filtered out) makes the picker select the default model of the catalog, or else the first one, and raise both ModelIdChanged and OnModelSelected for it, so a bound value never disagrees with what it shows.

Models

Models offers a list of your own in place of the catalog's - the models a user's plan entitles them to, say. A model is grouped under its Family, else the name of its provider; once any model has a group, the ones that have none are gathered under "Other". Its Icon (an icon name) shows beside its name.

ModelId: team-pro

Catalog

Catalog takes an IBitAiModelCatalog of your own - a BitAiModelCatalog for a fixed list, or an implementation over the model list of a gateway. Its providers name the groups of the models that have no Family, and its default model is the one selected while ModelId names none - Team Vision here. The Selected property of the selector is the model it shows.

ModelId: , Selected:

RequiredCapabilities

RequiredCapabilities offers only the models that declare every one of them - Vision for a composer with an image staged, Tools and StructuredOutput for a flow that needs both.

Vision: , tools and structured output:

ShowDeprecated

A model marked IsDeprecated is hidden by default. ShowDeprecated offers it too, labelled as such - for a conversation that was started with it.

Without: , with deprecated models: assistant-v2

Cascading parameters

BitParams with a BitAiModelSelectorParams sets the catalog or the models, the required capabilities, ShowDeprecated and the look of every model selector inside it; a parameter of the selector itself still wins. The bound ModelId and the callbacks are each selector's own.

First: assistant-v2, second (its own ShowDeprecated):

Disabled

A disabled model selector shows the selected model and cannot be opened.

Style & Class

Style and Class reach the root, which wraps the picker; Styles.Dropdown and Classes.Dropdown reach every part of its BitDropdown (BitDropdownClassStyles), the list of the models included. The model selector has no CSS variables of its own: the picker is restyled through the public --bit-Dropdown-* variables, from :root, an ancestor or Style.

RTL

In right-to-left text the picker is mirrored, whether the direction comes from Dir or from a dir attribute around it.

API

Every parameter, public member, sub-class and enum this component exposes.

BitAiModelSelector parameters

Name	Type	Default value	Description
Catalog	IBitAiModelCatalog?	null	The catalog of the models to offer. Its providers name the groups of the models that have no Family, and its DefaultModel is selected while ModelId names none. When null, the IBitAiModelCatalog registered in the services (ai.AddModels of AddBitBlazorUIAIServices) is used.
Classes	BitAiModelSelectorClassStyles?	null	Custom CSS classes for different parts of the model selector.
ModelId	string?	null	The id of the selected model. When it names no model on offer - because it is unset, deprecated or filtered out - the picker selects the default model of the catalog, or else the first one, and raises ModelIdChanged and OnModelSelected for it after the render, so a bound value never disagrees with what the picker shows. Use @bind-ModelId to keep it in step.
ModelIdChanged	EventCallback<string>		Raised when the selection changes - picked by the user, or made by the picker itself for a ModelId naming no model on offer - so the value can be bound.
Models	IReadOnlyList<BitAiModel>?	null	The models to offer, in their order, in place of those of the catalog - for an app that filters them by entitlement. The catalog still supplies the provider names and the default model.
OnModelSelected	EventCallback<BitAiModel>		Raised with the full model record when the selection changes, whoever made it.
RequiredCapabilities	BitAiModelCapabilities	BitAiModelCapabilities.None	Offers only the models that declare every one of these capabilities, for example Vision for a composer that has images staged. None offers every model.
ShowDeprecated	bool	false	Offers the models marked IsDeprecated too, each labelled as such (the ModelDeprecated text of the strings in force, "Name (deprecated)").
Styles	BitAiModelSelectorClassStyles?	null	Custom CSS styles for different parts of the model selector.

BitAiModelSelector public members

Name	Type	Default value	Description
Selected	BitAiModel?	null	The model the picker shows, which may differ from ModelId until the change has been raised.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitAiModelSelectorClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitAiModelSelector.
Dropdown	BitDropdownClassStyles?	null	Custom CSS classes/styles for the BitDropdown of the BitAiModelSelector that lists the models.

BitAiModel properties

A model the user can choose between: new BitAiModel(modelId, name) { ... }. Purely descriptive - the package never calls a provider itself - it drives the model picker, the context meter (ContextWindow) and the cost estimates of the token usage (the prices), not a client.

Name	Type	Default value	Description
ModelId	string		The identifier sent to the provider, and what ModelId of the selector names. Required; it cannot be empty.
Name	string		The display name, the text of its option in the picker.
ProviderId	string?	null	The identifier of the BitAiProvider that serves the model. The picker groups a model without a Family under the name of its provider (or this id, when the catalog does not know it).
Description	string?	null	A short description, the tooltip of its option in the picker and of the picker while it is selected.
Family	string?	null	A family or tier label the picker groups the models under, ahead of the provider.
Capabilities	BitAiModelCapabilities	BitAiModelCapabilities.Streaming	What the model can do. RequiredCapabilities of the selector filters on it, and a BitAiPromptInput given the model offers attachments and dictation by it.
ContextWindow	long?	null	The context window in tokens, used by the context meter.
MaxOutputTokens	long?	null	The most tokens the model produces in one response.
InputPricePerMillion	decimal?	null	The price of a million input tokens, in Currency.
OutputPricePerMillion	decimal?	null	The price of a million output tokens, in Currency.
Currency	string	"USD"	The ISO 4217 code of the price fields.
Icon	string?	null	The icon shown beside the model in the picker: a Fluent UI (Fabric MDL2) icon name such as BitIconName.Robot, never an image URL. The core package ships only the glyphs its own components draw, so a name outside them needs the Bit.BlazorUI.Icons nuget package to be drawn.
IsDeprecated	bool	false	Hides the model from the picker unless its ShowDeprecated is set, which labels it as deprecated.
Metadata	IReadOnlyDictionary<string, object?>?	null	App-defined values carried through to custom model renderers.
Supports(BitAiModelCapabilities capability)	bool		Whether the model declares the capability - every one of them, for a combination.
EstimateCost(BitAiTokenUsage usage)	decimal?		The cost of a generation from its token usage at the prices of the model, in Currency, or null for a model that carries no prices.

BitAiProvider properties

A vendor or gateway that serves models: new BitAiProvider(providerId, name) { ... }, handed to the catalog beside the models.

Name	Type	Default value	Description
ProviderId	string		The identifier the ProviderId of a BitAiModel references. Required; it cannot be empty.
Name	string		The display name, which heads the group of its models (those without a Family) in the picker.
Icon	string?	null	An icon name (a Fabric MDL2 name, never a URL) for the provider. No component of the package draws it today.
Website	string?	null	A link to the documentation or the console of the provider.

IBitAiModelCatalog properties

The models and providers a host offers. ai.AddModels(models, providers, defaultModelId) registers a BitAiModelCatalog - an in-memory one, new BitAiModelCatalog(models, providers, defaultModelId), whose default is the first model that is not deprecated unless one is named, and whose GroupByProvider() hands its models grouped by provider, in catalog order, to a picker of your own; a host that fetches its model list from a gateway implements this interface over that instead.

Name	Type	Description
Models	IReadOnlyList<BitAiModel>	Every known model, deprecated ones included, in the order a picker shows them.
Providers	IReadOnlyList<BitAiProvider>	Every known provider.
DefaultModel	BitAiModel?	The model to select when the user has not chosen one.
FindModel(string modelId)	BitAiModel?	The model of that identifier, or null when it is not in the catalog (BitAiModelCatalog compares ids case-insensitively).
FindProvider(string providerId)	BitAiProvider?	The provider of that identifier, or null when it is not in the catalog.

BitAiModelCapabilities enum

Name	Value	Description
None	0	No declared capabilities.
Streaming	1	Produces output incrementally.
Vision	2	Accepts images as input.
Audio	4	Accepts audio as input.
Tools	8	Can call tools.
StructuredOutput	16	Can be constrained to a JSON schema.
Reasoning	32	Emits visible reasoning before the answer.
Documents	64	Accepts documents such as PDFs as input.
Citations	128	Returns citations for retrieved sources.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component