@aparte/plugin-model-selector

A provider + model selector web component for aparté. Renders an <aparte-select> with each registered AI provider grouped into an <aparte-optgroup> (a single provider renders a flat list), for the BYOK (Bring Your Own Key) pattern.

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

import '@aparte/plugin-model-selector'; // registers <aparte-model-selector>

<aparte-model-selector auto-select persist searchable></aparte-model-selector>

@aparte/core is the only required peer dependency. Importing the package registers the <aparte-model-selector> element as a side effect.

Typed in your framework

The element is typed by this package rather than by the framework wrappers, through one subpath per framework — so you get the binding exactly when you have the plugin:

import '@aparte/plugin-model-selector/react';   // or /vue, or /svelte — types only, no runtime

// Angular needs a class claiming the selector, so it gets a directive:
import { AparteModelSelectorDirective } from '@aparte/plugin-model-selector/angular';

react, vue, svelte and @angular/core are optional peers.

| Attribute | Effect | |---------------|-----------------------------------------------------------| | auto-select | Select the first available model on mount | | persist | Write the selection back to the resolved config | | searchable | Enable search in the dropdown | | placeholder | Override the placeholder text (else the active locale) |

Fires aparte-model-change ({ providerId, modelId, previousProviderId, previousModelId }) when the selection changes. It reads providers from the nearest instance config (attachConfig), falling back to aparteGlobalConfig.

ESM-only. Part of the aparté monorepo.