Feature Flags & A/B Testing

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

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

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

// Get the flag value (can be boolean, string, number, or object)
const flagValue = solute.getFeatureFlag('new-checkout-flow');

if (flagValue === true) {
  // Feature is enabled
}

// With default value
const flagValue = solute.getFeatureFlag('new-checkout-flow', {
  defaultValue: false,
});

// Get typed flag value
const config = solute.getFeatureFlag<{
  theme: string;
  layout: string;
}>('checkout-config', {
  defaultValue: { theme: 'light', layout: 'standard' },
});

// Use the config
if (config) {
  console.log(config.theme); // TypeScript knows the type
}

// Get the variant for an A/B test
const variant = solute.getExperimentVariant('pricing-test');

if (variant === 'variant-a') {
  // Show variant A
} else if (variant === 'variant-b') {
  // Show variant B
} else {
  // Show control/default
}

// With default value
const variant = solute.getExperimentVariant('pricing-test', {
  defaultValue: 'control',
});

const variant = solute.getExperimentVariant('pricing-page-test');

switch (variant) {
  case 'variant-a':
    // Show new pricing layout
    renderNewPricingLayout();
    break;
  case 'variant-b':
    // Show alternative pricing layout
    renderAlternativePricingLayout();
    break;
  default:
    // Show original pricing layout
    renderOriginalPricingLayout();
}

// Get all feature flags at once
const allFlags = solute.getAllFlags();

// Access individual flags
if (allFlags['new-checkout-flow']?.enabled) {
  // Feature is enabled
}

// Get experiment variant from all flags
const experiment = allFlags['pricing-test'];
if (experiment?.variant === 'variant-a') {
  // Show variant A
}

// Reload all flags
await solute.reloadFeatureFlags();

// Reload with updated user properties (for targeting)
await solute.reloadFeatureFlags({
  plan: 'premium',
  country: 'US',
});

'use client';

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

export function CheckoutButton() {
  const showNewCheckout = useFeatureEnabled('new-checkout-flow');
  const pricingVariant = useExperiment('pricing-test');
  const config = useFeatureFlag<{ theme: string }>('checkout-config');

  return (
    <div>
      {showNewCheckout ? (
        <NewCheckoutButton theme={config?.theme} />
      ) : (
        <OldCheckoutButton />
      )}
      
      {pricingVariant === 'variant-a' && (
        <SpecialOffer />
      )}
    </div>
  );
}

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

export default async function HomePage() {
  // Check feature flag on server
  const showHero = await isServerFeatureEnabled(
    {
      apiKey: process.env.SOLUTE_API_KEY!,
      host: 'https://api.solute.dev',
    },
    'new-hero-section',
    false
  );

  // Get feature flag value
  const heroConfig = await getServerFeatureFlag(
    {
      apiKey: process.env.SOLUTE_API_KEY!,
      host: 'https://api.solute.dev',
    },
    'hero-config',
    { theme: 'default' }
  );

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

// Identify user with properties
solute.identify('user_123', {
  plan: 'premium',
  country: 'US',
  beta_tester: true,
});

// Flags will be evaluated based on these properties
const flag = solute.getFeatureFlag('premium-feature');