How to Implement Feature Flags with Claude Code

What Are Feature Flags?

Feature flags let you toggle features on and off even after the code has been deployed. They’re essential for staged rollouts and A/B testing, and with Claude Code, you can build a robust implementation quickly.

A Basic Feature Flag System

> Build a feature flag management system in TypeScript.
> Support conditional flags based on user attributes.

type FlagValue = boolean | string | number;

interface FlagRule {
  conditions: Record<string, any>;
  value: FlagValue;
}

interface FeatureFlag {
  key: string;
  defaultValue: FlagValue;
  description: string;
  rules: FlagRule[];
  enabled: boolean;
}

class FeatureFlagManager {
  private flags: Map<string, FeatureFlag> = new Map();

  register(flag: FeatureFlag) {
    this.flags.set(flag.key, flag);
  }

  evaluate(key: string, context: Record<string, any> = {}): FlagValue {
    const flag = this.flags.get(key);
    if (!flag || !flag.enabled) return flag?.defaultValue ?? false;

    for (const rule of flag.rules) {
      if (this.matchConditions(rule.conditions, context)) {
        return rule.value;
      }
    }
    return flag.defaultValue;
  }

  private matchConditions(conditions: Record<string, any>, context: Record<string, any>): boolean {
    return Object.entries(conditions).every(([key, value]) => {
      if (Array.isArray(value)) return value.includes(context[key]);
      return context[key] === value;
    });
  }

  isEnabled(key: string, context?: Record<string, any>): boolean {
    return Boolean(this.evaluate(key, context));
  }
}

A Hook for React

> Create a custom hook for using feature flags in React components.

import { createContext, useContext, ReactNode } from 'react';

const FlagContext = createContext<FeatureFlagManager | null>(null);

export function FlagProvider({ manager, children }: { manager: FeatureFlagManager; children: ReactNode }) {
  return <FlagContext.Provider value={manager}>{children}</FlagContext.Provider>;
}

export function useFeatureFlag(key: string, context?: Record<string, any>): boolean {
  const manager = useContext(FlagContext);
  if (!manager) throw new Error('FlagProvider is required');
  return manager.isEnabled(key, context);
}

// Usage example
function NewDashboard() {
  const showNewUI = useFeatureFlag('new-dashboard', { userId: currentUser.id });

  if (showNewUI) {
    return <ModernDashboard />;
  }
  return <LegacyDashboard />;
}

Percentage Rollout

You can also implement a staged rollout that exposes a feature to only a certain percentage of users.

function percentageRollout(userId: string, percentage: number): boolean {
  const hash = Array.from(userId).reduce((acc, char) => {
    return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
  }, 0);
  return Math.abs(hash % 100) < percentage;
}

// Set the percentage when registering the flag
flagManager.register({
  key: 'new-checkout',
  defaultValue: false,
  description: 'New checkout flow',
  enabled: true,
  rules: [{
    conditions: { rolloutPercentage: 20 },
    value: true,
  }],
});

Flag Management Admin

To simplify operations, you can also build an API for managing flag state.

import express from 'express';

const router = express.Router();

router.get('/api/flags', (req, res) => {
  const flags = Array.from(flagManager.getAllFlags()).map(([key, flag]) => ({
    key,
    enabled: flag.enabled,
    description: flag.description,
  }));
  res.json(flags);
});

router.patch('/api/flags/:key', (req, res) => {
  const { enabled } = req.body;
  flagManager.setEnabled(req.params.key, enabled);
  res.json({ success: true });
});

Summary

Introducing feature flags enables safe, staged rollouts and risk reduction. With Claude Code, you can generate the conditional logic, React hooks, and management APIs all in one coherent effort. For combining with A/B testing, see the A/B testing implementation guide, and for state management design, see the state management article.

For more on feature flag design patterns, see Martin Fowler - Feature Toggles.