Feature Flags

Shipping code and releasing features don’t have to happen at the same time. Push new functionality behind a flag, then flip it on from the Tribe dashboard whenever you’re ready. No redeployment, no code changes.

With Agents

Install the Tribe skill in Claude Code, Codex, or any AI coding agent, then just ask:

/tribe Add feature flags to my app using Tribe to conditionally show a new checkout flow

Copy

The agent will generate all the code for you, tailored to your stack.

How it works

1. Create feature flags in the Tribe dashboard under your site’s Feature Flags section
2. Check flag values in your app with getFeatureFlag()
3. Toggle flags on/off from the dashboard whenever you want

Check a feature flag

import { Tribe } from "@tribecloud/sdk";

const enabled = await tribe.getFeatureFlag("new-checkout");
// Returns: boolean (false if the flag doesn't exist)

Conditional rendering

React

function useFeatureFlag(key) {
  const [enabled, setEnabled] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    tribe.getFeatureFlag(key).then((value) => {
      setEnabled(value);
      setLoading(false);
    });
  }, [key]);

  return { enabled, loading };
}

// Usage
function App() {
  const { enabled: showNewCheckout, loading } = useFeatureFlag("new-checkout");

  if (loading) return null;

  return showNewCheckout ? <NewCheckout /> : <OldCheckout />;
}

Vanilla JS

<div id="checkout-old">Old checkout</div>
<div id="checkout-new" style="display: none">New checkout</div>

<script src="https://api.tribe.utopian.build/sdk.js?site=YOUR_SITE_ID" defer></script>
<script defer>
  window.addEventListener("DOMContentLoaded", async () => {
    const showNew = await Tribe.getFeatureFlag("new-checkout");
    if (showNew) {
      document.getElementById("checkout-old").style.display = "none";
      document.getElementById("checkout-new").style.display = "block";
    }
  });
</script>

Use cases

• Gradual rollouts let you enable a feature for internal testing first, then open it up to everyone once you’re confident it works
• Kill switches give you a way to instantly disable something broken without touching your deployment pipeline
• A/B testing becomes straightforward when different UI variations are just a flag check away
• Beta features can stay hidden behind a flag so only early access users see them

Tips

• Flag keys should follow lowercase-with-hyphens naming: new-checkout, dark-mode, beta-export
• getFeatureFlag() returns false for any flag that doesn’t exist, so unknown flags are safely off by default
• Flags are fetched from the server on each call. If you’re checking the same flag multiple times on a single page, consider caching the result locally