Getting Started with Savvagent

Get up and running with Savvagent in less than 5 minutes. This guide will walk you through creating your first feature flag and integrating it into your application.

Step 1: Create an Account

Savvagent uses TOTP-based passwordless authentication for enhanced security. No passwords to remember!

1. Visit savvagent.com/signup
2. Enter your email address and name
3. Scan the QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.)
4. Enter the 6-digit code to verify your device
5. Save your backup recovery codes in a safe place

Step 2: Create an Organization

Organizations are the top-level tenant boundary in Savvagent. Each organization can have multiple applications (web, mobile, API, etc.).

1. After signing up, you'll be prompted to create your first organization
2. Enter your organization name (e.g., "Acme Inc", "My Startup")
3. Click "Create Organization"

Step 3: Add an Application

Applications represent different parts of your system. Each application gets unique SDK keys for secure access.

1. Navigate to the "Applications" page from the sidebar
2. Click "New Application"
3. Enter a name (e.g., "web-app", "mobile-ios", "api-server")
4. Copy your SDK key and server key (you'll need these later)

Step 4: Create Your First Flag

Feature flags control which features are enabled in your application. Let's create a simple boolean flag.

1. Navigate to the "Flags" page
2. Click "New Flag"
3. Enter a flag key (e.g., "new-dashboard", "beta-features")
4. Add a description (e.g., "Enable new dashboard redesign")
5. Configure environment settings (enable for dev, disable for production, etc.)
6. Optionally set percentage rollout or targeting rules
7. Click "Create Flag"

Step 5: Install the SDK

Currently we support JavaScript/TypeScript. More SDKs coming in Phase 2!

JavaScript/TypeScript (NPM)

Step 6: Use the Flag in Your Code

Initialize the SDK and start evaluating flags:

Basic Usage (JavaScript)

import { SavvagentClient } from '@savvagent/client-web';

// Initialize the client
const client = new SavvagentClient({
  sdkKey: 'sdk_1a2b3c4d5e6f7g8h9i0j',
  apiUrl: 'https://api.savvagent.com', // Or your self-hosted URL
  environment: 'production'
});

// Initialize the client (fetches all flags)
await client.initialize();

// Evaluate a flag
const isEnabled = client.isEnabled('new-dashboard', {
  userId: 'user-123',
  attributes: {
    email: 'user@example.com',
    plan: 'pro'
  }
});

if (isEnabled) {
  // Show new dashboard
  console.log('New dashboard enabled!');
} else {
  // Show old dashboard
  console.log('Old dashboard');
}

React Example

import { useState, useEffect } from 'react';
import { SavvagentClient } from '@savvagent/client-web';

const client = new SavvagentClient({
  sdkKey: 'sdk_1a2b3c4d5e6f7g8h9i0j',
  apiUrl: 'https://api.savvagent.com'
});

function App() {
  const [showNewDashboard, setShowNewDashboard] = useState(false);

  useEffect(() => {
    client.initialize().then(() => {
      const enabled = client.isEnabled('new-dashboard', {
        userId: getCurrentUserId()
      });
      setShowNewDashboard(enabled);

      // Listen for real-time updates
      client.on('flagsUpdated', () => {
        const enabled = client.isEnabled('new-dashboard', {
          userId: getCurrentUserId()
        });
        setShowNewDashboard(enabled);
      });
    });
  }, []);

  return (
    <div>
      {showNewDashboard ? <NewDashboard /> : <OldDashboard />}
    </div>
  );
}

Real-time Flag Updates

Savvagent automatically connects to our Server-Sent Events (SSE) endpoint to receive flag updates in real-time. No polling required!

// Subscribe to flag updates
client.on('flagsUpdated', (flags) => {
  console.log('Flags updated:', flags);
  // Re-evaluate your flags
});

// Unsubscribe when done
client.off('flagsUpdated', listener);

Advanced Features

Percentage Rollouts

Gradually roll out features to a percentage of users. Users are "sticky" - they'll always see the same variation.

Targeting Rules

Target specific users, countries, or custom attributes:

const isEnabled = client.isEnabled('premium-features', {
  userId: 'user-123',
  attributes: {
    country: 'US',
    plan: 'enterprise',
    betaTester: true
  }
});

Flag Scheduling

Schedule flags to activate or deactivate automatically at specific times (perfect for time-limited promotions).

AI Error Detection

Savvagent's AI automatically detects when errors correlate with flag changes. Integrate with Sentry to get alerts when your flags cause issues.

Next Steps