Render the new UI only for the users who should see it.
Use the useFlag hook to conditionally render components, roll out a redesign gradually, and kill it instantly if something breaks.
JavaScript
Node.js
React
Next.js
Python
RubyMCP SupportWhat are feature flags?
A feature flag is a runtime switch in your code that decides whether a piece of functionality is visible or active, without requiring a new deployment.
Instead of shipping a feature straight to every user the moment it merges, you wrap it in a flag. The code reaches production immediately, but stays off until you decide to turn it on — for one user, a percentage of traffic, or everyone at once.
Six problems a feature flag solves
Deploy continuously
Merge and ship to production every day, and keep unfinished work safely behind a flag instead of a long-lived branch.
Release gradually
Turn a feature on for 5% of traffic first, watch for errors, then widen the rollout instead of flipping a switch for everyone at once.
Beta test with real users
Target specific accounts or user IDs so a handful of people can try a feature before it reaches everyone else.
Disable instantly
If a feature misbehaves in production, turn it off from the dashboard in seconds — no rollback, no redeploy.
Reduce deployment risk
Separate "deployed" from "released." Code can sit in production, inactive, until you decide it is ready.
Ship faster as a team
Multiple engineers can merge into main continuously without waiting on each other's features to be release-ready.
One flag, four states
The same flag key, evaluated with a different user context, can return a different result for every visitor — without a second deployment.
Get the SDK
npm install @flagpilot/javascript @flagpilot/react
From install to your first evaluation
Install the SDK
Add both the core client and the React bindings.
npm install @flagpilot/javascript @flagpilot/react
Wrap your app in a provider
Create one client outside your component tree and pass it to FlagPilotProvider.
const client = new FlagPilot({
clientKey: 'fk_client_xxxx',
environment: 'production'
});
<FlagPilotProvider client={client}>
<App />
</FlagPilotProvider>Evaluate with a hook
Call useFlag() from any component beneath the provider.
const { enabled, loading } = useFlag('beta-payment-gate');Render conditionally
Use the hook's return value directly in your JSX.
if (loading) return <SkeletonLoader />; return enabled ? <StripePaymentV2 /> : <StripePaymentV1 />;
How evaluation works
On startup, the SDK fetches your project's flag configuration once and stores it in an in-memory cache. Every evaluate() call after that reads from the cache, not the network, so checking a flag is effectively free.
The cache refreshes in the background on a polling interval, so a change you make in the dashboard shows up in connected clients within seconds, without blocking any request.
If the API is temporarily unreachable — a network blip, or a cold start before the first fetch completes — evaluation falls back to a safe default instead of throwing, so a flag outage never becomes a feature outage.
Built for React
One hook, no boilerplate
useFlag() returns enabled/loading state directly — no manual subscription or context wiring.
Provider handles initialization
Wrap your app in FlagPilotProvider once; it initializes the client and re-renders consumers automatically.
Consistent across renders
The same user sees the same flag state across re-renders and route changes, based on deterministic hashing.
TypeScript support
Hooks are fully typed, so enabled and loading are inferred without manual generics.
Tiny bundle size
The React bindings add only a thin hook layer on top of the ~10KB JavaScript client.
Browser & server rendering
Use the hooks in Client Components, and evaluate server-side with @flagpilot/next for the same flags during SSR.
Common patterns in React
const { enabled, loading } = useFlag('beta-payment-gate');
if (loading) return <SkeletonLoader />;
return enabled ? <StripePaymentV2 /> : <StripePaymentV1 />;Getting flags right from day one
Never expose secret keys
Secret API keys belong on your server only. Client-side code should use a public client key that can't modify flags.
Use stable user identifiers
Percentage rollouts hash the user ID you pass in. A stable ID means the same user always gets the same result.
Keep flags short-lived
A flag that never gets removed becomes a permanent branch in your code. Treat flags as temporary scaffolding, not config.
Remove stale flags regularly
Once a rollout reaches 100% and stays there, delete the flag and the old code path along with it.
Roll out gradually before going global
It's far cheaper to catch a bug at 5% of traffic than to catch it at 100%.
Use meaningful flag names
A key like new-checkout-flow-v2 is easier to audit six months later than test123.
- Create the FlagPilot client once, outside your component tree, and pass it to a single FlagPilotProvider.
- Render a skeleton or loading state while `loading` is true, instead of assuming the flag is off.
- Use the public client key — never the secret server key — in a React app that ships to browsers.
Feature flags that feel like part of React, not a bolted-on library
Lightweight by default
Every SDK stays under 10KB and evaluates from an in-process cache, so adding flags never becomes a performance conversation.
REST API for everything
Every action available in the dashboard — creating flags, updating rollouts, reading audit history — is also a documented REST endpoint.
A CLI that matches the API
Script flag creation and rollout changes from your terminal or CI pipeline, using the same operations the dashboard performs.
Built for AI-assisted development
A native MCP server lets Cursor, Claude Code, or any MCP-compatible assistant create and toggle flags directly from a prompt.
Dead flag detection included
Flags that haven't been evaluated recently, or have sat at 100%/0% for months, are surfaced automatically instead of silently rotting in your codebase.
Developer experience first
No sales calls, no seat-based pricing negotiations — sign up, get an API key, and evaluate your first flag in the same session.
Fast enough to not think about
Evaluation logic must never slow down your app or disrupt a user flow — here's what that looks like in practice.
Frequently Asked Questions
Ready to ship features safely?
Install FlagPilot in React in under a minute.