ProviderPicker

Provider and model selection compound component.

import { ProviderPicker } from "@arlopass/react-ui";

Parts

Name	Element	Purpose
`ProviderPicker.Root`	div	Manages provider/model selection state. Reads from useProviders when uncontrolled.
`ProviderPicker.ProviderSelect`	select	Dropdown for choosing an AI provider.
`ProviderPicker.ModelSelect`	select	Dropdown for choosing a model from the selected provider.
`ProviderPicker.SubmitButton`	button	Confirms the selected provider/model pair.

Uncontrolled usage

Inside a <ArlopassProvider>, ProviderPicker.Root automatically reads from useProviders. No props needed.

import { ArlopassProvider } from "@arlopass/react";
import { ProviderPicker } from "@arlopass/react-ui";

function Picker() {
  return (
    <ArlopassProvider>
      <ProviderPicker.Root>
        <ProviderPicker.ProviderSelect />
        <ProviderPicker.ModelSelect />
        <ProviderPicker.SubmitButton>Connect</ProviderPicker.SubmitButton>
      </ProviderPicker.Root>
    </ArlopassProvider>
  );
}

Controlled usage

Pass props to take full control over the provider list and selection callbacks.

import { useProviders } from "@arlopass/react";
import { ProviderPicker } from "@arlopass/react-ui";

function ControlledPicker() {
  const { providers, selectedProvider, selectProvider, isLoading, error } =
    useProviders();

return (
    <ProviderPicker.Root
      providers={providers}
      selectedProvider={selectedProvider}
      isLoading={isLoading}
      error={error}
      onProviderChange={(id) => console.log("provider:", id)}
      onModelChange={(id) => console.log("model:", id)}
      onSelect={(providerId, modelId) =>
        selectProvider({ providerId, modelId })
      }
    >
      <ProviderPicker.ProviderSelect />
      <ProviderPicker.ModelSelect />
      <ProviderPicker.SubmitButton>Select</ProviderPicker.SubmitButton>
    </ProviderPicker.Root>
  );
}

ProviderPicker.Root — controlled props

Prop	Type	Default	Description
`providers`	`readonly ProviderDescriptor[]`	—	List of available providers and their models.
`selectedProvider`	` { providerId: string; modelId: string }	null`	—
`isLoading`	`boolean`	—	True while fetching providers or selecting.
`error`	`ArlopassSDKError	null`	—
`onProviderChange`	`(providerId: string) => void`	—	Called when the user selects a different provider.
`onModelChange`	`(modelId: string) => void`	—	Called when the user selects a different model.
`onSelect`	`(providerId: string, modelId: string) => void`	—	Called when the user confirms the selection.

Data attributes

Prop	Type	Default	Description
`data-state`	` "ready"	"loading"	"error"`