ProvidersPane

The agent CLIs of a host and the accounts they sign in with: a list on the left, the picked CLI or account on the right. It is a settings pane, made to sit in the SettingsDialog of @adecore/ui, and it reads the host from the scope it is rendered in.

import { ProvidersPane } from '@adecore/agents-react/providers/ProvidersPane';

import { ProvidersPane } from '@adecore/agents-react/providers/ProvidersPane';
import { AgentDemo } from '../shared/agents.tsx';

export default function ProvidersPaneDemo() {
    return (
        <AgentDemo>
            <div className="flex h-[520px] w-full overflow-hidden rounded-lg border border-border bg-surface">
                <ProvidersPane />
            </div>
        </AgentDemo>
    );
}

A CLI shows its version and what it can do, the model and options a new chat of it starts with, and its accounts. An account shows its state as the CLI reported it, its name, color, folder and environment variables, a way to sign in and a way to remove it. The plus beside a CLI adds an account: in a folder the host makes, or under Advanced in one that exists. A CLI that is not installed is listed under the others without accounts.

The pane needs the scope's accounts, so run watchProviderAccounts(scopeId, transport) for the scope; see Getting started. Signing in runs the CLI's own login through the host's openLogin; without one there is no button. The host checks every save itself and refuses what it does not allow, such as a variable it reserves.

Props

Prop	Type
target	string | null	The searchId of a settings search result; the pane opens on its CLI.
detailOf	(provider: ProviderInfo) => ReactNode | null	A detail of your own for a CLI; null draws the usual one.
defaults	boolean	Shows what a new chat starts with. true by default; pass false when your app decides that elsewhere.

In the settings dialog

settingsSection(section, Pane) makes the entry the dialog takes, with the words read when the dialog draws. PROVIDERS_SECTION is this pane's section and USAGE_SECTION the one of UsagePane.

import { SettingsDialog, useSettingsTarget } from '@adecore/ui/settings';
import { PROVIDERS_SECTION, settingsSection } from '@adecore/agents-react/settings/sections';

function ProvidersSettings() {
    const { target } = useSettingsTarget();
    return <ProvidersPane target={target} />;
}

<SettingsDialog groups={[{ label: null, sections: [settingsSection(PROVIDERS_SECTION, ProvidersSettings)] }]} {...dialogProps} />;

Keep the pane component the same between renders, or its forms start over.

Parts and actions

The detail is made of CliDetail, AccountDetail, AddAccountForm, AccountVariables and AccountColors. The actions they run are exported from providers/account-actions:

• saveAccounts(scope, accounts) sends the whole map and answers false, with a toast, when the host refused. saveAccount(scope, id, account) changes one account in the map the store holds.
• createAccount(scope, kind, label, color) asks the host for an account in a folder it makes, and answers its id.
• linkAccount(scope, id, account) adds an account in a folder that exists.
• removeAccount(scope, id, kind) forgets the account and leaves its folder; a new chat that was to use it goes back to the CLI's default account.

accountsOfKind, accountName, accountStatusLine, mintAccountId and freeAccountColor in agents/accounts, and draftsOf, variablesProblem and variablesOf in providers/variables, are the logic of the forms. providerAbilities(provider) says in words where a CLI opens and whether it reports its status.