SDK Overview
The Databuddy SDK provides framework-specific components, helper functions, and a vanilla JavaScript library for tracking analytics events. Choose your preferred integration method.
SDK Version: 2.0.0+ | Package: @databuddy/sdk | CDN: cdn.databuddy.cc
Installation
# Using bun (recommended)
bun add @databuddy/sdk
# Using npm
npm install @databuddy/sdkFor vanilla JavaScript, no installation needed - load directly from CDN.
Quick Start
Component and hooks for React applications
Component and composables for Vue applications
CDN script for any website without dependencies
Server-side tracking for APIs, webhooks, and background jobs
Core Features
Helper functions: track, flush, getAnonymousId, getTrackingParams
Control feature rollouts and A/B testing in React and Vue
Server-side feature flag evaluation for Node.js
All configuration options across platforms
Looking for AI/LLM observability? Check out the dedicated @databuddy/ai package.
Import Paths
The SDK is organized into submodules for tree-shaking:
| Import | Description |
|---|---|
@databuddy/sdk | Core tracker helpers (track, flush, etc.) |
@databuddy/sdk/react | React component and hooks |
@databuddy/sdk/vue | Vue component and composables |
@databuddy/sdk/node | Node.js server-side SDK |
@databuddy/ai/vercel | AI/LLM observability (separate package) |
Example: React/Next.js
import { Databuddy } from "@databuddy/sdk/react";
import { track } from "@databuddy/sdk";
// In your root layout
export default function RootLayout({ children }) {
return (
<html>
<body>
<Databuddy
clientId={process.env.NEXT_PUBLIC_DATABUDDY_CLIENT_ID!}
trackWebVitals
trackErrors
/>
{children}
</body>
</html>
);
}
// In any component
function SignupButton() {
return (
<button onClick={() => track("signup_clicked", { source: "header" })}>
Sign Up
</button>
);
}Example: Node.js
import { Databuddy } from "@databuddy/sdk/node";
const client = new Databuddy({
clientId: process.env.DATABUDDY_CLIENT_ID!,
enableBatching: true
});
await client.track({
name: "api_call",
properties: { endpoint: "/api/users", method: "GET" }
});
await client.flush(); // Important in serverless!Example: AI/LLM Tracking
import { createTracker } from "@databuddy/ai/vercel";
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
const { track } = createTracker({
apiKey: process.env.DATABUDDY_API_KEY
});
const result = await generateText({
model: track(openai("gpt-4o")),
prompt: "Hello, world!"
});AI/LLM observability is now in a separate package. See the full AI documentation for details.
TypeScript Support
The SDK is fully typed with excellent TypeScript support:
import { track, type DatabuddyTracker } from "@databuddy/sdk";
import type { DatabuddyConfig } from "@databuddy/sdk/react";
import type { CustomEventInput } from "@databuddy/sdk/node";Related Documentation
How is this guide?