For the complete documentation index, see llms.txt. Prefer markdown by appending.mdto documentation URLs or sendingAccept: text/markdown.
Configuration
Choose an OpenFeature provider for extension flags: in-memory for local defaults, or PostHog / GrowthBook for remote rollouts.
The @workspace/flags-extension package wraps OpenFeature providers behind a single client strategy. Swap the active provider by changing the re-exports in packages/flags/extension/src/providers/index.ts, then set any env vars that provider needs.
The default provider is in-memory. You can evaluate Flag.DEMO while developing the extension with no third-party account. Connect PostHog or GrowthBook when you need remote targeting or a dashboard.
Providers
You can configure feature flag providers according to your needs—local development, testing, or advanced remote rollouts. This guide walks you through switching providers and the configuration steps for each option.
Choose the provider that best matches your use case:
- In-memory: Best for fast local development or simple toggles.
- PostHog: Enables remote feature control and audience targeting.
- GrowthBook: Another powerful platform for remote flag management.
Read on to learn how to set up and activate each provider.
Use this for local development and simple toggles that live in code. Flag definitions come from packages/flags/shared/src/in-memory.ts:
export const inMemoryConfig = {
[Flag.DEMO]: {
disabled: false,
variants: {
on: true,
off: false,
},
defaultVariant: "on",
},
} as const;With this config, Flag.DEMO evaluates to true. Flip defaultVariant to "off" to hide the demo banner without changing UI code.
Activate the provider (already the default):
export * from "./in-memory";
export * from "./in-memory/env";No environment variables are required. Customize under packages/flags/extension/src/providers/in-memory.
Reuse your PostHog project
If you already use PostHog for analytics or monitoring, the same VITE_POSTHOG_KEY and host power feature flags.
- Create or open a PostHog project (Cloud or self-hosted).
- Copy the project API key and host from project settings.
- Create a feature flag whose key matches your app constant (for example
demoforFlag.DEMO).
Set the env vars in apps/extension/.env (or .env.local) and your build environment:
VITE_POSTHOG_KEY="your-posthog-api-key"
VITE_POSTHOG_HOST="https://us.i.posthog.com"Activate PostHog as the flags provider:
export * from "./posthog";
export * from "./posthog/env";The extension uses PostHog's web OpenFeature provider with analytics-light init (autocapture and pageviews off, localStorage persistence). That keeps flag evaluation light inside popup and options pages.
Customize under packages/flags/extension/src/providers/posthog.
GrowthBook is a dedicated feature-flag and experimentation platform. Use it when you want rich targeting without tying flags to analytics.
- Create a GrowthBook account (or self-host).
- Create an SDK connection and copy the client key.
- Create a feature whose key matches your app constant (for example
demo).
Set the env vars in apps/extension/.env (or .env.local) and your build environment:
VITE_GROWTHBOOK_CLIENT_KEY="your-growthbook-client-key"
VITE_GROWTHBOOK_API_HOST="https://cdn.growthbook.io"Activate GrowthBook as the flags provider:
export * from "./growthbook";
export * from "./growthbook/env";Evaluation uses @openfeature/growthbook-client-provider. Customize under packages/flags/extension/src/providers/growthbook.
GrowthBook docs
docs.growthbook.io
Flags provider
Hooks need OpenFeature in the React tree. The kit already mounts FlagsProvider from apps/extension/src/lib/providers/flags.tsx inside the shared layout providers. It also syncs the signed-in user into targeting context:
import { useEffect } from "react";
import {
clearContext,
FlagsProvider as Provider,
setContext,
} from "@workspace/flags-extension";
import { authClient } from "~/lib/auth";
export const FlagsProvider = ({ children }: { children: React.ReactNode }) => {
const session = authClient.useSession();
useEffect(() => {
if (session.isPending) {
return;
}
if (session.data?.user) {
const { id, email, name } = session.data.user;
void setContext({ targetingKey: id, email, name });
return;
}
void clearContext();
}, [session]);
return <Provider>{children}</Provider>;
};After that, hooks from @workspace/flags work in options, popup, and other React UI. More detail in Usage.
How is this guide?
Last updated on