Add Custom Model Dialog

v0.1.5

Modal dialog for creating or editing a custom AI model. Supports provider selection, dynamic provider fields, advanced options (max tokens, temperature, temperature policy), connection testing, and create/update actions.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/addmodels-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/select, @signalos/form-dialog, @signalos/text-field) into your app - you own the copy. Requires access.

usage

// after: npx shadcn@latest add @signalos/addmodels-01
// mount the pulled page in a route, e.g. src/app/reusable-components/page.tsx
import { CustomModelDialog } from "@/components/blocks/addmodels-01/CustomModelDialog"

export default function Page() {
  return <CustomModelDialog />
}

Props

ProviderField

Prop	Type	Default	Description
key*	`string`	-
label*	`string`	-	Human-readable label shown above the input.
required*	`boolean`	-
secret*	`boolean`	-	When true, the input renders as a password field.
type*	`ProviderFieldType`	-
placeholder	`string \| undefined`	-

CustomModelProvider

Prop	Type	Default	Description
provider_kind*	`CustomModelProviderKind`	-
label*	`string`	-	Display name shown in the provider select.
package*	`string`	-
installed*	`boolean`	-	False when the server-side package is not installed — row is disabled.
temperature_max*	`number`	-
fields*	`ProviderField[]`	-

CustomModelDialogProps

Prop	Type	Default	Description
customModelDialogOpen	`boolean \| undefined`	-	Whether the dialog is open.
onCustomModelDialogOpenChange	`((open: boolean) => void) \| undefined`	-	Called when the dialog requests to open or close.
editingModel	`boolean \| undefined`	-	True when editing an existing model; false/undefined for create mode.
editingModelHasStoredSecrets	`boolean \| undefined`	false	True when the model being edited already has a stored API key.
isSavingModel*	`boolean`	-	True while the save mutation is in-flight.
onCustomModelSave	`(() => void) \| undefined`	-	Called when the user confirms the create/update action.
providers	`CustomModelProvider[] \| undefined`	-	Available providers to populate the provider select.
isLoadingProviders	`boolean \| undefined`	-	True while the provider list is loading.
modelName*	`string`	-	Current value of the model name field.
providerKind*	`"" \| CustomModelProviderKind`	-	Currently selected provider kind, or empty string when none selected.
fields*	`CustomModelFields`	-	Dynamic field values keyed by {@link ProviderField.key}.
selectedProvider	`CustomModelProvider \| undefined`	-	The resolved provider object for the selected `providerKind`.
isProviderMissing*	`boolean`	-	True when the chosen provider's server-side package is not installed.
isTesting*	`boolean`	-	True while a connection test is running.
isTestSuccess	`boolean \| undefined`	-	True once a test has passed for the current form state.
testFeedback	`{ ok: boolean; message: string; } \| null \| undefined`	-	Feedback from the most recent connection test.
canTest*	`boolean`	-	True when the form has enough data to attempt a connection test.
onNameChange*	`(value: string) => void`	-	Called when the model name input changes.
onProviderChange*	`(value: CustomModelProviderKind) => void`	-	Called when the provider select changes.
onFieldChange*	`(key: string, value: string) => void`	-	Called when any dynamic provider field changes.
onTest*	`() => void`	-	Called when the user clicks "Test Connection".
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.

Supporting types

export type CustomModelProviderKind =
  | "openai_compatible"
  | "azure_openai"
  | "bedrock"
  | "vertex"
  | "openai"
  | "anthropic"
  | "google_genai"
  | "groq"
  | "mistral"
  | "deepseek"

export type ProviderFieldType = "text" | "url" | "textarea" | "keyvalue"

export type CustomModelFields = Record<string, string>

More Reusable Components variants

Add Connection Modal Create Pipeline Wizard

Changelog

addmodels-01

0.1.5

format the code

0.1.4

No code changes; version bumped to satisfy content-hash check after initial registration.

0.1.0

Initial release: modal dialog for creating or editing a custom AI model. Includes provider select, dynamic provider fields, advanced options (max tokens, temperature, temperature policy), connection test, and create/update action.