Skip to main content

​
React Components

The @vaultkit/ai-sdk package exports three core components for managing the user onboarding flow:
ComponentPurpose
FeatureSelectLists feature mappings and lets users toggle providers/scopes.
AuthComponentLaunches provider OAuth flows and shows connection status.
VaultkitProviderShares vault, feature, and connection state.
These “inner” components assume they live inside a VaultkitProvider. If you prefer self-contained widgets that instantiate their own provider, use the top-level wrappers: FeatureSelection, VaultkitAuthComponent, and VaultkitConnectionManager.

​
Self-contained components

If you are not already inside a VaultkitProvider, import the outer components—they create their own provider internally. 
import {
  FeatureSelection,
  VaultkitAuthComponent,
  VaultkitConnectionManager,
} from "@vaultkit/ai-sdk/client-components";

export function SettingsPage({ apiKey, userId }: Props) {
  return (
    <div className="space-y-8">
      <FeatureSelection apiKey={apiKey} userId={userId} showAllFeatures />
      <VaultkitAuthComponent apiKey={apiKey} userId={userId} compact />
      <VaultkitConnectionManager
        apiKey={apiKey}
        userId={userId}
        onConnectionsChange={(connections) => console.table(connections)}
      />
    </div>
  );
}
Both approaches hit the same Vaultkit endpoints; choose the one that fits your architecture.

​
FeatureSelection props

PropTypeDefaultDescription
apiKeystring—Required Vaultkit API key for the current workspace.
userIdstring—Identifies the end user whose selections should be stored.
organizationIdstring—Optional organization/workspace identifier used when your accounts span multiple tenants.
baseUrlstring"https://app.vaultkit.dev"Override when pointing at a different Vaultkit environment.
featureMappingIdstring—Locks the UI to a single feature instead of showing the full catalog.
showAllFeaturesbooleantrueWhen false, hides inactive features from the list.
classNamestring—Applies a custom class to the outer wrapper for additional styling.
styleReact.CSSProperties—Inline style overrides for the outer wrapper.
titlestring"Choose the features you want to enable"Heading text shown above the feature list.
subtitlestring"Authorize the services for the features"Supporting copy beneath the heading.
theme'light' | 'dark' | 'auto'"auto"Forces light/dark styling or syncs to the user’s prefers-color-scheme setting.

​
Reading selections and connections

useVaultkit() exposes everything the UI components collect: 
import { useVaultkit } from "@vaultkit/ai-sdk";

function Summary() {
  const { selectedFeatures, featureProviders, connections } = useVaultkit();

  return (
    <pre>
      {JSON.stringify({ selectedFeatures: Array.from(selectedFeatures), featureProviders, connections }, null, 2)}
    </pre>
  );
}
Use these helpers to pass selectedProviders/selectedScopes into createVaultkitClient before your agent connects.