> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vaultkit.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React Components

> Embed Vaultkit onboarding flows with pre-built React components for feature selection, provider authentication, and connection management.

# 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.

```tsx theme={null}
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:

```tsx theme={null}
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.