# Getting started **Welcome!** Let's get started. We'll do the following: 1. Create your first feature flag. 2. Install the Reflag SDK. 3. Set feature access rules and/or remote configuration. 4. Enable Toolbar for local testing 5. Monitor your feature launch. ## 1. Create your first flag Now let's create your first flag. {% tabs %} {% tab title="CLI" %} ``` npx @reflag/cli new ``` See [CLI docs](https://docs.reflag.com/api/cli). {% endtab %} {% tab title="UI" %} 1. [Sign up](https://app.reflag.com/) in the app 2. Click `New flag` in the sidebar. 3. Give your feature a name, and we'll suggest a `flag key` .
{% endtab %} {% tab title="MCP" %} You can create features from your code editor via our [MCP](https://docs.reflag.com/api/mcp). {% endtab %} {% tab title="Linear" %} You can create features from within Linear by mentioning the `@reflag` [agent](https://docs.reflag.com/integrations/linear). {% 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:
Reactreact.svgreact-sdk
React Nativereact.svgreact-native-sdk
Vue.jsvue-logo.svgvue-sdk
Client-sidets-js.svgbrowser-sdk
Server-sidenode-js.svgnode-sdk
Next.jsnext-js.svgnext.js
Reflag supports OpenFeatureopenfeature.svgopenfeature
Don't use these languages or frameworks? Use our APIapi.svgpublic-api
### Code example for React If you've installed the React SDK and have created a feature called `my-new-feature`, getting started will look like the following: ```jsx import { useFlag } from "@reflag/react-sdk"; const MyFeature = () => { const { isEnabled } = useFlag("my-new-feature"); return isEnabled ? "You have access!" : null; }; ``` You can now use `isEnabled` to gate access to the feature. ## 3. Set access rules Head back over to [your dashboard](https://app.reflag.com/), select your feature and the `Access` tab.
From here, you can define segments, companies, and users that will access your feature. ## 4. Enable Toolbar for local testing In the frontend SDK, enable the Toolbar to toggle features locally.
In the React SDK, you enable it with `toolbar:` ```jsx ``` ## 5. Monitor your feature launch On the Monitor tab you can track real-time feature exposure, adoption and user feedback.
### Track exposure The Exposed chart shows you companies that have been exposed to your feature. This means, companies that have been checked for feature access as per your targeting rules and the check return "enabled". ### Track adoption To track if exposed companies are also interacting with your feature, you can use `track` . See the code example below. ### Get user feedback To get feedback from your users, you can add a [static "Feedback" button](https://docs.reflag.com/product-handbook/launch-monitor#static-feedback-button) or you can [trigger a survey](https://docs.reflag.com/product-handbook/launch-monitor/automated-feedback-surveys), at the right time. Here's an example with a static feedback button. ```tsx import { useFlag } from "@reflag/react-sdk"; const MyFeature = () => { const { isEnabled, requestFeedback } = useFlag("my-new-feature"); if (!isEnabled) { return null; } return ( <> ); } ``` ## 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/)