React Components

The @vaultkit/ai-sdk package exports three core components for managing the user onboarding flow:

Component	Purpose
`FeatureSelect`	Lists feature mappings and lets users toggle providers/scopes.
`AuthComponent`	Launches provider OAuth flows and shows connection status.
`VaultkitProvider`	Shares 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

Prop	Type	Default	Description
`apiKey`	`string`	—	Required Vaultkit API key for the current workspace.
`userId`	`string`	—	Identifies the end user whose selections should be stored.
`organizationId`	`string`	—	Optional organization/workspace identifier used when your accounts span multiple tenants.
`baseUrl`	`string`	`"https://app.vaultkit.dev"`	Override when pointing at a different Vaultkit environment.
`featureMappingId`	`string`	—	Locks the UI to a single feature instead of showing the full catalog.
`showAllFeatures`	`boolean`	`true`	When false, hides inactive features from the list.
`className`	`string`	—	Applies a custom class to the outer wrapper for additional styling.
`style`	`React.CSSProperties`	—	Inline style overrides for the outer wrapper.
`title`	`string`	`"Choose the features you want to enable"`	Heading text shown above the feature list.
`subtitle`	`string`	`"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.

Overview

Welcome

Vaultkit SDK

React Components

React Components

Self-contained components

`FeatureSelection` props

Reading selections and connections

​React Components

​Self-contained components

​FeatureSelection props

​Reading selections and connections

React Components

Self-contained components

`FeatureSelection` props

Reading selections and connections