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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.