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

# SDK Quickstart

> Get started with Vaultkit—wrap your app with VaultkitProvider, collect feature selections, authenticate providers, and connect tools.

# SDK Quickstart

## 1. Install dependencies

```bash theme={null}
pnpm add @vaultkit/ai-sdk @ai-sdk/openai
```

## 2. Provide Vaultkit credentials

Create environment variables for the required credentials: your Vaultkit API key and the end-user ID. The vault ID is optional—use it only if you have a static vault; otherwise, use dynamic vaults via feature mappings.

```bash theme={null}
# .env.local (Required)
NEXT_PUBLIC_VAULTKIT_API_KEY=your-api-key-here
NEXT_PUBLIC_VAULTKIT_USER_ID=test-user-123

# .env.local (Optional)
NEXT_PUBLIC_VAULTKIT_VAULT_ID=vault_id_if_using_static_vault
```

## 3. Wrap your page with `VaultkitProvider`

```tsx theme={null}
import { VaultkitProvider } from "@vaultkit/ai-sdk";
import DemoPageInner from "./DemoPageInner";

export default function DemoPage() {
  return (
    <VaultkitProvider
      apiKey={process.env.NEXT_PUBLIC_VAULTKIT_API_KEY!}
      userId={process.env.NEXT_PUBLIC_VAULTKIT_USER_ID!}
    >
      <DemoPageInner />
    </VaultkitProvider>
  );
}
```

The provider shares feature, authentication, and vault state across every child component. The SDK connects to Vaultkit automatically using the defaults (no configuration needed).

## 4. Let users pick features and connect providers

Before the UI renders anything meaningful, create at least one **Feature** in the Vaultkit dashboard ([Dashboard → Feature Mappings](https://app.vaultkit.dev/dashboard/features)). Each feature bundles the providers and tools the end user can opt into. For example:

* *Feature*: "Email assistant"
* *Description*: "Monitor and help manage your inbox"
* *Providers*: Gmail, Outlook
* *Permissions / Scopes*: create, read, update, delete

Once the feature is saved, `FeatureSelect` surfaces it to end users, and `AuthComponent` automatically lists the OAuth buttons for the configured providers.

> **Important:** If no feature exists in the dashboard, `FeatureSelect` renders an empty list and `AuthComponent` has nothing to authenticate. Always seed the dashboard first—either manually or by script—before wiring these components into your app.

```tsx theme={null}
"use client";

import {
  FeatureSelect,
  AuthComponent,
} from "@vaultkit/ai-sdk";

export function DemoPageInner() {
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <section className="space-y-6">
        <FeatureSelect />
        <AuthComponent />
      </section>
      {/* Your agent UI lives in the other column */}
    </div>
  );
}
```

> **Note:** `FeatureSelect` and `AuthComponent` assume they are rendered inside a `VaultkitProvider`. If you want standalone components that manage their own provider, import `FeatureSelection` or `VaultkitAuthComponent` instead.

## 5. Connect your agent

Once users have selected features and authenticated providers, use `createVaultkitClient` to connect your agent:

```tsx theme={null}
import { createVaultkitClient, useVaultkit } from "@vaultkit/ai-sdk";

export function MyAgent() {
  const { generatedVaults } = useVaultkit();

  const handleConnect = async () => {
    const activeVault = generatedVaults.find((vault) => vault.is_active);
    if (!activeVault?.generated_vault_id) return;

    const vaultkit = createVaultkitClient({
      apiKey: process.env.NEXT_PUBLIC_VAULTKIT_API_KEY!,
      userId: process.env.NEXT_PUBLIC_VAULTKIT_USER_ID!,
      vaultId: activeVault.generated_vault_id,
    });

    await vaultkit.connect();
    // Now vaultkit.tools is populated and ready to use with your LLM
    return vaultkit.tools;
  };

  return <button onClick={handleConnect}>Connect Agent</button>;
}
```

Pass `vaultkit.tools` to your LLM runtime (Vercel AI SDK, LangChain, etc.) to enable tool calling. For more details, see [SDK Configuration](sdk-configuration).