This document details the user interface components for managing model configurations across text, image, and function models. The Model Management UI provides a unified interface for adding, editing, testing, enabling/disabling, and deleting model configurations. It bridges the user interface layer with the core model management services.
For information about the underlying model configuration data structures and persistence, see Model Configuration Management. For details on how adapters integrate with LLM providers, see LLM Service and Provider Adapters.
Sources: packages/ui/src/components/ModelManager.vue1-198
The Model Management UI follows a hierarchical component structure with three primary layers:
Sources: packages/ui/src/components/ModelManager.vue1-198 packages/ui/src/components/TextModelManager.vue1-153 packages/ui/src/components/ImageModelManager.vue1-365
The ModelManager component serves as the root modal container, providing a tabbed interface for managing different model types.
| Responsibility | Implementation |
|---|---|
| Modal Display | NModal with card preset at 90vw width (max 1200px) |
| Tab Navigation | NTabs with three tabs: text, image, function |
| Child Coordination | Passes events from child components to parent workspace |
| Service Injection | Provides imageModelManager, imageRegistry, and imageService to descendants |
The component handles two primary events:
models-updated: Emitted when text models change packages/ui/src/components/ModelManager.vue146-150
Tab switching via custom events: Listens for model-manager:set-tab events packages/ui/src/components/ModelManager.vue172-183
Sources: packages/ui/src/components/ModelManager.vue1-198
TextModelManager orchestrates the list display and edit modal for text models. It uses the useTextModelManager composable for all business logic.
| Operation | Entry Point | Manager Method | Final Action |
|---|---|---|---|
| Test Connection | @test event | testConfigConnection(id) | CORS check → API call → toast |
| Edit Model | @edit event | prepareForEdit(id) | Load config → open modal |
| Enable/Disable | @enable/@disable | enableModel(id) / disableModel(id) | Update config → reload |
| Delete | @delete event | deleteModel(id) | Confirm → delete → reload |
| Add New | openAddModal() exposed | prepareForCreate() | Reset form → open modal |
Sources: packages/ui/src/components/TextModelManager.vue1-153
Displays all text model configurations as individual cards with action buttons.
Each card provides the following buttons in the header-extra slot:
Test Connection packages/ui/src/components/TextModelList.vue56-82
Edit packages/ui/src/components/TextModelList.vue84-102
TextModelEditModalEnable/Disable packages/ui/src/components/TextModelList.vue104-145
Delete packages/ui/src/components/TextModelList.vue147-171
The component displays a CORS warning tag when:
model.providerMeta.corsRestricted === true!isRunningInElectron() packages/ui/src/components/TextModelList.vue26-33Sources: packages/ui/src/components/TextModelList.vue1-206
The edit modal provides a comprehensive form for creating or editing text model configurations.
The form generates connection fields dynamically based on the selected provider's connectionSchema packages/ui/src/components/TextModelEditModal.vue41-95:
Field rendering:
NInput (password type for keys)NInputNumberNCheckboxThe connection test validates:
Sources: packages/ui/src/components/TextModelEditModal.vue1-359 packages/ui/src/components/TextModelEditModal.vue269-292
The system implements comprehensive CORS restriction warnings to guide users toward appropriate deployment options.
CORS warnings appear when:
corsRestricted: true packages/core/src/services/llm/types.ts35Example from core types packages/core/src/services/llm/types.ts30-36:
| Location | Component | Trigger |
|---|---|---|
| Model Card Tag | TextModelList | Always visible for CORS-restricted providers in web |
| Connection Test Dialog | TextModelEditModal | Before executing test |
| Image Model Card | ImageModelManager | Same logic for image providers |
When testing a CORS-restricted connection in web environment packages/ui/src/components/TextModelEditModal.vue275-290:
The warning message references the Desktop app as the recommended solution packages/ui/src/components/TextModelEditModal.vue280:
Sources: packages/ui/src/components/TextModelEditModal.vue269-292 packages/ui/src/components/ImageModelEditModal.vue314-335 packages/ui/src/components/TextModelList.vue26-33
Image model management follows a similar pattern to text models but with provider-specific differences.
Unlike text models which have separate list and manager components, ImageModelManager combines both responsibilities packages/ui/src/components/ImageModelManager.vue1-365
Each image model card displays packages/ui/src/components/ImageModelManager.vue12-140:
| Element | Source | Display |
|---|---|---|
| Configuration Name | config.name | Strong text |
| Provider | config.provider.name | Info tag |
| Model | config.model.name | Primary tag |
| CORS Warning | config.provider.corsRestricted | Error tag (web only) |
| Text2Image Capability | config.model.capabilities.text2image | Success tag |
| Image2Image Capability | config.model.capabilities.image2image | Info tag |
| Test Result Thumbnail | testResults[configId].image | 24x24 preview image |
Image model connection testing includes visual feedback with generated thumbnails packages/ui/src/components/ImageModelManager.vue233-305:
Test type selection logic packages/ui/src/components/ImageModelManager.vue196-212:
Sources: packages/ui/src/components/ImageModelManager.vue1-365
The image model edit modal provides configuration for image generation models.
Similar to text models, connection fields are generated from the provider's schema packages/ui/src/components/ImageModelEditModal.vue353-396:
For providers that support dynamic model fetching packages/ui/src/components/ImageModelEditModal.vue446-465:
Both text and image modals use ModelAdvancedSection to manage parameter overrides packages/ui/src/components/ImageModelEditModal.vue160-167:
The section displays parameters based on the selected model's parameterDefinitions array, which varies by provider and model.
Sources: packages/ui/src/components/ImageModelEditModal.vue1-576
Key differences from creation packages/ui/src/components/TextModelManager.vue82-97:
Form Initialization: Loads existing config data
Parameter Merging: Edit mode merges new defaults with existing overrides packages/ui/src/components/TextModelEditModal.vue345-347
Connection Config Preservation: Does not reset connection config when switching providers in edit mode packages/ui/src/components/ImageModelEditModal.vue503-509
Sources: packages/ui/src/components/TextModelManager.vue82-97 packages/ui/src/components/TextModelEditModal.vue305-338
Both text and image model management use dedicated composables that encapsulate business logic:
| Composable | Responsibilities | Provided To |
|---|---|---|
useTextModelManager | Form state, validation, CRUD operations, connection testing | TextModelManager, TextModelEditModal |
useImageModelManager | Form state, provider/model lists, config operations | ImageModelManager, ImageModelEditModal |
The composables maintain reactive form state that's shared between list and edit modal components packages/ui/src/components/TextModelManager.vue36:
This enables:
Sources: packages/ui/src/components/TextModelManager.vue23-36 packages/ui/src/components/ModelManager.vue124-131
The system uses the useToast composable for user feedback:
| Event | Message Type | Trigger |
|---|---|---|
| Model saved | Success | After successful create/update |
| Model deleted | Success | After successful delete |
| Connection test success | Success | Successful API test |
| Connection test failure | Error | Failed API test or CORS error |
| Validation error | Error | Invalid form data |
| Enable/Disable success | Success | State change completed |
Error messages are internationalized using the useI18n composable packages/ui/src/components/TextModelEditModal.vue234:
When CORS errors occur, the system provides specific guidance directing users to the Desktop application packages/ui/src/components/TextModelEditModal.vue280:
Sources: packages/ui/src/components/TextModelEditModal.vue305-338 packages/ui/src/components/ImageModelEditModal.vue476-484
Workspaces access the Model Manager through the application settings:
When models are updated, workspaces receive the modelsUpdated event with the affected model ID, triggering a refresh of their model selection dropdowns.
Refresh this wiki