Model selector

Preview Code

375 768 Full

Open

html

<!-- import '@aparte/plugin-model-selector' registers the element; it lists the providers
     your config knows, one group per provider. -->
<aparte-composer placeholder="Ask anything">
  <div class="aparte-composer-shell">
    <div class="aparte-composer-row">
      <aparte-composer-input></aparte-composer-input>
      <aparte-composer-send></aparte-composer-send>
    </div>
    <aparte-composer-toolbar>
      <aparte-model-selector persist searchable></aparte-model-selector>
    </aparte-composer-toolbar>
  </div>
</aparte-composer>

<script>
  const { aparteGlobalConfig } = window.aparte;
  const { createScenarioProvider } = window.apartePlugins.scenario;
  // Stand-ins for real providers (openai-compat, ai-sdk, transformers): only their model lists matter here.
  aparteGlobalConfig.registerAIProvider(
    createScenarioProvider({ id: 'cloud', name: 'Cloud', models: [{ id: 'large', name: 'Large' }, { id: 'fast', name: 'Fast' }] }),
    createScenarioProvider({ id: 'local', name: 'In the browser', models: [{ id: 'small', name: 'Small, offline' }] }),
  );
  aparteGlobalConfig.setModelConfig({ defaultProvider: 'cloud', defaultModel: 'large' });
</script>

<aparte-model-selector> lists the providers your config knows, one group per provider, with the models each one fetches; a provider with no list to fetch, such as the Vercel AI SDK bridge, is left out. With a single provider it is a flat list. With persist, the choice is what the next message is sent to: the pick is written into the config. Without it, the element only sends aparte-model-change, for code of yours to act on.

It is built on core’s select, and it reads the config of the chat it sits in, so two chats on one page each list their own models.

Usage

bash

npm install @aparte/plugin-model-selector @aparte/core

ts

import '@aparte/plugin-model-selector'; // registers the element

Its place is the composer’s toolbar. margin-inline-start: auto pushes it to the end of the row; the four framework wrappers take it through their toolbar slot (see the composer toolbar).

html

<aparte-composer-toolbar>
  <aparte-model-selector auto-select persist searchable style="margin-inline-start: auto"></aparte-model-selector>
</aparte-composer-toolbar>

The plugin types its own element, one subpath per framework, so the tag is checked as soon as you import that subpath once:

Vanilla

Nothing to import: the tag is in HTMLElementTagNameMap once the plugin is imported, and aparte-model-change is typed through HTMLElementEventMap.

html

<aparte-model-selector persist searchable placeholder="Pick a model"></aparte-model-selector>

React

ts

import '@aparte/plugin-model-selector/react';

tsx

<aparte-model-selector persist="" searchable="" placeholder="Pick a model" />

Vue

ts

import '@aparte/plugin-model-selector/vue';

vue

<aparte-model-selector persist="" searchable="" placeholder="Pick a model" />

Svelte

ts

import '@aparte/plugin-model-selector/svelte';

svelte

<aparte-model-selector persist="" searchable="" placeholder="Pick a model" />

Angular

A directive, because Angular’s template compiler needs a class claiming the selector to turn [persist] into a real binding.

ts

import { AparteModelSelectorDirective } from '@aparte/plugin-model-selector/angular';
// @Component({ imports: [AparteModelSelectorDirective], … })

html

<aparte-model-selector [persist]="true" [searchable]="true" (modelChange)="use($event.modelId)" />

Outside Angular, a presence attribute is '' to set and null to remove, never false (the rule). The framework packages are optional peer dependencies: you carry only the one you use.

Customize

The list loads asynchronously, so for a moment the chat can be mounted with no model chosen. To keep the composer from sending until one is:

ts

import { aparteGlobalConfig } from '@aparte/core';

aparteGlobalConfig.setRequireModelSelection(true);

The composer greys out and comes back once auto-select, or the reader, picks a model.

API

<aparte-model-selector> · class AparteModelSelector

Attributes

Attribute	Description
persist	Writes the selection back through the config, so it survives a reload.
auto-select	Selects the first model as soon as one is available.
searchable	Adds the dropdown’s filter field.
placeholder	Overrides the text shown while nothing is selected.
disabled	Disables the picker. Inside an <aparte-composer> it also follows the composer’s own disabled, so a disabled composer does not leave its model picker operable.

Properties

Property	Type	Description
providerId (readonly)	string | null	Current provider ID.
modelId (readonly)	string | null	Current model ID.

Methods

Method	Description
aparteConfigChanged(next: AparteConfig): void	The boundary above us appeared or changed: move the subscription and reload, because a different config means different providers and a different selection. See AparteConfigAware. The element’s own per-instance tests passed before this existed only because they mount the boundary FIRST — the one ordering no wrapper produces.
setSelection(providerId: string, modelId: string): void	Programmatically set the selection.

Events

Event	Type	Description
aparte-model-change	CustomEvent<AparteModelChangeEventDetail>	The provider or the model changed; carries both ids.

Accessibility

• The button is named by its placeholder and the current model, and opens a list box; searchable adds a filter field.
• Providers are option groups, so a screen reader names the provider of each model.

Related

• Approval mode — the other switch that lives in the toolbar.
• Composer — the toolbar it sits in.
• Select — the control it is built on.