Skip to main content
The tutorial consists of the following steps:
  1. Create a client for the website so that it can resolve flags.
  2. Create a flag for the header design, and define its schema.
  3. Use the flag in the website to control the header.
  4. Create variants of the header.
  5. Force a variant for a user to test a specific variant.
  6. Test resolving the flag with an evaluation context.
This page targets the following audience:
  • Anyone who wants to set up a flag and understand how to use it.
Before you begin: This video gives a quick overview of how feature flags work in 2 minutes and 10 seconds.
Use this guide to set up a flag that you resolve, but without changing anything in your code. This way, you can use the traffic the flag receives to set up and run A/B tests or rollouts using the A/B test quickstart or the rollout quickstart. Since the resolved flag value isn’t used in your code, nothing changes for your users.
You can also configure flags using natural language with Confidence MCP servers. MCP lets you create flags, add variants, set up targeting rules, and test resolution directly from Claude Code, Cursor, or VS Code.

​
Choose a Resolution Method That Fits Your Application

You can resolve a Confidence feature flag in two ways: by using Confidence’s managed resolver or hosting your own local resolver. Read more about the resolution options in the documentation.

​
Create a Client

You must associate all feature flags with at least one client. A client can, for example, be a backend service or a website. Clients use flags to deliver different user experiences. To resolve flags, a client must authenticate with Confidence using client credentials.
Confidence includes a default client that has the same name as your Confidence account. You can use this client, or create a more specific one for web feature flags in this quickstart.
Follow these steps to create a client:
1

Go to the Clients page

You can find it under the Admin section in the sidebar in Confidence.
2

Click Create and name the client

Name the client Web client (unless it already exists).
3

Click Create credential

You have now created a web client, and created the associated client credentials. These credentials are later used to resolve the flag.

​
Create a Flag

Flags let Confidence control the behavior of your application. For example, use a flag to control which machine learning model serves a recommendation, the number and size of tiles on a page, or a call to action message and its position on a sign-up page. For this tutorial, create a flag that controls the color and size of a header. To create the flag, follow these steps.
1

Go to Confidence

Select Flags on the left sidebar.
2

Click + Create to create a new flag

3

Name the flag header-redesign

4

Select Web client in the clients dialog

Or select the client with the same name as your account.
In the last step, you associated the flag with a specific client. This means only that client can resolve the header-redesign flag. Limiting which flags are available to which clients is valuable for several reasons. For example, it prevents exposing flags to clients that run in uncontrolled environments such as mobile apps or server-side web apps. It also saves resources when resolving flags in batch (for example, at app start) by restricting resolution to only the relevant flags. Next, you define the schema of the flag. The value of a flag is not just a single value, but rather a key-value map of properties. To avoid errors and make flags easier to work with, Confidence requires you to define a schema for the flag value. The schema describe the shape of the flag value, by defining properties and their data types. In this tutorial, your flag controls the design of a header on a website. The design consists of color and size, so your flag needs to set two properties: color and size.
1

Click the edit schema button

Click the edit schema button (pencil icon) next to the Variants heading.
2

Click Add property and select string

3

Name the property color

4

Click Add property and select int

5

Name the property size

You can configure or edit your schema by opening it on the right sidebar. Now that you defined the schema, you can create variants that have specific values for the color and size properties.

​
Create Variants

The two variants you want to create for the header redesign are black with size 14, and blue with size 16. To do that, follow these steps.
1

Click + Create variant and name it default-style

2

Enter values for the default style

Enter black as the value for color, and 14 as the value for size.
3

Click Save

4

Click + Create variant and name it new-style

5

Enter values for the new style

Enter blue as the value for color, and 16 as the size.
The two variants are now created, but they’re not yet reaching any user. To test your flag, use an individual targeting rule next.

​
Use the Flag

When resolving a flag into a value, you specify a default value. This default value applies if a user doesn’t match or isn’t assigned by a rule. The following sections show how to integrate the Confidence SDKs and set the default value for our header-redesign flag to color green and size 10.

​
Install Dependencies

You first need to install the necessary dependencies. 
yarn add @openfeature/web-sdk @spotify-confidence/openfeature-web-provider

​
Initialize Confidence

With dependencies installed, you can now create a Confidence provider for your platform and connect it to the OpenFeature SDK. You only need to do this once, preferably on app startup. 
import { OpenFeature } from '@openfeature/web-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';

const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
  timeout: 3000,
});

// Set the context that is relevant for your flag, like the user ID.
OpenFeature.setContext({
  user_id: 'user-test-id',
  plan: 'premium'
});

