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";
}

From version 0.6.0, the client provider accepts strings, finite numbers, booleans, null, nested objects, and arrays. It normalizes valid Date values to ISO 8601 strings, including within objects and arrays.

During initialization and context changes, the provider sends structured context using POST with a JSON body. Context containing only strings, numbers, booleans, or dates uses GET query parameters. JSON-looking strings remain strings and do not create nested context.

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(...).