# Getting started

**Welcome!** Let's get started. We'll do the following:

1. Create your first flag.
2. Install the Reflag SDK.
3. Set flag access rules and/or remote config.
4. Enable Toolbar for local testing
5. Monitor your flag launch.

## 1. Create your first flag

Now let's create your first flag.

{% tabs %}
{% tab title="CLI" %}

```
npx @reflag/cli new
```

See [CLI docs](/api/cli.md).
{% endtab %}

{% tab title="UI" %}

1. [Sign up](https://app.reflag.com/) in the app
2. Click `New flag` in the sidebar.
3. Give your flag a name, and we'll suggest a `flag key`.

<figure><img src="/files/q5p0koL4eoR9yJmaYTGU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="MCP" %}
You can create flags from your code editor via our [MCP](/api/mcp.md).
{% endtab %}

{% tab title="Linear" %}
You can create flags from within Linear by mentioning the `@reflag` [agent](/integrations/linear.md).
{% endtab %}
{% endtabs %}

Next, let's set up a Reflag SDK for your language and framework.

## 2. Install the Reflag SDK

Find the supported languages below:

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>React</td><td><a href="/files/zqMmcPMKFYloZVB1OXkN">/files/zqMmcPMKFYloZVB1OXkN</a></td><td><a href="/pages/2CJBFDJN9Tb9L7mM9G91">/pages/2CJBFDJN9Tb9L7mM9G91</a></td></tr><tr><td>React Native</td><td><a href="/files/zqMmcPMKFYloZVB1OXkN">/files/zqMmcPMKFYloZVB1OXkN</a></td><td><a href="/pages/ADveDMeuW2prYwAuqtlk">/pages/ADveDMeuW2prYwAuqtlk</a></td></tr><tr><td>Vue.js</td><td><a href="/files/09j4B8D41jBN6GFjkYtS">/files/09j4B8D41jBN6GFjkYtS</a></td><td><a href="/pages/3MGKwDLU14denANZ4FsK">/pages/3MGKwDLU14denANZ4FsK</a></td></tr><tr><td>Client-side</td><td><a href="/files/KXq6PgugupkJBReobEhR">/files/KXq6PgugupkJBReobEhR</a></td><td><a href="/pages/YeReuSXCYzbSGECRUqXM">/pages/YeReuSXCYzbSGECRUqXM</a></td></tr><tr><td>Server-side</td><td><a href="/files/ppZAAxVJNHHigz4S8qwp">/files/ppZAAxVJNHHigz4S8qwp</a></td><td><a href="/pages/LxobWqzOxNDMCZMnePnp">/pages/LxobWqzOxNDMCZMnePnp</a></td></tr><tr><td>Next.js</td><td><a href="/files/JYDPcbR6gqT3laq6rUEF">/files/JYDPcbR6gqT3laq6rUEF</a></td><td><a href="/pages/jIg6Gpx2xTMpRpKIgmia">/pages/jIg6Gpx2xTMpRpKIgmia</a></td></tr><tr><td>Reflag supports OpenFeature</td><td><a href="/files/eVsxv1xipKP06PFAHPWY">/files/eVsxv1xipKP06PFAHPWY</a></td><td><a href="/pages/aU4Z0LObL1EP7lfRYans">/pages/aU4Z0LObL1EP7lfRYans</a></td></tr><tr><td>Don't use these languages or frameworks? Use our API</td><td><a href="/files/VWws2y411YhHkyHfHsBb">/files/VWws2y411YhHkyHfHsBb</a></td><td><a href="/pages/SzImN6rv5uo7Zg12MJyx">/pages/SzImN6rv5uo7Zg12MJyx</a></td></tr></tbody></table>

### Code example for React

If you've installed the React SDK and created a flag called `my-new-flag`, getting started looks like this:

```jsx
import { useFlag } from "@reflag/react-sdk";

const MyFlag = () => {
  const { isEnabled } = useFlag("my-new-flag");

  return isEnabled ? "You have access!" : null;
};
```

You can now use `isEnabled` to gate access to the flag.

## 3. Set access rules

Head back to [your dashboard](https://app.reflag.com/), select your flag, and open the `Access` tab.

<figure><img src="/files/FXnaS7KKs7g25O1YdsWD" alt=""><figcaption></figcaption></figure>

From here, you can define segments, companies, and users that will access your flag.

## 4. Enable Toolbar for local testing <a href="#next-steps-1" id="next-steps-1"></a>

In the frontend SDK, enable the Toolbar to toggle flags locally.

<figure><img src="/files/8JpyKfyqhkhWLIupVVhM" alt=""><figcaption></figcaption></figure>

In the React SDK, you enable it with `toolbar:`

```jsx
<ReflagProvider
   publishableKey=""
   context={}
   toolbar={true}
>
```

## 5. Monitor your flag launch <a href="#next-steps-1" id="next-steps-1"></a>

On the Monitor tab, you can track real-time flag exposure, adoption, and user feedback.

<figure><img src="/files/kkFuihEn8lRPtkfK4xlI" alt=""><figcaption></figcaption></figure>

### Track exposure

The Exposed chart shows companies that have been exposed to your flag. This means they were checked for flag access against your targeting rules and the check returned `enabled`.

### Track adoption

To track whether exposed companies are also interacting with your flag, use `track`.

See the code example below.

### Get user feedback

To get feedback from your users, you can add a [static "Feedback" button](/product-handbook/launch-monitor.md#static-feedback-button) or you can [trigger a survey](/product-handbook/launch-monitor/automated-feedback-surveys.md), at the right time.

Here's an example with a static feedback button.

```tsx
import { useFlag } from "@reflag/react-sdk";

const MyFlag = () => {
  const { isEnabled, track, requestFeedback } = useFlag("my-new-flag");

  if (!isEnabled) {
    return null;
  }

  return (
    <>
      <button onClick={() => track()}>Try it</button>
      <button
        onClick={() => requestFeedback({ title: "How do you like this new release?" })}
      >
        Give feedback
      </button>
    </>
  );
}
```

## Get support

* Need some help? [Chat with us](mailto:hello@reflag.com)
* Latest product updates? [See Changelog](https://reflag.com/changelog)
* Create account: [Sign up](https://app.reflag.com/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reflag.com/welcome/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.