try {
  await OpenFeature.setProviderAndWait(provider);
} catch (error) {
  console.error('Failed to initialize Confidence provider:', error);
}

​
Access the Flag

You can access the flag and its values using dot notation for nested properties. 
const client = OpenFeature.getClient();

// value of header-redesign is { size: <some int>, color: <some string>}
const size = client.getNumberValue('header-redesign.size', 10);
const color = client.getStringValue('header-redesign.color', 'blue');
The code snippets above set two fields in the context: the user_id and the plan this user is on, in this case premium. You can use the plan field in the context to create targeted rules. For example, with this information in the evaluation context, an A/B test can include only users on the premium plan as its target audience. This video gives a quick overview how targeting and evaluation contexts work in 2 minutes and 10 seconds.
If you were to run the code above you would only get the default values for the flag. Nothing tells the client that it should return any other value. To do so, you need to create flag variants and a rule that returns a variant.

​
Force a Variant For a User

To try out a variant, you can force it for a user with a specific user ID. You do this by creating an individual targeting rule on the flag. Individual targeting rules let you target specific attribute values, such as a list of user IDs. For example, you can add the identifiers of your team members so only your team can test the new experience in its early stages. To create an individual targeting rule, follow these steps.
1

Click + Create rule and select Individual targeting

2

Select new-style as the variant

3

Enter user_id as the attribute

4

Type in user-test-id in the Values section and hit enter

5

Click Save

6

Enable the rule

Click the toggle on the rule card to enable it.
If you re-run the code that fetches the flag value you now see that the flag resolves to a value other than the default.

​
Force all Variant For 50% of Employees

You can create a conditional targeting rule with a targeting audience that includes a subset of the users in that audience. For example, you can create a conditional targeting rule that targets 50% of the users in the "plan": "employee" audience. This way, provided that all employees have their plan set to employee, you can test the new experience on a subset of your colleagues. On the flag page
1

Click + Create rule and select Conditional targeting

2

Select new-style as the variant

3

Add attribute criterion

In the audience section, click Add attribute criterion and write plan as field name with type string and click Add.
4

Set the inclusion rule to be plan is employee

5

Enter user_id as the randomization unit

6

Set the allocation to 50%

7

Click Save

8

Enable the rule

Click the toggle on the rule card to enable it.
Since you now have two rules, the rules evaluate in the order of the list on the flag page. If a user is eligible for the first rule, it returns a variant for the user. If not, Confidence evaluates if the user is eligible for the second rule. In this case, since only the user with ID user-test-id is eligible for the individual targeting rule, Confidence evaluates eligibility for the second rule for everyone else. The second rule, in turn, only targets users on the employee plan. Change the priority of the rules by dragging the rule cards into the desired order and clicking save.

​
Resolve Tester

Use the Resolve tester to see if the rule you expect returns a variant. In the Resolve tester, you give an evaluation context and see which rules match and which don’t, together with the reasons why. On the page of your flag, select Test rules at the top of the list of rules. Click Add evaluation context and give the context you want to test to resolve. If you for example have created an individual targeting rule for the user with ID user-test-id to the new-style variant, you can test that the rule matches by adding the user_id field with the value user-test-id to the evaluation context. Click Resolve to confirm that the individual targeting rule succeeds and returns the new-style variant. Most of the SDKs also output log messages that redirect you to the resolve tester specifically for the flag evaluation that the SDK performed. The link has a message with the prefix:
See resolves for <flagName> in Confidence:
To share a specific test run with someone, copy the URL and send it as a link. The link directs them to the Resolve tester with all context data preserved.

​
Alternative: Configure Flags with AI

You can perform all the steps in this tutorial using natural language prompts with an AI assistant. Confidence provides MCP (Model Context Protocol) servers that integrate with Claude Code, Cursor, and VS Code. For setup instructions, see the MCP quickstart. Once configured, here are the prompts for each step in this tutorial (note: create your client in the UI first):
StepExample Prompt
Create a flagCreate a flag called "header-redesign" with a string property "color" and an integer property "size"
Add variantsAdd a variant "default-style" to header-redesign with color "black" and size 14
Create individual targeting ruleCreate an individual targeting rule on header-redesign for user_id "user-test-id" to see "new-style"
Test resolutionTest resolving header-redesign for user_id "user-test-id"

Configure a Metric

Set up a metric to measure the impact of your flags

Launch a Rollout

Gradually release your feature to users

Launch an A/B Test

Run an experiment to compare variants

Flags Reference

Deep dive into feature flag concepts and configuration