TypeScript Client SDK

The FlagshipClientProvider implements the OpenFeature web provider interface for browser applications. It pre-fetches a declared set of flag values on initialization and resolves evaluations synchronously from an in-memory cache.

This makes the provider suitable for client-side rendering where synchronous access to flag values is required.

prefetchFlags is a required array of flag keys that the provider fetches during initialization and on every context change. Only flags listed in this array are available for synchronous evaluation — any flag key not included returns a FLAG_NOT_FOUND error at resolution time.

Fetch behavior:

• On initialization — all flags in prefetchFlags are fetched in parallel and stored in an in-memory cache. The provider transitions to READY once all fetches complete (individual failures are non-fatal).
• On context change — the cache is invalidated and all flags are re-fetched for the new context. This is required by the static context paradigm ↗ used by the OpenFeature web SDK, where context is set globally and providers are expected to re-evaluate when it changes.
• At resolution time — evaluations are served synchronously from the cache. No network request is made during getBooleanValue, getStringValue, etc.

The following example initializes the provider with a set of pre-fetched flags and evaluates them in a browser application.

import { OpenFeature } from "@openfeature/web-sdk";
import { FlagshipClientProvider } from "@cloudflare/flagship/web";

await OpenFeature.setProviderAndWait(
	new FlagshipClientProvider({
		appId: "<APP_ID>",
		accountId: "<ACCOUNT_ID>",
		authToken: "<API_TOKEN>",
		prefetchFlags: ["promo-banner", "dark-mode", "max-uploads"],
	}),
);

// Set evaluation context globally. The provider re-fetches all prefetchFlags
// whenever the context changes.
await OpenFeature.setContext({ targetingKey: "user-42", plan: "enterprise" });

const client = OpenFeature.getClient();

// Synchronous — served from the in-memory cache.
const showBanner = client.getBooleanValue("promo-banner", false);

if (showBanner) {
	document.getElementById("banner").style.display = "block";
}

import { OpenFeature } from "@openfeature/web-sdk";
import { FlagshipClientProvider } from "@cloudflare/flagship/web";

await OpenFeature.setProviderAndWait(
	new FlagshipClientProvider({
		appId: "<APP_ID>",
		accountId: "<ACCOUNT_ID>",
		authToken: "<API_TOKEN>",
		prefetchFlags: ["promo-banner", "dark-mode", "max-uploads"],
	}),
);

// Set evaluation context globally. The provider re-fetches all prefetchFlags
// whenever the context changes.
await OpenFeature.setContext({ targetingKey: "user-42", plan: "enterprise" });

const client = OpenFeature.getClient();

// Synchronous — served from the in-memory cache.
const showBanner = client.getBooleanValue("promo-banner", false);

if (showBanner) {
	document.getElementById("banner").style.display = "block";
}

Use the client provider in browser applications, single-page apps, or any client-side JavaScript environment.

Evaluations are synchronous, so they do not block rendering. Flag values are fetched once during initialization and re-fetched whenever the evaluation context changes. To force a refresh, update the context via OpenFeature.setContext(...).