Quick Start

Get started with Solute SDK in just a few steps. Choose your framework below.

Vanilla JavaScript / TypeScript

1. Import and Initialize

import { SoluteClient } from '@solute-ai/sdk';

const solute = new SoluteClient({
  apiKey: 'your_api_key',
  host: 'https://api.solute.dev',
});

2. Track Events

// Track custom events
solute.track('Button Clicked', {
  button_id: 'signup-cta',
  page: '/homepage',
});

// Identify users
solute.identify('user_123', {
  email: 'user@example.com',
  plan: 'premium',
});

// Track page views
solute.page('/pricing');

3. Use Feature Flags

// Check if feature is enabled
if (solute.isFeatureEnabled('new-checkout')) {
  // Show new checkout flow
}

// Get A/B test variant
const variant = solute.getExperimentVariant('pricing-test');
if (variant === 'variant-a') {
  // Show variant A
}

Next.js App Router

1. Wrap Your App with SoluteProvider

Create a client component wrapper:

// components/providers/SoluteProviderWrapper.tsx
'use client';

import { SoluteProvider } from '@solute-ai/sdk/nextjs';

export function SoluteProviderWrapper({ children }) {
  return (
    <SoluteProvider
      config={{
        apiKey: process.env.NEXT_PUBLIC_SOLUTE_API_KEY!,
        host: 'https://api.solute.dev',
        debug: process.env.NODE_ENV === 'development',
      }}
    >
      {children}
    </SoluteProvider>
  );
}

Then use it in your root layout:

// app/layout.tsx
import { SoluteProviderWrapper } from '@/components/providers/SoluteProviderWrapper';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SoluteProviderWrapper>
          {children}
        </SoluteProviderWrapper>
      </body>
    </html>
  );
}

2. Use Hooks in Client Components

// app/components/SignupButton.tsx
'use client';

import { useTrack, useFeatureEnabled } from '@solute-ai/sdk/nextjs';

export function SignupButton() {
  const track = useTrack();
  const showNewDesign = useFeatureEnabled('new-signup-button');

  const handleClick = () => {
    track('Signup Button Clicked', {
      design: showNewDesign ? 'new' : 'old',
    });
  };

  return (
    <button onClick={handleClick}>
      {showNewDesign ? 'Get Started →' : 'Sign Up'}
    </button>
  );
}

3. Server-Side Tracking

// app/page.tsx
import { trackServerEvent, getServerFeatureFlag } from '@solute-ai/sdk/nextjs';

export default async function HomePage() {
  // Track server-side event
  await trackServerEvent(
    {
      apiKey: process.env.SOLUTE_API_KEY!,
      host: 'https://api.solute.dev',
    },
    'Page Viewed',
    { page: '/homepage' }
  );

  // Get feature flag on server
  const showHero = await getServerFeatureFlag(
    {
      apiKey: process.env.SOLUTE_API_KEY!,
      host: 'https://api.solute.dev',
    },
    'new-hero-section',
    false
  );

  return (
    <div>
      {showHero ? <NewHeroSection /> : <OldHeroSection />}
    </div>
  );
}

Environment Variables

Set up your environment variables:

# Client-side (public)
NEXT_PUBLIC_SOLUTE_API_KEY=your_api_key_here
NEXT_PUBLIC_SOLUTE_HOST=https://api.solute.dev

# Server-side (private)
SOLUTE_API_KEY=your_api_key_here
SOLUTE_HOST=https://api.solute.dev

Use NEXT_PUBLIC_ prefix for client-side environment variables in Next.js. Server-side variables don’t need the prefix.

Next Steps

Event Tracking Guide

Learn about tracking events, page views, and user actions

Feature Flags Guide

Set up feature flags and A/B testing

Next.js Integration

Deep dive into Next.js integration

Configuration

Explore all configuration options

Getting Started

Core Features

Framework Integration

Client SDK

React Integration

Server Integration

Backend API

Quick Start

Quick Start

Vanilla JavaScript / TypeScript

1. Import and Initialize

2. Track Events

3. Use Feature Flags

Next.js App Router

1. Wrap Your App with SoluteProvider

2. Use Hooks in Client Components

3. Server-Side Tracking

Environment Variables

Next Steps

Event Tracking Guide

Feature Flags Guide

Next.js Integration

Configuration

​Quick Start

​Vanilla JavaScript / TypeScript

​1. Import and Initialize

​2. Track Events

​3. Use Feature Flags

​Next.js App Router

​1. Wrap Your App with SoluteProvider

​2. Use Hooks in Client Components

​3. Server-Side Tracking

​Environment Variables

​Next Steps

Event Tracking Guide

Feature Flags Guide

Next.js Integration

Configuration

Quick Start

Vanilla JavaScript / TypeScript

1. Import and Initialize

2. Track Events

3. Use Feature Flags

Next.js App Router

1. Wrap Your App with SoluteProvider

2. Use Hooks in Client Components

3. Server-Side Tracking

Environment Variables

Next Steps