Skip to main content

​
SDK Quickstart

​
1. Install dependencies

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

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). 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. 
"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: 
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.