This is page 2 of 5. Use http://codebase.md/bucketco/docs/type-check-failed.png%20%22Type%20check%20failed%22?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .gitbook
│ ├── assets
│ │ ├── 03642c5-dwFrame_201 (1).png
│ │ ├── 03642c5-dwFrame_201.png
│ │ ├── 1753259671871 (1).jpeg
│ │ ├── 1a0b50d-image.png
│ │ ├── 1a439d9-image.png
│ │ ├── 2506596-Customized_Widgets.png
│ │ ├── 342658e-image.png
│ │ ├── 4017197-image.png
│ │ ├── 43e55f0-image.png
│ │ ├── 4783e3f-image.png
│ │ ├── 5b0ce63-image (1).png
│ │ ├── 5b0ce63-image.png
│ │ ├── 630b5e9-image.png
│ │ ├── 8bf8a6e-Frame_201.png
│ │ ├── 9efd67c-image.png
│ │ ├── aa37226-image.png
│ │ ├── Access (1) (1).png
│ │ ├── Access (1).png
│ │ ├── Access (2).png
│ │ ├── Access.png
│ │ ├── Adding features to a feature view-min.png
│ │ ├── Adopted-min.png
│ │ ├── Adoption strategy V2-min.png
│ │ ├── Adoption strategy-min.png
│ │ ├── Advanced targeting rules V2-min.png
│ │ ├── Advanced targeting rules v3-min.png
│ │ ├── Advanced targeting rules-min.png
│ │ ├── aecc6f2-image.png
│ │ ├── amplitude.svg
│ │ ├── An example targeting configuration with two rules.-min.png
│ │ ├── api.svg
│ │ ├── App Settings-min.png
│ │ ├── Automated feedback surveys settings v3-min.png
│ │ ├── Automated feedback surveys settings-min.png
│ │ ├── Automated feedback surveys-min.png
│ │ ├── aws-s3.svg
│ │ ├── be124cd-dwdwFrame_201 (1).png
│ │ ├── be124cd-dwdwFrame_201.png
│ │ ├── ccc4f9e-image.png
│ │ ├── CleanShot 2024-06-11 at 8 [email protected]
│ │ ├── CleanShot 2024-11-22 at 8 [email protected]
│ │ ├── CleanShot 2024-11-22 at 8 [email protected]
│ │ ├── CleanShot 2024-11-25 at 9 [email protected]
│ │ ├── CleanShot 2024-11-25 at 9 [email protected]
│ │ ├── CleanShot 2024-11-25 at 9 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2024-11-27 at 10 [email protected]
│ │ ├── CleanShot 2025-01-07 at 1 [email protected]
│ │ ├── CleanShot 2025-01-07 at 1 [email protected]
│ │ ├── CleanShot 2025-01-07 at 1 [email protected]
│ │ ├── CleanShot 2025-01-07 at 12 [email protected]
│ │ ├── CleanShot 2025-01-07 at 12 .39.12@2x (1).png
│ │ ├── CleanShot 2025-01-07 at 12 [email protected]
│ │ ├── CleanShot 2025-01-09 at 10 [email protected]
│ │ ├── CleanShot 2025-01-09 at 11 .11.54@2x (1).png
│ │ ├── CleanShot 2025-01-09 at 11 [email protected]
│ │ ├── CleanShot 2025-01-09 at 9 [email protected]
│ │ ├── CleanShot 2025-01-23 at 1 [email protected]
│ │ ├── CleanShot 2025-01-23 at 1 [email protected]
│ │ ├── CleanShot 2025-01-23 at 1 [email protected]
│ │ ├── CleanShot 2025-01-23 at 2 [email protected]
│ │ ├── CleanShot 2025-05-09 at 1 [email protected]
│ │ ├── CleanShot 2025-10-09 at 10 [email protected]
│ │ ├── Companies Tab-min.png
│ │ ├── Companies-min.png
│ │ ├── company example v2-min (1).png
│ │ ├── company example v2-min.png
│ │ ├── company example v3-min.png
│ │ ├── Company segment filters-min.png
│ │ ├── Create a new environment-min.png
│ │ ├── Creating and managing apps-min.png
│ │ ├── cursor-mcp-demo_h264.mp4
│ │ ├── datadog.svg
│ │ ├── Debugger-min (1).png
│ │ ├── Debugger-min (2).png
│ │ ├── Debugger-min.png
│ │ ├── Enabling Feedback Surveys-min.png
│ │ ├── Environments Page V2-min.png
│ │ ├── Environments Switcher-min.png
│ │ ├── Environments-min.png
│ │ ├── Evaluate Feature.png
│ │ ├── example 1 (1).png
│ │ ├── example 1.png
│ │ ├── example 2 (1).png
│ │ ├── example 2.png
│ │ ├── ezgif-242d06617aea38.gif
│ │ ├── Feature Tab-min.png
│ │ ├── Feature targeting rules example v2-min.png
│ │ ├── Feature targeting rules example V2-min.png
│ │ ├── Feature targeting rules example v3-min.png
│ │ ├── Feature targeting rules example-min.png
│ │ ├── Feature targeting rules UI V2-min.png
│ │ ├── Feature targeting rules UI v3-min.png
│ │ ├── Feature targeting rules UI-min.png
│ │ ├── Feature usage configuration-v2-min.png
│ │ ├── Feature view.png
│ │ ├── feature-flag-list-rum-event.d9c1c876a34458edc70d1317efaec05b.png.avif
│ │ ├── Feature-targeting-rules-v2-min.png
│ │ ├── Features Page V2-min (1).png
│ │ ├── Features Page V2-min.png
│ │ ├── Features Page-min.png
│ │ ├── Features-min.png
│ │ ├── Feedback Tab V2-min.png
│ │ ├── Feedback-min.png
│ │ ├── Getting started-min.png
│ │ ├── gitbook-logo.svg
│ │ ├── github-logo.svg
│ │ ├── Global settings - Feature views-min.png
│ │ ├── Global settings - Manual Targeting-min.png
│ │ ├── Global settings - Release Stages Editing V4-min.png
│ │ ├── Global settings - Release Stages-min.png
│ │ ├── Goal Form.png
│ │ ├── How to use release stages v2-min.png
│ │ ├── How to use release stages-min (1).png
│ │ ├── How to use release stages-min.png
│ │ ├── https___content.gitbook.com_content_pgXAy2Cgsm5pON9oJ06m_blobs_6wGbrQlJPE4JllBuIhla_image (1).png
│ │ ├── image (1) (1).png
│ │ ├── image (1) (2).png
│ │ ├── image (1).png
│ │ ├── image (10).png
│ │ ├── image (11).png
│ │ ├── image (12).png
│ │ ├── image (13).png
│ │ ├── image (14).png
│ │ ├── image (15).png
│ │ ├── image (16).png
│ │ ├── image (17).png
│ │ ├── image (18).png
│ │ ├── image (19).png
│ │ ├── image (2) (1).png
│ │ ├── image (2).png
│ │ ├── image (20).png
│ │ ├── image (21).png
│ │ ├── image (22).png
│ │ ├── image (23).png
│ │ ├── image (24).png
│ │ ├── image (25).png
│ │ ├── image (26).png
│ │ ├── image (27).png
│ │ ├── image (28).png
│ │ ├── image (29).png
│ │ ├── image (3).png
│ │ ├── image (30).png
│ │ ├── image (31).png
│ │ ├── image (32).png
│ │ ├── image (33).png
│ │ ├── image (4).png
│ │ ├── image (5).png
│ │ ├── image (6).png
│ │ ├── image (7).png
│ │ ├── image (8).png
│ │ ├── image (9).png
│ │ ├── image.png
│ │ ├── Iterate Feature V2.png
│ │ ├── LInear mention.mp4
│ │ ├── linear.svg
│ │ ├── mcp-remote-min.mp4
│ │ ├── mcp-remote.mp4
│ │ ├── mixpanel.svg
│ │ ├── Modifying or deleting an app-min.png
│ │ ├── Monitor (1) (1).png
│ │ ├── Monitor (1).png
│ │ ├── Monitor (2).png
│ │ ├── Monitor (3).png
│ │ ├── Monitor (4).png
│ │ ├── Monitor (5).png
│ │ ├── Monitor (6).png
│ │ ├── Monitor (7).png
│ │ ├── Monitor.png
│ │ ├── New feature.png
│ │ ├── next-js.svg
│ │ ├── node-js.svg
│ │ ├── openfeature.svg
│ │ ├── posthog.svg
│ │ ├── Pre-Release.png
│ │ ├── react.svg
│ │ ├── Release Goals.png
│ │ ├── Release Stage Beta Targeting Rules v3-min.png
│ │ ├── Release Stage Beta Targeting Rules V3-min.png
│ │ ├── Release Stage Beta Targeting Rules V5-min.png
│ │ ├── Release Stage Beta Targeting Rules-min.png
│ │ ├── remote config - 3.png
│ │ ├── Remote config.png
│ │ ├── Rolling back flags-V2.png
│ │ ├── Rules in other environments.png
│ │ ├── rum-explorer-error-feature-flag-search.7b9f6c046db1de1c71d279c139f1508a.png.avif
│ │ ├── rum-explorer-session-feature-flag-search.435802460fd607608ad5155f029da57b.png.avif
│ │ ├── Satisfaction feedback-min.png
│ │ ├── Satisified-min.png
│ │ ├── Save the segment-min.png
│ │ ├── Saving New Segment-min.png
│ │ ├── Screenshot 2024-08-14 at 19.25.06 (1).png
│ │ ├── Screenshot 2024-08-14 at 19.25.06.png
│ │ ├── Screenshot 2024-08-15 at 13.57.46.png
│ │ ├── Screenshot 2024-10-10 at 14.04.09.png
│ │ ├── Screenshot 2024-10-10 at 14.04.34.png
│ │ ├── Screenshot 2025-07-10 at 14.04.07.png
│ │ ├── Screenshot 2025-07-10 at 14.11.01.png
│ │ ├── Screenshot 2025-07-10 at 14.29.20.png
│ │ ├── Screenshot 2025-07-15 at 21.31.16.png
│ │ ├── Screenshot 2025-07-21 at 20.07.27.png
│ │ ├── Screenshot 2025-09-02 at 17.08.25.png
│ │ ├── Screenshot 2025-09-02 at 17.10.36 (1).png
│ │ ├── Screenshot 2025-09-02 at 17.10.36 (2).png
│ │ ├── Screenshot 2025-09-02 at 17.10.36.png
│ │ ├── Screenshot 2025-09-02 at 17.11.21 (1).png
│ │ ├── Screenshot 2025-09-02 at 17.11.21.png
│ │ ├── Screenshot 2025-09-02 at 17.13.15 (1).png
│ │ ├── Screenshot 2025-09-02 at 17.13.15.png
│ │ ├── Screenshot 2025-09-02 at 17.19.44 (1).png
│ │ ├── Screenshot 2025-09-02 at 17.19.44.png
│ │ ├── Screenshot 2025-09-09 at 09.32.31.png
│ │ ├── Screenshot 2025-09-12 at 11.50.41.png
│ │ ├── Screenshot 2025-09-12 at 12.30.38.png
│ │ ├── Screenshot 2025-09-12 at 13.14.44.png
│ │ ├── Screenshot 2025-09-12 at 13.18.07.png
│ │ ├── Screenshot 2025-09-12 at 13.21.25.png
│ │ ├── Screenshot 2025-09-12 at 13.25.21.png
│ │ ├── Screenshot 2025-09-12 at 14.29.56.png
│ │ ├── Screenshot 2025-09-12 at 14.37.52.png
│ │ ├── Screenshot 2025-09-12 at 14.58.27.png
│ │ ├── Screenshot 2025-09-12 at 15.00.32.png
│ │ ├── Screenshot 2025-09-12 at 15.01.32.png
│ │ ├── Screenshot 2025-09-12 at 15.03.33.png
│ │ ├── Screenshot 2025-09-12 at 15.04.39.png
│ │ ├── Screenshot 2025-09-12 at 15.06.50.png
│ │ ├── Screenshot 2025-09-12 at 15.13.45.png
│ │ ├── Screenshot 2025-09-12 at 15.14.43.png
│ │ ├── Screenshot 2025-09-12 at 15.16.42.png
│ │ ├── Screenshot 2025-09-12 at 15.18.42.png
│ │ ├── Screenshot 2025-09-12 at 15.32.39.png
│ │ ├── Screenshot 2025-09-12 at 15.33.57.png
│ │ ├── Screenshot 2025-09-12 at 15.35.09.png
│ │ ├── Screenshot 2025-09-12 at 15.36.14.png
│ │ ├── segment (1).svg
│ │ ├── segment.svg
│ │ ├── Segments.png
│ │ ├── Set segment conditions-min.png
│ │ ├── Setting multiple targeting rules.png
│ │ ├── Setting Tab-min.png
│ │ ├── Setting targeting rules v3-min.png
│ │ ├── Setting targeting rules-min.png
│ │ ├── Settings-min (1).png
│ │ ├── Settings-min.png
│ │ ├── slack (1).svg
│ │ ├── Slack (with auto-layout)-min.png
│ │ ├── Slack and Environments-min.png
│ │ ├── Slack and Feature views-min.png
│ │ ├── Slack Integration.png
│ │ ├── Slack Settings under Features-min.png
│ │ ├── Slack with User Feedback.png
│ │ ├── slack.svg
│ │ ├── slackConnected (1).png
│ │ ├── slackConnected.png
│ │ ├── slackDisconnected (1).png
│ │ ├── slackDisconnected.png
│ │ ├── STARS Configuration-min.png
│ │ ├── STARS Feature Funnel-min.png
│ │ ├── STARS Feature Report-min.png
│ │ ├── STARS states.png
│ │ ├── surveys-min.png
│ │ ├── Switching Between Environments-min.png
│ │ ├── Targeting rules interface-min.png
│ │ ├── Targeting rules.png
│ │ ├── There are 5 different types of conditions to chose from-min.png
│ │ ├── Track adoption in the UI V2-min.png
│ │ ├── Track adoption in the UI v3-min.png
│ │ ├── Track adoption in the UI-min.png
│ │ ├── Track new feature V2-min.png
│ │ ├── Tracking Tab-min.png
│ │ ├── ts-js.svg
│ │ ├── type-check-failed.png
│ │ ├── type-check-payload-failed.png
│ │ ├── usage attribute example v3.png
│ │ ├── usage attribute example-min.png
│ │ ├── Usage configuration-min.png
│ │ ├── vercel-logo.svg
│ │ ├── vue-logo.svg
│ │ ├── What is the STARS Framework v3-min.png
│ │ └── What is the STARS Framework_-min.png
│ └── includes
│ ├── integrations.md
│ ├── languages.md
│ ├── need-some-help-chat-with-us.md
│ ├── sdks.md
│ └── untitled.md
├── .github
│ └── README.md
├── .vscode
│ └── settings.json
├── api
│ ├── api-access.md
│ ├── cli.md
│ ├── mcp.md
│ ├── public-api
│ │ ├── public-api-reference.md
│ │ └── README.md
│ └── reflag-rest-api
│ ├── README.md
│ └── reflag-api-reference.md
├── guides
│ ├── self-opt-in.md
│ └── use-reflag-in-your-cli.md
├── integrations
│ ├── amplitude.md
│ ├── aws-s3.md
│ ├── cursor.md
│ ├── datadog.md
│ ├── github.md
│ ├── linear.md
│ ├── mixpanel.md
│ ├── overview.md
│ ├── posthog.md
│ ├── segment.md
│ └── slack.md
├── introduction
│ └── concepts
│ ├── app.md
│ ├── company.md
│ ├── environment.md
│ ├── event.md
│ ├── feature-events.md
│ ├── feature-view.md
│ ├── feature.md
│ ├── feedback.md
│ ├── filter.md
│ ├── README.md
│ ├── release-stage.md
│ ├── segment.md
│ ├── targeting-rules.md
│ └── user.md
├── product-handbook
│ ├── anonymous-users.md
│ ├── concepts
│ │ ├── app.md
│ │ ├── company.md
│ │ ├── environment.md
│ │ ├── event.md
│ │ ├── feature-events.md
│ │ ├── feature-view.md
│ │ ├── feature.md
│ │ ├── feedback.md
│ │ ├── filter.md
│ │ ├── README.md
│ │ ├── release-stage.md
│ │ ├── segment.md
│ │ ├── targeting-rules.md
│ │ └── user.md
│ ├── creating-and-managing-apps
│ │ ├── environments.md
│ │ └── README.md
│ ├── creating-and-managing-apps.md
│ ├── creating-segments.md
│ ├── data-export.md
│ ├── data-residency.md
│ ├── feature-clean-up-and-archival-beta
│ │ ├── ai-code-clean-up-beta.md
│ │ └── README.md
│ ├── feature-entitlements
│ │ ├── README.md
│ │ └── simple-role-based-entitlements.md
│ ├── feature-rollouts
│ │ ├── feature-targeting-rules.md
│ │ └── README.md
│ ├── feature-targeting-rules
│ │ ├── creating-segments.md
│ │ └── environments.md
│ ├── feature-views.md
│ ├── launch-monitor
│ │ ├── automated-feedback-surveys.md
│ │ ├── give-feedback-button.md
│ │ └── README.md
│ ├── product-overview.md
│ ├── remote-config.md
│ ├── self-opt-in.md
│ ├── service-resiliency.md
│ ├── team-permissions.md
│ └── type-safety.md
├── README.md
├── sdk
│ ├── _media
│ │ ├── type-check-failed.png
│ │ └── type-check-payload-failed.png
│ ├── @reflag
│ │ ├── browser-sdk
│ │ │ ├── globals.md
│ │ │ └── README.md
│ │ ├── node-sdk
│ │ │ ├── globals.md
│ │ │ └── README.md
│ │ ├── react-sdk
│ │ │ ├── globals.md
│ │ │ └── README.md
│ │ └── vue-sdk
│ │ ├── globals.md
│ │ └── README.md
│ ├── documents
│ │ ├── browser-sdk
│ │ │ └── FEEDBACK.md
│ │ └── cli
│ │ └── README.md
│ └── README.md
├── SUMMARY.md
├── support
│ └── get-support.md
└── supported-languages
├── next.js.md
├── openfeature.md
├── overview.md
└── ruby-rails-stimulus.md
```
# Files
--------------------------------------------------------------------------------
/.gitbook/assets/api.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M276.266 165.206V158.728H285.472V131.339H276.266V124.861H301.723V131.339H292.518V158.728H301.723V165.206H276.266Z" fill="#151519"/>
<path d="M242.535 165.206V124.861H255.321C258.086 124.861 260.53 125.391 262.651 126.452C264.772 127.513 266.42 128.99 267.595 130.884C268.769 132.779 269.356 135.033 269.356 137.646C269.356 140.222 268.769 142.458 267.595 144.352C266.42 146.246 264.772 147.723 262.651 148.784C260.53 149.807 258.086 150.318 255.321 150.318H249.582V165.206H242.535ZM249.582 143.897H254.582C257.12 143.897 258.995 143.367 260.208 142.306C261.458 141.207 262.083 139.654 262.083 137.646C262.083 135.563 261.458 133.991 260.208 132.93C258.995 131.869 257.12 131.339 254.582 131.339H249.582V143.897Z" fill="#151519"/>
<path d="M204.997 165.206L216.475 124.861H225.226L236.705 165.206H229.488L220.851 132.816L212.214 165.206H204.997ZM212.043 155.66L213.975 149.352H227.727L229.659 155.66H212.043Z" fill="#151519"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M311.294 99H200.706C190.375 99 182 107.375 182 117.706V170.294C182 180.625 190.375 189 200.706 189H311.294C321.625 189 330 180.625 330 170.294V117.706C330 107.375 321.625 99 311.294 99ZM200.706 92C186.509 92 175 103.509 175 117.706V170.294C175 184.491 186.509 196 200.706 196H311.294C325.491 196 337 184.491 337 170.294V117.706C337 103.509 325.491 92 311.294 92H200.706Z" fill="#151519"/>
</svg>
```
--------------------------------------------------------------------------------
/product-handbook/concepts/environment.md:
--------------------------------------------------------------------------------
```markdown
# Environment
### Definition
Environments, in Reflag, serve to fully segregate the collected data. In practice, this means that any data received by our [public API](../../api/public-api/public-api-reference.md) in the "_Production_" environment for example, will be completely different from the data collected in other environments. Specifically, this pertains to:
* [Companies](company.md)' details that have been collected
* [Users](user.md)' details
* [Track events](event.md)
* Collected [feedback](feedback.md)
* [Feature events](feature-events.md)
Aside from the collected data itself, there are a number of environment-specific settings and behaviors that can be configured on [features](feature.md) and [feature views](../feature-views.md). Additionally, any [targeting rules](targeting-rules.md) used within the app use environment-specific data.
Each new [app](app.md), comes with three predefined environments: **Production**, **Staging** and **Development**.
You can create or delete any environment at any time, except the Production environment. 
{% hint style="danger" %}
Deleted environments cannot be restored, and all collected data for that environment will essentially be lost. 
{% endhint %}
The main use case for environments is to test if data is coming through as expected and if features are set up correctly on local or staging environments before releasing to production.
### Next steps
* Learn about [users](user.md) and [companies](company.md),
* Learn how to [manage environments ](../creating-and-managing-apps/environments.md)within Reflag UI.
```
--------------------------------------------------------------------------------
/introduction/concepts/environment.md:
--------------------------------------------------------------------------------
```markdown
# Environment
### Definition
Environments, in Reflag, serve to fully segregate the collected data. In practice, this means that any data received by our [public API](../../api/api-reference.md) in the "_Production_" environment for example, will be completely different from the data collected in other environments. Specifically, this pertains to:
* [Companies](company.md)' details that have been collected
* [Users](user.md)' details
* [Track events](event.md)
* Collected [feedback](feedback.md)
* [Feature events](feature-events.md)
Aside from the collected data itself, there are a number of environment-specific settings and behaviors that can be configured on [features](feature.md) and [feature views](../../product-handbook/feature-views.md). Additionally, any [targeting rules](targeting-rules.md) used within the app use environment-specific data.
Each new [app](app.md), comes with three predefined environments: **Production**, **Staging** and **Development**.
You can create or delete any environment at any time, except the Production environment. 
{% hint style="danger" %}
Deleted environments cannot be restored, and all collected data for that environment will essentially be lost. 
{% endhint %}
The main use case for environments is to test if data is coming through as expected and if features are set up correctly on local or staging environments before releasing to production.
### Next steps
* Learn about [users](user.md) and [companies](company.md),
* Learn how to [manage environments](../../product-handbook/feature-targeting-rules/environments.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/concepts/feature-events.md:
--------------------------------------------------------------------------------
```markdown
# Flag events
### Definition
Flag events in Reflag are generated automatically in some cases, and are sent by the client in others. Reflag uses these events to track [flag access](feature.md#access) and collects data usable to debug rule and context issues.
### Access evaluated
This event is generated automatically on Reflag side when the client uses server-side feature evaluation (e.g. when using [@reflag/browser-sdk](../../sdk/@reflag/browser-sdk/) or [@reflag/react-sdk](../../sdk/@reflag/browser-sdk/)) or on client side when local evaluation is used (e.g. using local mode in [@reflag/node-sdk](../../sdk/@reflag/node-sdk/)).
This events contains the following information:
* The **actual context** that was used to evaluate the flag access,
* Some details of the **flag** whose access rules were evaluated,
* The **result** of the access evaluation, including **missing fields** that were expected in the [targeting rules](targeting-rules.md).
### Access checked
This event is generated by all Reflag SDKs whenever the client code checks if a flag is enabled for a given context.
This events contains the following information:
* The **actual context** that was used to evaluate the flag access,
* Some details of the **flag**,
* The **result** of the access check.
{% hint style="info" %}
Reflag SDKs rate-limit generation of these events to avoid unnecessary traffic. Also, unknown flag evaluations and checks are also sent to Reflag facilitating debugging.
{% endhint %}
### Next steps
* Learn about [targeting rules](targeting-rules.md),
* Learn how to [setup flag access rules](../feature-rollouts/feature-targeting-rules.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/product-overview.md:
--------------------------------------------------------------------------------
```markdown
# Product overview
## Flags
The Flags tab of Reflag is where you create and manage your flags.
<figure><img src="../.gitbook/assets/Screenshot 2025-09-12 at 12.30.38.png" alt=""><figcaption></figcaption></figure>
## Flag page
This is where you create and manage feature flags, set access rules, remote config, and monitor your feature launch. 
<figure><img src="../.gitbook/assets/Screenshot 2025-09-02 at 17.10.36 (2).png" alt="Feature page with rollout targeting rules"><figcaption></figcaption></figure>
<figure><img src="../.gitbook/assets/Screenshot 2025-09-02 at 17.11.21 (1).png" alt=""><figcaption></figcaption></figure>
<figure><img src="../.gitbook/assets/Monitor.png" alt=""><figcaption></figcaption></figure>
## Companies
The Companies tab lists all of the companies that use your application. You can used advanced filters to filter the companies list and create saved segments.
<figure><img src="../.gitbook/assets/Screenshot 2025-09-02 at 17.13.15 (1).png" alt=""><figcaption></figcaption></figure>
## Event log
The Event log tab shows you a log of recent events as well as a list of all the distinct events being tracked in Reflag.
<figure><img src="../.gitbook/assets/Debugger-min (2).png" alt="Debugger page"><figcaption></figcaption></figure>
## Settings
The Settings tab is where you manage billing, [users](team-permissions.md), [integrations](broken-reference), [feature views](feature-views.md), [company segments](creating-segments.md), [environments](creating-and-managing-apps/environments.md), data exports, and more.
<figure><img src="../.gitbook/assets/Settings-min (1).png" alt="Global settings page"><figcaption></figcaption></figure>
```
--------------------------------------------------------------------------------
/product-handbook/concepts/user.md:
--------------------------------------------------------------------------------
```markdown
# User
### Definition
An **user** entity in Reflag is used to store the details of an user that interacted with your application. Users are normally part of one or more [companies](company.md). It is mandatory that the user [be part of a company](company.md#associating-with-users), otherwise user's interactions are not taken into account.
### Attributes
An user entity is essentially a collection of **attributes**. Each attribute is a **key** — **value** pair supplied by your application. There is one mandatory attribute each user must have: `ID`, and three special attributes Reflag uses in its UI for convenience: `email`, `name` and `avatar`. It is up to you to provide whichever attributes you deem necessary.
Reflag manages a set of computed attributes when you send data to Reflag:
* `First seen` and `Last seen` denote the first and last time the company-related interactions have been sent to Reflag,
* `Event count` is updated any time there is a new [event](event.md) received referencing the user.
{% hint style="info" %}
In Segment terminology, users can be thought of as acting as an [Identify](https://segment.com/docs/connections/spec/identify/) call. User attributes can be thought of as [User traits](https://segment.com/docs/connections/spec/identify/#custom-traits).
{% endhint %}
{% hint style="warning" %}
Do not include PII data when sending in user attributes. It is recommended that any sensitive data should be hashed or otherwise not included.
{% endhint %}
### Next steps
* Learn about [events](event.md) and [feedback](feedback.md),
* Learn how to [define feature access rules](../feature-rollouts/feature-targeting-rules.md) using user attributes within Reflag UI.
```
--------------------------------------------------------------------------------
/introduction/concepts/feature-events.md:
--------------------------------------------------------------------------------
```markdown
# Feature events
### Definition
Feature events in Reflag are generated automatically in some cases, and are sent by the client in others. Reflag uses these events to track [feature access](feature.md#access) and collects data usable to debug rule and context issues.
### Access evaluated
This event is generated automatically on Reflag side when the client uses server-side feature evaluation (e.g. when using [@reflag/browser-sdk](../../sdk/@reflag/browser-sdk/) or [@reflag/react-sdk](../../sdk/@reflag/react-sdk/)) or on client side when local evaluation is used (e.g. using local mode in [@reflag/node-sdk](../../sdk/@reflag/node-sdk/)).
This events contains the following information:
* The **actual context** that was used to evaluate the feature access,
* Some details of the **feature** whose access rules were evaluated,
* The **result** of the access evaluation, including **missing fields** that were expected in the [targeting rules](targeting-rules.md).
### Access checked
This event is generated by all Reflag SDKs whenever the client code checks if a feature is enabled for a given context.
This events contains the following information:
* The **actual context** that was used to evaluate the feature access,
* Some details of the **feature**,
* The **result** of the access check.
{% hint style="info" %}
Reflag SDKs rate-limit generation of these events to avoid unnecessary traffic. Also, unknown features' evaluations and checks are also sent to Reflag facilitating debugging.
{% endhint %}
### Next steps
* Learn about [targeting rules](targeting-rules.md),
* Learn how to [setup feature access rules](../../product-handbook/feature-rollouts/feature-targeting-rules.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/introduction/concepts/user.md:
--------------------------------------------------------------------------------
```markdown
# User
### Definition
An **user** entity in Reflag is used to store the details of an user that interacted with your application. Users are normally part of one or more [companies](company.md). It is mandatory that the user [be part of a company](company.md#associating-with-users), otherwise user's interactions are not taken into account.
### Attributes
An user entity is essentially a collection of **attributes**. Each attribute is a **key** — **value** pair supplied by your application. There is one mandatory attribute each user must have: `ID`, and three special attributes Reflag uses in its UI for convenience: `email`, `name` and `avatar`. It is up to you to provide whichever attributes you deem necessary.
Reflag manages a set of computed attributes when you send data to Reflag:
* `First seen` and `Last seen` denote the first and last time the company-related interactions have been sent to Reflag,
* `Event count` is updated any time there is a new [event](event.md) received referencing the user.
{% hint style="info" %}
In Segment terminology, users can be thought of as acting as an [Identify](https://segment.com/docs/connections/spec/identify/) call. User attributes can be thought of as [User traits](https://segment.com/docs/connections/spec/identify/#custom-traits).
{% endhint %}
{% hint style="warning" %}
Do not include PII data when sending in user attributes. It is recommended that any sensitive data should be hashed or otherwise not included.
{% endhint %}
### Next steps
* Learn about [events](event.md) and [feedback](feedback.md),
* Learn how to [define feature access rules](../../product-handbook/feature-rollouts/feature-targeting-rules.md) using user attributes within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/concepts/feature.md:
--------------------------------------------------------------------------------
```markdown
# Flag
### Definition
A **flag** is an entity in Reflag that is used manage a "_feature in your product_". This refers to releasing the feature, manage access, configure, track adoption, gather feedback, and etc.
Flags can be organized into hierarchies (having other flags as parent) and grouped into [views](feature-view.md), for easy reporting.
### Flag key
Each flag has an unique key and some basic details such as name and description, adoption rules, feedback configuration and other.
{% hint style="warning" %}
Flag keys are unique across your [app](app.md). They cannot be edited after the flag is created. The flag key is _also_ is used for tracking feature adoption and getting feedback.
{% endhint %}
The following entities are associated with a flag through its key:
* [Track event](event.md),
* [Feature events](feature-events.md),
* [Feedback](feedback.md).
### Access
Each flag in Reflag comes with a set of access [targeting rules](targeting-rules.md) that are evaluated against the context of the user of your application. Access is evaluated each time the rules change of the context changes. Reflag SDKs transparently deal with evaluation, caching and refreshing of access status of the user of your application. 
Flag access can also be used within Reflag itself as a [filter](filter.md#feature-access-filter) consumed by other entities.
### Metrics
Flag metrics are a set of values that are calculated for each company that is using the feature. These metrics include `Average feedback score`, `First and Last used` dates and others.
Flag metrics are used within the Reflag UI in various places but can also serve as values for [filters](filter.md#company-feature-metrics) consumed by other entities.
### Next steps
* Learn about [views](feature-view.md), [track](event.md) and [events](feature-events.md),
* Learn how to [create your first feature](../../) within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/feature-targeting-rules/creating-segments.md:
--------------------------------------------------------------------------------
```markdown
---
description: Learn more about segments in Reflag
---
# Creating segments
## What's a segment?
Segments are reusable lists of companies created based off one of more of the following:
* [Company attributes](../../introduction/concepts/company.md#attributes) 
* Feature access
* Feature metrics
* Feature feedback
Company segments can be used as access rule for managing feature access.
## Getting started <a href="#get-started" id="get-started"></a>
* Go to the `Companies` page on the sidebar
* Click on the `Add filter +` menu item to build your segment conditions
## Set segment conditions
Each segment is created using a set of conditions. You can add as many segmentation conditions as you’d like. 
### Conditions
There are 4 types of conditions:
* `Company attribute`
* `Company ID`
* `Company name`
* `any custom attributes`
* `Feature access` 
* `isEnabled`
* `Feature metric` 
* `STARS`
* `Frequency`
* `Satisfaction`
* `Event count`
* `First used`
* `Last used`
* `Segment` 
* `in Segment`
* `not in Segment`
<figure><img src="../../.gitbook/assets/Set segment conditions-min.png" alt="Using feature filters to create segments"><figcaption></figcaption></figure>
### **Operators**
* Any
* `Is`
* `Is not`
* `Has any value`
* `Has no value`
* Text
* `Contains`
* `Does not contain`
* List
* `Is any of`
* `Is not any of`
* Number
* `Less than`
* `Greater than`
* Boolean
* `Is true`
* `Is false`
* Date
* `Less than X days ago`
* `More than X days ago`
* Feature access
* `Is enabled`
* `Is not enabled`
* Segment
* `In segment`
* `Not in segment`
## Save the segment
After adding any applicable conditions, you can save the segment. You can create as many segments as you need.
<figure><img src="../../.gitbook/assets/Save the segment-min.png" alt="Saving a segment"><figcaption></figcaption></figure>
```
--------------------------------------------------------------------------------
/product-handbook/type-safety.md:
--------------------------------------------------------------------------------
```markdown
---
description: Reflag offers type safety which reduces errors and frustation
---
# Type safety
{% embed url="https://www.youtube.com/watch?v=2ay2sc9g6Oc" %}
Type safety in Reflag ensures that flag key typos become build errors. This guarantees that if you try to use a non-existent flag key, you'll receive a type error, preventing potential runtime errors and improving code reliability. For remote config, it also ensures that the shape of the payload defined on Reflag matches what your code expects.
Use the Reflag CLI to generate flag types from their definition in Reflag. Once flag types have been generated they are automatically picked up by TypeScript.
It's recommended that you do not check in the flag types, but instead generate them in your build process and on your local development machines.
## Set up type safety for flags
1. Install the Reflag CLI and set up your repository
```
npm install --save-dev @reflag/cli
npx reflag init
```
2. Generate the types locally
```
npx reflag types generate
```
3. Add the generated files to `.gitignore`
```
echo "gen/flags.d.ts" >> .gitignore
```
4. Retrieve an [API Key](http://app.reflag.com/env-current/settings/org-api-access) for your build system
5. Set up your build system to run the Reflag CLI to generate types (use the `--api-key` option or specify the API key in the `REFLAG_API_KEY` environment variable)
```
npx reflag apps list --api-key $REFLAG_API_KEY
```
Example CI workflow:
```yaml
# GitHub Actions example
- name: Generate types
run: npx reflag flags types --api-key ${{ secrets.REFLAG_API_KEY }}
# GitHub Actions example (using environment):
- name: Generate types (environment)
run: npx reflag flags types
env:
REFLAG_API_KEY: ${{ secrets.REFLAG_CI_API_KEY }}
```
There's further guidance and examples of using [Reflag CLI in CI/CD pipelines](https://docs.reflag.com/api/cli#using-in-ci-cd-pipelines-beta).
```
--------------------------------------------------------------------------------
/product-handbook/team-permissions.md:
--------------------------------------------------------------------------------
```markdown
---
description: Invite, remove and manage roles for your team members
---
# Team permissions
## Team management basics
The Team Management page in your Reflag organization provides essential features for overseeing your team:
* **Invitations**: Easily copy the secret invite link to allow new members to join your organization. Admins can refresh the invite link as needed.
* **User listing**: View the complete list of current organization members. The table displays each user's details, including their join date and role.
Team member roles can be changed by selecting them from the dropdown. Additionally, any member can be removed from the organization by clicking the "_delete_" icon situated next to the role selector.
<figure><img src="../.gitbook/assets/https___content.gitbook.com_content_pgXAy2Cgsm5pON9oJ06m_blobs_6wGbrQlJPE4JllBuIhla_image (1).png" alt=""><figcaption><p>Team management page</p></figcaption></figure>
## Roles and permissions
{% hint style="info" %}
Team roles are only available on **Pro** and **Enterprise** plans. In organizations not on these plans, roles are not enforced, and every team member is implicitly an **Admin**.
{% endhint %}
* **Viewer**: Can view content within your organization, but cannot make any changes.
* **Writer (except production)**: Can create and update features, feature views, and manage feedback. Can modify non-production targeting for features and remote configs. Cannot alter organization-wide settings and most app settings.
* **Writer**: Can do everything that **Writer (except production)** can, plus production targeting updates and segment management.
* **Admin**: Full access to all features and settings, including managing other members' roles and removing users from the organization.
{% hint style="info" %}
**Note**: All new users invited to the organization will be assigned the **Viewer** role by default, ensuring they have appropriate access without making any changes.
{% endhint %}
```
--------------------------------------------------------------------------------
/product-handbook/creating-segments.md:
--------------------------------------------------------------------------------
```markdown
---
description: Learn more about segments in Reflag
---
# Creating segments
## What's a segment?
Segments are reusable lists of companies created based off one of more of the following:
* [Company attributes](concepts/company.md#attributes) 
* Flag access
* Flag metrics
* Feature feedback
Company segments can be used as access rule for managing flag access.
## Getting started <a href="#get-started" id="get-started"></a>
* Go to the `Companies` page on the sidebar
* Click on the `Add filter +` menu item to build your segment conditions
## Set segment conditions
Each segment is created using a set of conditions. You can add as many segmentation conditions as you’d like. 
### Conditions
There are 4 types of conditions:
* `Company attribute`
* `Company ID`
* `First seen` 
* `Last seen` 
* `any custom attributes`
* `Flag access` 
* `is enabled`
* `is not enabled`  
* `Flag metric` 
* `Track count` 
* `Exposure count`
* `First track`
* `Last track`  
* `Segment` 
* `in Segment`
* `not in Segment`
<figure><img src="../.gitbook/assets/Screenshot 2025-09-12 at 15.13.45.png" alt="Using feature filters to create segments"><figcaption></figcaption></figure>
### **Operators**
* Any
* `Is`
* `Is not`
* `Has any value`
* `Has no value`
* Text
* `Contains`
* `Does not contain`
* List
* `Is any of`
* `Is not any of`
* Number
* `Less than`
* `Greater than`
* Boolean
* `Is true`
* `Is false`
* Date
* `Less than X days ago`
* `More than X days ago`
* `Before date X`  
* `After date X`  
* Flag access
* `Is enabled`
* `Is not enabled`
* Segment
* `In segment`
* `Not in segment`
## Save the segment
After adding any applicable conditions, you can save the segment. You can create as many segments as you need.
<figure><img src="../.gitbook/assets/Screenshot 2025-09-12 at 15.14.43.png" alt="Saving a segment"><figcaption></figcaption></figure>
```
--------------------------------------------------------------------------------
/introduction/concepts/feature.md:
--------------------------------------------------------------------------------
```markdown
# Feature
### Definition
A **feature** is an entity in Reflag that is used manage a "_feature in your product_". This refers to releasing the feature, manage access, configure, track adoption, gather feedback, and etc.
Features can be organized into hierarchies (having other features as parent) and grouped into [feature views](feature-view.md), for easy reporting.
### Feature key
Each feature has an unique feature key and some basic details such as name and description, adoption rules, feedback configuration and other.
{% hint style="warning" %}
Feature keys are unique across your [app](app.md). They cannot be edited after the feature is created. You can think of the feature key as a **flag key** that _also_ is used for tracking feature adoption and getting feedback.
{% endhint %}
The following entities are associated with a feature through its key:
* [Track event](event.md),
* [Feature events](feature-events.md),
* [Feedback](feedback.md).
### Access
Each feature in Reflag comes with a set of access [targeting rules](targeting-rules.md) that are evaluated against the context of the user of your application. Access is evaluated each time the rules change of the context changes. Reflag SDKs transparently deal with evaluation, caching and refreshing of access status of the user of your application. 
Feature access can also be used within Reflag itself as a [filter](filter.md#feature-access-filter) consumed by other entities.
### Metrics
Feature metrics are a set of values that are calculated for each company that is using the feature. These metrics include `Average feedback score`, `STARS state`, `First and Last used` dates and others.
Feature metrics are used within the Reflag UI in various places but can also serve as values for [filters](filter.md#company-feature-metrics) consumed by other entities.
### Next steps
* Learn about [feature views](feature-view.md), [track](event.md) and [feature events](feature-events.md),
* Learn how to [create your first feature](broken-reference) within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/concepts/targeting-rules.md:
--------------------------------------------------------------------------------
```markdown
# Targeting rules
### Definition
Targeting rules are entities used in Reflag to describe the target audience of a given [feature](feature.md). The target audience refers to the users that can interact with the feature within your application. Additionally, each targeting rule contains a value that is used for the target audience.
### Filters
Targeting rules are essentially a collection [filters](filter.md) that are matched against a specific evaluation context. The first rule with a filter matching the context is selected, and its value used as result. In the case of feature access it can either be `true` , indicating that the feature is accessible. If no rules match the context, a value of `false` is used — feature not accessible.
### Evaluation context
The evaluation context refers simply to a collection of **key** — **value** pairs that are passed to the rules' filters. Reflag expects the evaluation context to contains the following data:
* User's `ID` as a minimum, 
* Any other [user attributes](user.md#attributes) that might be used by the filters in the rules,
* Company's `ID` is necessary in the vast majority of cases, though it's not mandatory,
* Any other [company attributes](company.md#attributes) that might be used by the filters in the rules,
* A collection of "_**other**_" attributes that can be used by the feature access targeting rules.
The exact structure of the data will vary by the SDK in use.
### Missing context fields
During the evaluation of targeting rules against a context it might happen that context is missing some details that the rules require. In such cases, those rules are discarded from evaluation as it would be unsafe to do otherwise.
Reflag reports these missing context fields using [feature events](feature-events.md). Reflag SDKs will also generate warnings in these cases making it easy to find these situations in your application.
### Next steps
* Learn about [filters](filter.md),
* Learn how to [setup feature access rules](../feature-rollouts/feature-targeting-rules.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/introduction/concepts/targeting-rules.md:
--------------------------------------------------------------------------------
```markdown
# Targeting rules
### Definition
Targeting rules are entities used in Reflag to describe the target audience of a given [feature](feature.md). The target audience refers to the users that can interact with the feature within your application. Additionally, each targeting rule contains a value that is used for the target audience.
### Filters
Targeting rules are essentially a collection [filters](filter.md) that are matched against a specific evaluation context. The first rule with a filter matching the context is selected, and its value used as result. In the case of feature access it can either be `true` , indicating that the feature is accessible. If no rules match the context, a value of `false` is used — feature not accessible.
### Evaluation context
The evaluation context refers simply to a collection of **key** — **value** pairs that are passed to the rules' filters. Reflag expects the evaluation context to contains the following data:
* User's `ID` as a minimum, 
* Any other [user attributes](user.md#attributes) that might be used by the filters in the rules,
* Company's `ID` is necessary in the vast majority of cases, though it's not mandatory,
* Any other [company attributes](company.md#attributes) that might be used by the filters in the rules,
* A collection of "_**other**_" attributes that can be used by the feature access targeting rules.
The exact structure of the data will vary by the SDK in use.
### Missing context fields
During the evaluation of targeting rules against a context it might happen that context is missing some details that the rules require. In such cases, those rules are discarded from evaluation as it would be unsafe to do otherwise.
Reflag reports these missing context fields using [feature events](feature-events.md). Reflag SDKs will also generate warnings in these cases making it easy to find these situations in your application.
### Next steps
* Learn about [filters](filter.md),
* Learn how to [setup feature access rules](../../product-handbook/feature-rollouts/feature-targeting-rules.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/guides/use-reflag-in-your-cli.md:
--------------------------------------------------------------------------------
```markdown
---
description: High-level guide to flagging features in your CLI
icon: rectangle-terminal
---
# Use Reflag in your CLI
### If you use API token for auth 
First, create an endpoint in your backend for the CLI to call:
```
POST /get-flags
Authorization: Bearer <APIKEY>
```
The endpoint will take the API key and use it to look up the associated user.
Then, use the [public-api-reference.md](../api/public-api/public-api-reference.md "mention") to get enabled flags for the authenticated user. Return the flags to the CLI:
```
{
flags: ['flag1', 'flag2']
}
```
Finally, check for access with a simple:
```tsx
/function isFlagEnabled(flag: string) {
return flags.contains('myflag');
}
```
### If you use API token for auth AND Node.js
First, create an endpoint in your backend for the CLI to call:
```
POST /get-flags
Authorization: Bearer <APIKEY>
```
The endpoint will take the API key and use it to look up the associated user.
Use the [node-sdk](../sdk/@reflag/node-sdk/ "mention") get enabled flags for the authenticated user.
```jsx
import { ReflagClient } from "@reflag/node-sdk";
// configure the client
const boundClient = reflagClient.bindClient({
user: {
id: "c1_u1",
name: "John Doe"
},
company: {
id: "c1",
name: "Acme, Inc."
},
});
// get flags
const flags = boundClient.getFlags();
```
Finally, check for access with a simple:
```tsx
if(flags['myflag'].isEnabled) {
//feature access
}
```
### If you use OAuth for auth
Use [node-sdk](../sdk/@reflag/node-sdk/ "mention") or [public-api-reference.md](../api/public-api/public-api-reference.md "mention") to get flags for the authenticated user.
In Node, configure the SDK like so:
```jsx
import { ReflagClient } from "@reflag/node-sdk";
// configure the client
const boundClient = reflagClient.bindClient({
user: {
id: "c1_u1",
name: "John Doe"
},
company: {
id: "c1",
name: "Acme, Inc."
},
});
```
Check access for individual flag:
```jsx
const { isEnabled } = boundClient.getFlag("myflag");
if (isEnabled) {
//feature access
}
```
Or get all flags:
```jsx
const flags = boundClient.getFlags();
```
```
--------------------------------------------------------------------------------
/product-handbook/concepts/event.md:
--------------------------------------------------------------------------------
```markdown
# Track event
### Definition
A track event in Reflag is sent by the client when an user interacts with a feature within your application. Reflag uses these events to [track feature adoption](feature.md#metrics) or launch [feedback surveys](../launch-monitor/automated-feedback-surveys.md). In most cases, you don't need to create custom track events as you'll just use the [feature key](feature.md#feature-key) instead.
### Attributes
An event entity is essentially a collection of **attributes** associated with an event name or feature key. Each attribute is a **key** — **value** pair supplied by your application. There is one mandatory attribute each event must have: `userId`. It is up to you to provide whichever attributes you deem necessary.
Event attributes are useful mainly when setting up event-based features which can be configured to match specific events based on these attributes. Another use case applies to automatic feedback surveys which can be set to trigger on a specific event based on a combination of attributes.
Reflag manages a set of computed attributes when you send data to Reflag:
* `First seen`**,** `Last seen` and `Event count` of the [users](user.md#attributes) and [companies](company.md#attributes),
* `First used`**,** `Last used` and `Event count` of the [companies](company.md#attributes) relative to the [feature](feature.md#metrics) that matched the event.
{% hint style="info" %}
In Segment terminology, these events can be thought of as acting as a [Track](https://segment.com/docs/connections/spec/track/) call. Event attributes can be thought of as [Event traits](https://segment.com/docs/connections/spec/track/#sending-traits-in-a-track-call---destination-actions).
{% endhint %}
{% hint style="warning" %}
Do not include PII data when sending in event attributes. It is recommended that any sensitive data should be hashed or otherwise not included.
{% endhint %}
### Next steps
* Learn about [feedback](feedback.md) and setting up [automatic feedback surveys](../launch-monitor/automated-feedback-surveys.md) within Reflag UI,
* Learn how to [create an event-based feature](feature-events.md) using user attributes within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/self-opt-in.md:
--------------------------------------------------------------------------------
```markdown
---
description: How to create a beta feature self opt-in page in React with Reflag
icon: browser
---
# Create a beta feature opt-in page
Creating a page where users can opt into certain beta/experimental features is straight forward with Reflag and the Reflag React SDK.
The basic concept is to set an attribute on the user/company which denotes that the user has self opted into a specific feature, for example `optin-<flagKey> = true.` Updating an attribute is very simple from the SDK. Then use that attribute to control who has access to the feature by updating the flag access rules such that users/companies with the attribute `optin-<flagKey>=true` will have access to the feature.
## Step by step guide
Here's a step by step guide:
1. Select a feature to let people self opt-into.
2. Add the rule: `optin-<flagKey> IS TRUE` to the rules section for all the environments. Replace `<flagKey>` with the actual flag key of the flag.
3. Use the following React component to let users self opt-in to specific features:
```tsx
import { useUpdateUser, useFlag, TypedFlags } from "@reflag/react-sdk";
import { useState } from "react";
function FeatureOptIn({
flagKey,
featureName,
}: {
flagKey: TypedFlags;
featureName: string;
}) {
const updateUser = useUpdateUser();
const [sendingUpdate, setSendingUpdate] = useState(false);
const { isEnabled } = useFlag(flagKey);
return (
<div>
<label htmlFor="huddlesOptIn">Opt-in to {featureName} feature</label>
<input
disabled={sendingUpdate}
id="huddlesOptIn"
type="checkbox"
checked={isEnabled}
onChange={() => {
setSendingUpdate(true);
updateUser({
[`optin-${flagKey}`]: isEnabled ? "false" : "true",
}).then(() => {
setSendingUpdate(false);
});
}}
/>
</div>
);
}
```
### How it works
The React component above uses [remote attributes](https://reflag.com/changelog/introducing-remote-attributes) to ensure that any flag you've enabled stays enabled between sessions.
### Next steps
- Learn how to manage who has access, modify the [Targeting rules](feature-rollouts/feature-targeting-rules.md) in the UI.
```
--------------------------------------------------------------------------------
/introduction/concepts/event.md:
--------------------------------------------------------------------------------
```markdown
# Track event
### Definition
A track event in Reflag is sent by the client when an user interacts with a feature within your application. Reflag uses these events to [track feature adoption](feature.md#metrics) or launch [feedback surveys](../../product-handbook/launch-monitor/automated-feedback-surveys.md). In most cases, you don't need to create custom track events as you'll just use the [feature key](feature.md#feature-key) instead.
### Attributes
An event entity is essentially a collection of **attributes** associated with an event name or feature key. Each attribute is a **key** — **value** pair supplied by your application. There is one mandatory attribute each event must have: `userId`. It is up to you to provide whichever attributes you deem necessary.
Event attributes are useful mainly when setting up event-based features which can be configured to match specific events based on these attributes. Another use case applies to automatic feedback surveys which can be set to trigger on a specific event based on a combination of attributes.
Reflag manages a set of computed attributes when you send data to Reflag:
* `First seen`**,** `Last seen` and `Event count` of the [users](user.md#attributes) and [companies](company.md#attributes),
* `First used`**,** `Last used` and `Event count` of the [companies](company.md#attributes) relative to the [feature](feature.md#metrics) that matched the event.
{% hint style="info" %}
In Segment terminology, these events can be thought of as acting as a [Track](https://segment.com/docs/connections/spec/track/) call. Event attributes can be thought of as [Event traits](https://segment.com/docs/connections/spec/track/#sending-traits-in-a-track-call---destination-actions).
{% endhint %}
{% hint style="warning" %}
Do not include PII data when sending in event attributes. It is recommended that any sensitive data should be hashed or otherwise not included.
{% endhint %}
### Next steps
* Learn about [feedback](feedback.md) and setting up [automatic feedback surveys](../../product-handbook/launch-monitor/automated-feedback-surveys.md) within Reflag UI,
* Learn how to [create an event-based feature](broken-reference) using user attributes within Reflag UI.
```
--------------------------------------------------------------------------------
/guides/self-opt-in.md:
--------------------------------------------------------------------------------
```markdown
---
description: How to create a beta feature self opt-in page in React with Reflag
icon: browser
---
# Beta feature opt-in
Creating a page where users can opt into certain beta/experimental features is straightforward with Reflag and the Reflag React SDK.
The basic concept is to set an attribute on the user/company which denotes that the user has self-opted into a specific feature, for example `optin-<featureKey> = true.` Updating an attribute is very simple from the SDK. Then use that attribute to control who has access to the feature by updating the feature access rules such that users/companies with the attribute `optin-<featureKey>=true` will have access to the feature.
## Step-by-step guide
Here's a step-by-step guide:
1. Select a feature to let people self-opt into.
2. Add the rule: `optin-<featureKey> IS TRUE` to the rules section for all the environments. Replace `<featureKey>` with the actual feature key of the feature.
3. Use the following React component to let users self-opt opt-in to specific features:
```tsx
import { useUpdateUser, useFlag, ReflagFeatures } from "@reflag/react-sdk";
import { useState } from "react";
function FeatureOptIn({
featureKey,
featureName,
}: {
featureKey: ReflagFeatures;
featureName: string;
}) {
const updateUser = useUpdateUser();
const [sendingUpdate, setSendingUpdate] = useState(false);
const { isEnabled } = useFlag(featureKey);
return (
<div>
<label htmlFor="huddlesOptIn">Opt-in to {featureName} feature</label>
<input
disabled={sendingUpdate}
id="huddlesOptIn"
type="checkbox"
checked={isEnabled}
onChange={() => {
setSendingUpdate(true);
updateUser({
[`optin-${featureKey}`]: isEnabled ? "false" : "true",
}).then(() => {
setSendingUpdate(false);
});
}}
/>
</div>
);
}
```
### How it works
The React component above uses [remote attributes](https://reflag.com/changelog/introducing-remote-attributes) to ensure that any feature you've enabled stays enabled between sessions.
### Next steps
* Learn how to manage who has access, and modify the [Targeting rules](../product-handbook/feature-rollouts/feature-targeting-rules.md) in the UI.
```
--------------------------------------------------------------------------------
/product-handbook/anonymous-users.md:
--------------------------------------------------------------------------------
```markdown
---
description: How to use Reflag with anonymous users
---
# Anonymous users
Reflag is designed for SaaS applications in which users are authenticated and belong to a company group. However, you can still use Reflag for certain use cases where users aren't authenticated.
Example use cases:
* Toggle features on/off for all anonymous users on marketing pages or docs.
* For anonymous users that belong to companies, for example for a white-label solution for ordering food online: roll out features to anonymous users belonging to certain restaurants or roll it users belonging to a percentage of restaurants (companies).
### How to toggle features for anonymnous users
First, create a new flag, use it on the respective feature and ship it.
On the Access tab, you can now use "No-one" or "Everyone" to toggle the feature off and on. "Some" is not supported for anonymous users.
For anonymous users you supply an empty user ID and empty company ID.
{% tabs %}
{% tab title="Node.js" %}
```typescript
import { ReflagClient } from "@reflag/node-sdk";
const client = new ReflagClient(...)
// using an empty context for anonymous users
const { isEnabled } = client.bindClient({}).getFlag("export-to-csv")
```
{% endtab %}
{% tab title="React" %}
```tsx
import { ReflagProvider } from "@reflag/react-sdk";
function App() {
return (
<ReflagProvider> // no user/company provided
<Routes />
</ReflagProvider>
);
}
```
{% endtab %}
{% endtabs %}
### How to toggle features for anonymous users where you know their company
If the user is anonymous but you do know the company entity, you can simply supply the given company ID and an empty user ID. This lets you control features for anonymous users beloning to the given company.
{% tabs %}
{% tab title="Node.js" %}
```typescript
import { ReflagClient } from "@reflag/node-sdk";
const client = new ReflagClient(...)
// supply only the company ID if the users is anonymous but belongs to a company
const { isEnabled } = client.bindClient({company: {id: "petes-burgers"}).getFlag("export-to-csv")
```
{% endtab %}
{% tab title="React" %}
```tsx
import { ReflagProvider } from "@reflag/react-sdk";
function App() {
return (
<ReflagProvider company={{id: "petes-burgers"}}> // company provided
<Routes />
</ReflagProvider>
);
}
```
{% endtab %}
{% endtabs %}
```
--------------------------------------------------------------------------------
/.gitbook/includes/integrations.md:
--------------------------------------------------------------------------------
```markdown
---
title: Integrations
---
<table data-view="cards" data-full-width="true"><thead><tr><th></th><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>Get notified about feature changes and feedback</td><td></td><td><a href="../assets/slack.svg">slack.svg</a></td><td><a href="../../integrations/slack.md">slack.md</a></td></tr><tr><td>Create feature flags from Linear</td><td></td><td><a href="../assets/linear.svg">linear.svg</a></td><td><a href="../../integrations/linear.md">linear.md</a></td></tr><tr><td>Clean-up code references with AI</td><td></td><td><a href="../assets/github-logo.svg">github-logo.svg</a></td><td><a href="../../integrations/github.md">github.md</a></td></tr><tr><td>Work with Reflag flags using the Vercel toolbar</td><td></td><td><a href="../assets/vercel-logo.svg">vercel-logo.svg</a></td><td><a href="https://flags-sdk.dev/providers/bucket">https://flags-sdk.dev/providers/bucket</a></td></tr><tr><td>Catch regressions on feature releases</td><td></td><td><a href="../assets/datadog.svg">datadog.svg</a></td><td><a href="../../integrations/datadog.md">datadog.md</a></td></tr><tr><td>Query analytics based on feature access filters</td><td></td><td><a href="../assets/posthog.svg">posthog.svg</a></td><td><a href="../../integrations/posthog.md">posthog.md</a></td></tr><tr><td>Track feature adoption metrics</td><td></td><td><a href="../assets/segment.svg">segment.svg</a></td><td><a href="../../integrations/segment.md">segment.md</a></td></tr><tr><td>Query analytics based on feature access filters</td><td></td><td><a href="../assets/amplitude.svg">amplitude.svg</a></td><td><a href="../../integrations/amplitude.md">amplitude.md</a></td></tr><tr><td>Query analytics based on feature access filters</td><td></td><td><a href="../assets/mixpanel.svg">mixpanel.svg</a></td><td><a href="../../integrations/mixpanel.md">mixpanel.md</a></td></tr><tr><td>Export feature data for CS, Marketing, and Sales tools</td><td></td><td><a href="../assets/aws-s3.svg">aws-s3.svg</a></td><td><a href="../../integrations/aws-s3.md">aws-s3.md</a></td></tr><tr><td>Share flag access with your docs to personalize them. </td><td></td><td><a href="../assets/gitbook-logo.svg">gitbook-logo.svg</a></td><td><a href="https://gitbook.com/docs/publishing-documentation/adaptive-content/enabling-adaptive-content/feature-flags#bucket">https://gitbook.com/docs/publishing-documentation/adaptive-content/enabling-adaptive-content/feature-flags#bucket</a></td></tr></tbody></table>
```
--------------------------------------------------------------------------------
/integrations/aws-s3.md:
--------------------------------------------------------------------------------
```markdown
---
description: Export feature data for CS, Marketing, and Sales tools, via Amazon AWS S3
---
# AWS S3
To configure an automatic data export to an Amazon S3 bucket, follow the steps below.
## Implementation steps
1. Log into the AWS Console. Navigate to `Identity and Access Management (IAM)` and select the `Users` option.\
<figure><img src="../.gitbook/assets/630b5e9-image.png" alt=""><figcaption></figcaption></figure>
2. For security reasons, we recommend creating a new restricted user to access the designated S3 bucket. Use the `Create user` button to create a new user.
3. Select the desired user in the `Users` window, then click on the `Security credentials tab` and scroll down to the `Access Keys` section. \
\
There, click `Create Access Key` to obtain a new **Access Key** and **Secret Access Key.**\
<figure><img src="../.gitbook/assets/1a0b50d-image.png" alt=""><figcaption></figcaption></figure>
4. Copy the user's ARN (AWS unique resource number). The ARN will be required when setting up the permissions on the S3 bucket.
5. Navigate to [https://s3.console.aws.amazon.com/s3/buckets/](https://s3.console.aws.amazon.com/s3/buckets/) to open the S3 configuration section.
6. Create or select an existing S3 bucket. \
\
In the bucket details pane, create a new folder (optional), and use the `Copy URL` functionality to get the public URL. \
\
This URL will be required when configuring the `Scheduled Data Export` in Reflag.
7. Switch to the `Permissions` tab of the S3 bucket details window. 
8. Scroll down to the `Bucket policy` section. Normally, if no other policies have been set up, it will be empty. 
9. Click on `Edit` and paste the policy below into the editor. \
\
If there are already other statements in the S3 bucket's policy, copy the statement object and paste it into the list. \
\
Replace `<user_arn>` and `<bucket_arn>` with the real values from your AWS account.
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowReflagDotCom",
"Effect": "Allow",
"Principal": {
"AWS": "<user_arn>"
},
"Action": [
"s3:PutObject",
"s3:PutObjectAcl",
"s3:ListBucket",
"s3:AbortMultipartUpload",
"s3:PutObjectTagging"
],
"Resource": [
"<bucket_arn>",
"<bucket_arn>/*"
]
}
]
}
```
Following the steps above should give you the **URL**, **Access Key**, and **Secret Access Key** settings required to configure an automatic data export.
```
--------------------------------------------------------------------------------
/integrations/linear.md:
--------------------------------------------------------------------------------
```markdown
---
description: Create features and manage access in Linear
---
# Linear
## Connect to Linear
For most integrations, you first need connect Reflag with your Linear account. To do so:
1. Navigate to **Settings** > **Organization**
2. Click "**Connect to Linear**"
3. For the [Agent](linear.md#agent) integration, **select the app** you want to manage in the dropdown.
## Integrations
<table><thead><tr><th width="218.89453125">Name</th><th>Use case</th></tr></thead><tbody><tr><td><strong>Agent @-mention</strong></td><td>Create features and manage feature access from Linear</td></tr><tr><td><strong>Broadcast</strong></td><td>Share feature access changes to Linear issues or projects</td></tr><tr><td><strong>Project template</strong></td><td>Add default issue to create feature flag in new Linear projects</td></tr></tbody></table>
***
### Agent @-mention
The Agent integration enables you to `@reflag` within Linear. 
{% embed url="https://139729605.fs1.hubspotusercontent-eu1.net/hubfs/139729605/Videos/bucketco-website/linear-agent-create-flag_h264.mp4" %}
#### Creating features
Example: `@reflag create feature flag for this issue` 
#### Managing feature access and stage
Example: `@reflag release to everyone and bump stage to GA` 
If there's a Customer Request, try: `@reflag release to the customers that requsted it`
#### Link issue to feature
Example: `@reflag link to <feature name/key>`
***
### Broadcast
The broadcast integration posts feature access change to a Linear issue or project.
<figure><img src="../.gitbook/assets/image.png" alt=""><figcaption></figcaption></figure>
Here's how to get started:\
1. Make sure you've [connected](linear.md#first-connect-to-linear) to Linear.
2. In the feature sidebar, select a Linear issue or project.
3. Whenever you change feature access or stage, you can choose to also send the changes to the chosen Linear issue or project.
When you link a feature with a Linear issue or project, you'll see a link to the feature on the Linear issue or in the project resources.
***
### Template
When you start working on a new project in Linear, we recommend adding a "Create feature flag" issue. 
<figure><img src="../.gitbook/assets/image (1).png" alt="A Linear project template with an issue included by default to make it easy to get started with features in Reflag"><figcaption><p>A Linear project template with an issue included by default to make it easy to get started with features in Reflag</p></figcaption></figure>
This way, when you start a new project, part of the initial work will be setting up a feature in Reflag. 
By using [Linear project templates](https://linear.app/docs/project-templates#create-templates), you can automate this so that all new projects come with the option to create a Reflag issue.
Pro tip: You can link directly to Reflag's "New feature" modal with the [flag.new](https://flag.new) shortcut.
```
--------------------------------------------------------------------------------
/product-handbook/concepts/company.md:
--------------------------------------------------------------------------------
```markdown
# Company
### Definition
A **company** entity in Reflag is used to group [users](user.md), [events](event.md) and [feedback](feedback.md). All data sent to Reflag from your side will be associated with a company in one way or another. For instance, when updating the details of an user, the company ID can be supplied to inform Reflag that the user "_has been seen_" acting as part of said company. In other cases, if the company is not explicitly identified, Reflag will use the last known company (default) that the user was part of.
### Attributes
A company entity, aside from being a group for users acting in its stead, is also a collection of **attributes**. Each attribute is a **key** — **value** pair supplied by your application. There is one mandatory attribute each company must have: `ID`, and two special attributes Reflag uses in its UI for convenience: `name` and `avatar`. It is up to you to provide whichever attributes you deem necessary.
Reflag manages a set of computed attributes when you send data to Reflag:
* `First seen` and `Last seen` denote the first and last time the company-related interactions have been sent to Reflag,
* `Event count` is updated any time there is a new [event](event.md) received referencing the company.
Some use cases for company attributes could be: "_plan_" or "_tier_" to identify the subscription status; "_monthly spend_"; "_geographic location_", etc. Any company attribute can be used in [company segments](segment.md), attribute-based [features](feature.md) as well as any [targeting rule](targeting-rules.md).
{% hint style="info" %}
In Segment terminology, companies can be thought of as acting as a [Group](https://segment.com/docs/connections/spec/group/) call. Company attributes can be thought of as [Group traits](https://segment.com/docs/connections/spec/group/).
{% endhint %}
{% hint style="warning" %}
Do not include PII data when sending in company attributes. It is recommended that any sensitive data should be hashed or otherwise not included.
{% endhint %}
### Associating with users
[Events](event.md) sent to Reflag from your application, are usually identified only by the [user](user.md) that triggered said event. To associate these events with a [company](company.md), make sure to associate the user with one. You can associate the user with multiple companies — each time the user is seen acting as part of another company, Reflag remembers, and the company becomes the new "_default_" for the user. Every subsequent event that lacks explicit company information will be associated with the default.
{% hint style="info" %}
[Reflag SDKs](../../supported-languages/overview.md) automatically maintain the associations between users and companies, as long as you supply their respective details on initialization. 
{% endhint %}
{% hint style="warning" %}
If a user's events aren't associated with a company, they will not be included in Reflag (which is primarily based on company-level activity).
{% endhint %}
### Next steps
* Learn about [users](user.md), [events](event.md) and [segments](segment.md),
* Learn how to [create company segments](../creating-segments.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/product-handbook/service-resiliency.md:
--------------------------------------------------------------------------------
```markdown
---
description: How we keep your product working even if the Reflag service is disrupted.
---
# Service Resiliency
To keep your product working even if the Reflag service is disrupted, we provide a number of safe guards and features that build resiliency.
### Local evaluation
To improve latency and provide downtime protection, local evaluation is supported in our [node-sdk](../sdk/@reflag/node-sdk/) and [openfeature-node-sdk](../supported-languages/openfeature.md).
Ordinarily, our SDKs send your user/company attributes to our servers and return a list of flags that should be enabled. However, to avoid potential downtime, you can evaluate flags locally on your servers instead of sending a request to our servers.
With local evaluation, our SDKs will download the flag definitions from our servers and run checks against the rules using the given user and company properties locally instead of contacting our servers for every evaluation. The SDK caches the downloaded list in memory, so will keep working during service disruption so long as the service that is using the SDK doesn't get rebooted.
### Edge-runtime (like Cloudflare Workers) support
Equally as effective as local evaluation is our [support for edge-runtimes](service-resiliency.md#edge-runtime-like-cloudflare-workers-support) like Cloudflare Workers, also in the Node SDK.
Reflag maintains a cached set of flag definitions in the memory to decide which features to turn on for which users/companies.
The EdgeClient uses a strategy to keep these feature definitions fresh: The first request to a new worker instance fetches definitions from Reflag's servers, while subsequent requests use the cache. During an invocation, when the cache has expired, the request will be served using the stale cache while it’s being updated in the background, so response times are not affected. However, during downtime, this cache would continue to be served.
### Bootstrapped flags
With [getFlagsForBootstrap()](https://docs.reflag.com/supported-languages/node-sdk#bootstrapping-client-side-applications) in the Node SDK and [ReflagBootstrappedProvider](https://docs.reflag.com/supported-languages/react-sdk#server-side-rendering-and-bootstrapping) in the React SDK, you can evaluate flags on the server and pass them to your client-side applications.
Bootstrapping is recommended as it means that the server has local evaluation and will pass the evaluated flags to the frontend on load, further protecting you from service disruption.
### Offline flags
We also provide [Offline Mode](https://docs.reflag.com/supported-languages/node-sdk#configuring) in all our SDKs, which, when enabled, means we use [flag overrides](https://docs.reflag.com/supported-languages/node-sdk#flag-overrides). This is generally useful during testing and local development; however, it can also be supplied to the SDKs so that they are used as defaults if our servers are down.
### Client SDK caching
Finally, all client SDKs (web) cache the last flags and will keep using those until our servers respond with fresh data. This won’t help if the page was loaded when our servers were down, but bootstrapping from your server would mitigate this.
```
--------------------------------------------------------------------------------
/introduction/concepts/company.md:
--------------------------------------------------------------------------------
```markdown
# Company
### Definition
A **company** entity in Reflag is used to group [users](user.md), [events](event.md) and [feedback](feedback.md). All data sent to Reflag from your side will be associated with a company in one way or another. For instance, when updating the details of an user, the company ID can be supplied to inform Reflag that the user "_has been seen_" acting as part of said company. In other cases, if the company is not explicitly identified, Reflag will use the last known company (default) that the user was part of.
### Attributes
A company entity, aside from being a group for users acting in its stead, is also a collection of **attributes**. Each attribute is a **key** — **value** pair supplied by your application. There is one mandatory attribute each company must have: `ID`, and two special attributes Reflag uses in its UI for convenience: `name` and `avatar`. It is up to you to provide whichever attributes you deem necessary.
Reflag manages a set of computed attributes when you send data to Reflag:
* `First seen` and `Last seen` denote the first and last time the company-related interactions have been sent to Reflag,
* `Event count` is updated any time there is a new [event](event.md) received referencing the company.
Some use cases for company attributes could be: "_plan_" or "_tier_" to identify the subscription status; "_monthly spend_"; "_geographic location_", etc. Any company attribute can be used in [company segments](segment.md), attribute-based [features](feature.md) as well as any [targeting rule](targeting-rules.md).
{% hint style="info" %}
In Segment terminology, companies can be thought of as acting as a [Group](https://segment.com/docs/connections/spec/group/) call. Company attributes can be thought of as [Group traits](https://segment.com/docs/connections/spec/group/).
{% endhint %}
{% hint style="warning" %}
Do not include PII data when sending in company attributes. It is recommended that any sensitive data should be hashed or otherwise not included.
{% endhint %}
### Associating with users
[Events](event.md) sent to Reflag from your application, are usually identified only by the [user](user.md) that triggered said event. To associate these events with a [company](company.md), make sure to associate the user with one. You can associate the user with multiple companies — each time the user is seen acting as part of another company, Reflag remembers, and the company becomes the new "_default_" for the user. Every subsequent event that lacks explicit company information will be associated with the default.
{% hint style="info" %}
[Reflag SDKs](../../supported-languages/overview.md) automatically maintain the associations between users and companies, as long as you supply their respective details on initialization. 
{% endhint %}
{% hint style="warning" %}
If a user's events aren't associated with a company, they will not be included in Reflag (which is primarily based on company-level activity).
{% endhint %}
### Next steps
* Learn about [users](user.md), [events](event.md) and [segments](segment.md),
* Learn how to [create company segments](../../product-handbook/feature-targeting-rules/creating-segments.md) within Reflag UI.
```
--------------------------------------------------------------------------------
/api/api-access.md:
--------------------------------------------------------------------------------
```markdown
---
description: >-
Understand when to use the Reflag Public API and when to use the Reflag REST
API
---
# API Access
Reflag offers two distinct APIs:
1. [**Public API**](public-api/public-api-reference.md): This API is required for interaction with customer applications through our SDK or directly via the Public API endpoints. It utilizes two types of keys:
* **Publishable Key**: Used in client-side code to securely connect to Reflag services.
* **Secret Key**: Employed in server-side environments to safeguard sensitive interactions and data.
Each environment on Reflag has a publishable key and a secret key.
2. [**REST API:**](reflag-rest-api/reflag-api-reference.md) This API can be used by customers to directly access and manipulate their account in Reflag (such as listing apps, flags, and amending targeting rules). API Keys govern access to the REST API. API Keys are bound to your Reflag app.
## Public API and SDK Access
To use the Reflag SDKs and/or Reflag Public API, you will need an environment-specific SDK key. These keys are unique to each environment on Reflag and ensure secure interaction with data in that environment only. While the data (flag targeting, companies, users, events, etc.) are environment-specific, the exposed flag details and remote config values are shared across all environments.
When developing client-facing code, such as web, mobile, or any publicly accessible applications, utilize the **"Publishable key"**. This key is safe to share, as it has limited permissions for accessing and transmitting information.
Utilize the **"Secret key"** to access additional data like targeting rule definitions and secret flags. This key is intended for use in server-side environments only and must remain confidential.
Refer to the [Reflag SDKs ](broken-reference)documentation for detailed information on useful keys for each flag.
{% hint style="warning" %}
SDK keys are auto-generated by Reflag for each app environment and cannot be changed.
{% endhint %}
<figure><img src="../.gitbook/assets/image (31).png" alt=""><figcaption><p>The SDK and API keys</p></figcaption></figure>
## REST API Access
The REST API allows for direct manipulation of your Reflag account, simplifying processes by bypassing the need for the Reflag web app interface. This enables programmatic control over environment settings, flag configurations, and more, providing flexibility and automation for developers.
One primary use case is the [Reflag CLI,](../sdk/documents/cli/) which can be configured in CI/CD pipelines when given the API key. This setup enables seamless flag management during automated deployment processes, enhancing workflow efficiency and consistency across different stages of deployment.
To start, create a new API key and select its scopes. After setting the necessary scopes, securely store the API key for use in your CI/CD pipelines or other automated processes.
<figure><img src="../.gitbook/assets/image (32).png" alt="" width="563"><figcaption><p>Create a new API key</p></figcaption></figure>
After clicking _"Create,"_ you'll receive the API key. Remember to save it, as you won't be able to retrieve it later.
{% hint style="warning" %}
Select only the necessary scopes for your API keys. Limit permissions and delete unused keys.
{% endhint %}
```
--------------------------------------------------------------------------------
/.gitbook/assets/vercel-logo.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>@media (prefers-color-scheme: dark) { path { fill: white; }}</style>
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.53 176L132.765 112L96 176H169.53ZM206.612 173.087L237.337 114.909H224.047L202.853 157.16L181.658 114.909H168.368L199.093 173.087H206.612ZM416 114.909V173.087H404.998V114.909H416ZM354.758 151.372C354.758 146.838 355.703 142.851 357.594 139.409C359.485 135.968 362.121 133.318 365.501 131.461C368.882 129.604 372.836 128.675 377.364 128.675C381.375 128.675 384.985 129.549 388.194 131.297C391.403 133.045 393.953 135.64 395.843 139.081C397.734 142.523 398.709 146.729 398.766 151.7V154.24H366.362C366.59 157.846 367.65 160.686 369.541 162.762C371.49 164.783 374.098 165.794 377.364 165.794C379.426 165.794 381.318 165.248 383.036 164.155C384.755 163.062 386.045 161.588 386.904 159.73L398.165 160.55C396.789 164.647 394.211 167.924 390.429 170.382C386.646 172.841 382.292 174.07 377.364 174.07C372.836 174.07 368.882 173.141 365.501 171.284C362.121 169.427 359.485 166.777 357.594 163.336C355.703 159.894 354.758 155.906 354.758 151.372ZM387.42 147.275C387.019 143.725 385.902 141.13 384.068 139.491C382.234 137.798 380 136.951 377.364 136.951C374.326 136.951 371.863 137.852 369.972 139.655C368.08 141.458 366.906 143.998 366.447 147.275H387.42ZM336.193 139.491C338.027 140.966 339.172 143.014 339.632 145.636L350.976 145.063C350.575 141.731 349.402 138.836 347.453 136.377C345.504 133.919 342.984 132.035 339.888 130.723C336.852 129.358 333.5 128.675 329.832 128.675C325.305 128.675 321.352 129.604 317.97 131.461C314.589 133.318 311.953 135.968 310.062 139.409C308.171 142.851 307.226 146.838 307.226 151.372C307.226 155.906 308.171 159.894 310.062 163.336C311.953 166.777 314.589 169.427 317.97 171.284C321.352 173.141 325.305 174.07 329.832 174.07C333.613 174.07 337.052 173.387 340.146 172.021C343.242 170.601 345.762 168.607 347.711 166.04C349.66 163.472 350.833 160.468 351.234 157.026L339.803 156.535C339.402 159.43 338.284 161.67 336.451 163.254C334.617 164.783 332.41 165.548 329.832 165.548C326.28 165.548 323.529 164.319 321.58 161.861C319.632 159.403 318.659 155.906 318.659 151.372C318.659 146.838 319.632 143.342 321.58 140.884C323.529 138.426 326.28 137.197 329.832 137.197C332.297 137.197 334.416 137.961 336.193 139.491ZM280.381 129.656H290.62L290.915 138.015C291.642 135.649 292.652 133.812 293.947 132.503C295.823 130.605 298.441 129.656 301.796 129.656H305.977V138.603H301.711C299.322 138.603 297.36 138.928 295.823 139.579C294.345 140.229 293.207 141.259 292.411 142.669C291.672 144.079 291.302 145.868 291.302 148.037V173.087H280.381V129.656ZM233.155 139.409C231.264 142.851 230.319 146.838 230.319 151.372C230.319 155.906 231.264 159.894 233.155 163.336C235.046 166.777 237.682 169.427 241.063 171.284C244.444 173.141 248.398 174.07 252.925 174.07C257.852 174.07 262.208 172.841 265.989 170.382C269.773 167.924 272.351 164.647 273.726 160.55L262.466 159.73C261.607 161.588 260.317 163.062 258.598 164.155C256.879 165.248 254.988 165.794 252.925 165.794C249.659 165.794 247.051 164.783 245.103 162.762C243.212 160.686 242.152 157.846 241.923 154.24H274.328V151.7C274.27 146.729 273.296 142.523 271.405 139.081C269.515 135.64 266.965 133.045 263.756 131.297C260.547 129.549 256.937 128.675 252.925 128.675C248.398 128.675 244.444 129.604 241.063 131.461C237.682 133.318 235.046 135.968 233.155 139.409ZM259.63 139.491C261.462 141.13 262.581 143.725 262.982 147.275H242.008C242.467 143.998 243.642 141.458 245.533 139.655C247.424 137.852 249.888 136.951 252.925 136.951C255.56 136.951 257.796 137.798 259.63 139.491Z" fill="#09090B"/>
</svg>
```
--------------------------------------------------------------------------------
/.gitbook/assets/next-js.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M308.067 112.026H363.109V122.16H341.274V175.471H330.356V122.16H308.067V112.026Z" fill="black"/>
<path d="M217.544 112.026V122.16H173.425V138.462H208.906V148.595H173.425V165.338H217.544V175.471H162.507V122.16H162.503V112.026H217.544Z" fill="black"/>
<path d="M245.028 112.053H230.741L281.915 175.498H296.244L270.654 143.797L296.203 112.101L281.915 112.123L263.5 134.936L245.028 112.053Z" fill="black"/>
<path d="M259.689 157.372L252.534 148.498L230.7 175.546H245.028L259.689 157.372Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.89 175.471L111.647 112H98V175.445H108.917V125.561L149.175 175.471H162.89Z" fill="black"/>
<path d="M365.563 175.084C364.763 175.084 364.083 174.807 363.514 174.255C362.944 173.702 362.663 173.033 362.67 172.241C362.663 171.47 362.944 170.808 363.514 170.256C364.083 169.703 364.763 169.427 365.563 169.427C366.332 169.427 367.005 169.703 367.574 170.256C368.152 170.808 368.44 171.47 368.448 172.241C368.44 172.764 368.307 173.244 368.04 173.673C367.767 174.109 367.42 174.451 366.983 174.698C366.554 174.953 366.08 175.084 365.563 175.084Z" fill="black"/>
<path d="M384.197 148.356H389.034V166.948C389.027 168.656 388.657 170.118 387.932 171.347C387.2 172.575 386.186 173.513 384.885 174.175C383.59 174.829 382.074 175.164 380.35 175.164C378.774 175.164 377.362 174.88 376.104 174.328C374.847 173.775 373.848 172.946 373.116 171.855C372.375 170.765 372.013 169.405 372.013 167.777H376.859C376.866 168.489 377.029 169.107 377.339 169.623C377.65 170.14 378.079 170.532 378.626 170.808C379.181 171.085 379.817 171.223 380.535 171.223C381.312 171.223 381.977 171.063 382.517 170.736C383.057 170.416 383.472 169.936 383.76 169.296C384.041 168.664 384.189 167.878 384.197 166.948V148.356Z" fill="black"/>
<path d="M408.94 155.627C408.822 154.5 408.304 153.62 407.402 152.995C406.491 152.362 405.315 152.05 403.873 152.05C402.86 152.05 401.987 152.203 401.262 152.501C400.537 152.806 399.975 153.213 399.59 153.729C399.206 154.246 399.013 154.835 398.998 155.496C398.998 156.049 399.131 156.529 399.39 156.929C399.649 157.336 399.996 157.677 400.448 157.954C400.891 158.237 401.387 158.47 401.928 158.659C402.475 158.848 403.022 159.008 403.569 159.139L406.092 159.757C407.106 159.99 408.09 160.302 409.029 160.702C409.968 161.095 410.819 161.596 411.566 162.2C412.313 162.803 412.905 163.53 413.341 164.381C413.778 165.232 414 166.228 414 167.377C414 168.925 413.6 170.285 412.794 171.463C411.988 172.633 410.826 173.55 409.302 174.211C407.786 174.866 405.952 175.2 403.792 175.2C401.706 175.2 399.886 174.88 398.355 174.24C396.816 173.608 395.617 172.677 394.752 171.456C393.887 170.234 393.421 168.744 393.354 166.991H398.148C398.214 167.907 398.51 168.671 399.013 169.289C399.523 169.9 400.189 170.35 401.003 170.656C401.824 170.954 402.741 171.107 403.755 171.107C404.813 171.107 405.745 170.947 406.551 170.634C407.349 170.321 407.978 169.885 408.43 169.318C408.889 168.758 409.118 168.096 409.125 167.34C409.118 166.65 408.91 166.075 408.511 165.624C408.104 165.174 407.542 164.796 406.824 164.49C406.1 164.185 405.256 163.908 404.294 163.669L401.232 162.898C399.02 162.338 397.267 161.487 395.987 160.346C394.701 159.204 394.064 157.692 394.064 155.794C394.064 154.238 394.493 152.872 395.359 151.701C396.216 150.53 397.393 149.621 398.88 148.974C400.374 148.32 402.061 148 403.939 148C405.848 148 407.519 148.32 408.962 148.974C410.404 149.621 411.537 150.523 412.357 151.672C413.179 152.821 413.608 154.137 413.63 155.627H408.94Z" fill="black"/>
</svg>
```
--------------------------------------------------------------------------------
/product-handbook/concepts/filter.md:
--------------------------------------------------------------------------------
```markdown
# Filter
### Definition
A filter, in Reflag, is a mechanism that is used to check if entities such as [user](user.md), [company](company.md), [event](event.md), etc. match a set of predicates. Filters can also be aggregated into logical expressions, thus, facilitating advanced use cases.
Reflag support the following filter types:
* [Company attribute](company.md#attributes) filter, that can be used to check company attributes,
* Company [feature metrics](feature.md#metrics) filter, which allows checking for feature metrics applied to a given company,
* [User attribute](user.md#attributes) filter, used to check user attributes,
* [Event attribute](event.md#attributes) filter, used to check event attributes,
* Company [segment](segment.md) filter, can be used to check a company's membership in a segment,
* [Flag access](feature.md#access) filter, can be used to check whether a company has access to a flag,
* [Gradual rollout](../feature-rollouts/#gradually-roll-out-your-feature) filter, is used in advanced scenarios to evaluate whether a company matches target rollout bracket,
* [Other context](targeting-rules.md#evaluation-context) filter, used when rules can access additional context, in addition to user and company attributes.
### Company attribute filter
This filter can be used to check company attributes against a set predicates. The attributes include the `First seen` and `Last seen` which are maintained by Reflag. You can use any attribute name that your application sent to Reflag.
### Company feature metrics
This filter allows checking company's feature-specific metrics. These metrics include things like `Event count`, `First used`, `Last used`, end etc.
### User attribute filter
This filter can be used to check user attributes against a set predicates. You can use any attribute name that your application sent to Reflag when updating user.
### Event attribute filter
This filter can be used to check event attributes against a set predicates. You can use any attribute name that your application sent to Reflag when sending track events.
### Company segment filter
This filter can be used to check if a given company is (or not) included in a given segment. The filter essentially evaluates the segment's filter against the company.
### Flag access filter
This filter can be used to check if a given company has (or not) access to a given flag. The filter evaluates the flag's targeting rules against the provided company, and assumes skips evaluation of any non-company attribute related filters.
### Gradual rollout filter
This filter is used by feature access targeting when enabling gradual rollout. It will bracket the pool of companies based on a predictable hashing algorithm and check if the company falls within the rollout percentage.
### Other context filter
This filter can be used to check `other` context attributes against a set predicates. You can use any attribute name that your application sends to Reflag when evaluating feature access.
{% hint style="warning" %}
* Company attribute filters using `First seen` and `Last seen` attributes cannot be used in targeting rules,
* Company feature metrics filters are not supported in targeting rules,
* Event attribute filter is only used in event-based feature and automatic feedback surveys,
* Gradual rollout filter is only used in feature access targeting rules,
* Other context filter is only used in feature access targeting rules,
 Any filters that build up on on other filters inherit the restrictions of the filters they are based on.
{% endhint %}
### Next steps
* Learn in depth how to use filters in [setup feature access rules](../feature-rollouts/feature-targeting-rules.md).
```
--------------------------------------------------------------------------------
/introduction/concepts/filter.md:
--------------------------------------------------------------------------------
```markdown
# Filter
### Definition
A filter, in Reflag, is a mechanism that is used to check if entities such as [user](user.md), [company](company.md), [event](event.md), etc. match a set of predicates. Filters can also be aggregated into logical expressions, thus, facilitating advanced use cases.
Reflag support the following filter types:
* [Company attribute](company.md#attributes) filter, that can be used to check company attributes,
* Company [feature metrics](feature.md#metrics) filter, which allows checking for feature metrics applied to a given company (for example which [STARS](broken-reference) state the company is in for a feature),
* [User attribute](user.md#attributes) filter, used to check user attributes,
* [Event attribute](event.md#attributes) filter, used to check event attributes,
* Company [segment](segment.md) filter, can be used to check a company's membership in a segment,
* [Feature access](feature.md#access) filter, can be used to check whether a company has access to a feature,
* [Gradual rollout](../../product-handbook/feature-rollouts/#gradually-roll-out-your-feature) filter, is used in advanced scenarios to evaluate whether a company matches target rollout bracket,
* [Other context](targeting-rules.md#evaluation-context) filter, used when rules can access additional context, in addition to user and company attributes.
### Company attribute filter
This filter can be used to check company attributes against a set predicates. The attributes include the `First seen` and `Last seen` which are maintained by Reflag. You can use any attribute name that your application sent to Reflag.
### Company feature metrics
This filter allows checking company's feature-specific metrics. These metrics include things like `Event count`, `First used`, `Last used`, `STARS state`, end etc.
### User attribute filter
This filter can be used to check user attributes against a set predicates. You can use any attribute name that your application sent to Reflag when updating user.
### Event attribute filter
This filter can be used to check event attributes against a set predicates. You can use any attribute name that your application sent to Reflag when sending track events.
### Company segment filter
This filter can be used to check if a given company is (or not) included in a given segment. The filter essentially evaluates the segment's filter against the company.
### Feature access filter
This filter can be used to check if a given company has (or not) access to a given feature. The filter evaluates the feature's targeting rules against the provided company, and assumes skips evaluation of any non-company attribute related filters.
### Gradual rollout filter
This filter is used by feature access targeting when enabling gradual rollout. It will bracket the pool of companies based on a predictable hashing algorithm and check if the company falls within the rollout percentage.
### Other context filter
This filter can be used to check `other` context attributes against a set predicates. You can use any attribute name that your application sends to Reflag when evaluating feature access.
{% hint style="warning" %}
* Company attribute filters using `First seen` and `Last seen` attributes cannot be used in targeting rules,
* Company feature metrics filters are not supported in targeting rules,
* Event attribute filter is only used in event-based feature and automatic feedback surveys,
* Gradual rollout filter is only used in feature access targeting rules,
* Other context filter is only used in feature access targeting rules,
 Any filters that build up on on other filters inherit the restrictions of the filters they are based on.
{% endhint %}
### Next steps
* Learn in depth how to use filters in [setup feature access rules](../../product-handbook/feature-rollouts/feature-targeting-rules.md).
```
--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
```markdown
# Table of contents
## Welcome
* [Getting started](README.md)
## Supported languages
* [Overview](supported-languages/overview.md)
* [React SDK](sdk/@reflag/react-sdk/README.md)
* [Reference](sdk/@reflag/react-sdk/globals.md)
* [Vue SDK (beta)](sdk/@reflag/vue-sdk/README.md)
* [Reference](sdk/@reflag/vue-sdk/globals.md)
* [Browser SDK](sdk/@reflag/browser-sdk/README.md)
* [Feedback](sdk/documents/browser-sdk/FEEDBACK.md)
* [Reference](sdk/@reflag/browser-sdk/globals.md)
* [Node.js SDK](sdk/@reflag/node-sdk/README.md)
* [Reference](sdk/@reflag/node-sdk/globals.md)
* [Next.js](supported-languages/next.js.md)
* [OpenFeature](supported-languages/openfeature.md)
* [Ruby SDK](supported-languages/ruby-rails-stimulus.md)
## API
* [API Access](api/api-access.md)
* [Public API](api/public-api/README.md)
* [API Reference](api/public-api/public-api-reference.md)
* [Reflag REST API](api/reflag-rest-api/README.md)
* [API Reference](api/reflag-rest-api/reflag-api-reference.md)
* [CLI](sdk/documents/cli/README.md)
* [MCP](api/mcp.md)
## Integrations
* [Overview](integrations/overview.md)
* [Slack](integrations/slack.md)
* [Linear](integrations/linear.md)
* [Cursor](integrations/cursor.md)
* [GitHub](integrations/github.md)
* [Vercel](https://flags-sdk.dev/providers/reflag)
* [GitBook](https://gitbook.com/docs/publishing-documentation/adaptive-content/enabling-adaptive-content/feature-flags#reflag)
* [Datadog](integrations/datadog.md)
* [PostHog](integrations/posthog.md)
* [Segment](integrations/segment.md)
* [Amplitude](integrations/amplitude.md)
* [Mixpanel](integrations/mixpanel.md)
* [AWS S3](integrations/aws-s3.md)
## Product Handbook
* [Product overview](product-handbook/product-overview.md)
* [Feature rollouts](product-handbook/feature-rollouts/README.md)
* [Access rules](product-handbook/feature-rollouts/feature-targeting-rules.md)
* [Feature clean-up and archival](product-handbook/feature-clean-up-and-archival-beta/README.md)
* [AI code clean-up](product-handbook/feature-clean-up-and-archival-beta/ai-code-clean-up-beta.md)
* [Remote config](product-handbook/remote-config.md)
* [Type safety](product-handbook/type-safety.md)
* [Team permissions](product-handbook/team-permissions.md)
* [Data residency](product-handbook/data-residency.md)
* [Anonymous users](product-handbook/anonymous-users.md)
* [Launch monitor](product-handbook/launch-monitor/README.md)
* [Give feedback button](product-handbook/launch-monitor/give-feedback-button.md)
* [Automated feedback surveys](product-handbook/launch-monitor/automated-feedback-surveys.md)
* [Feature entitlements](product-handbook/feature-entitlements/README.md)
* [Simple role-based entitlements](product-handbook/feature-entitlements/simple-role-based-entitlements.md)
* [Creating segments](product-handbook/creating-segments.md)
* [Feature views](product-handbook/feature-views.md)
* [Managing apps](product-handbook/creating-and-managing-apps/README.md)
* [Environments](product-handbook/creating-and-managing-apps/environments.md)
* [Data model](product-handbook/concepts/README.md)
* [App](product-handbook/concepts/app.md)
* [Environment](product-handbook/concepts/environment.md)
* [Flag](product-handbook/concepts/feature.md)
* [Flag view](product-handbook/concepts/feature-view.md)
* [Company](product-handbook/concepts/company.md)
* [Segment](product-handbook/concepts/segment.md)
* [User](product-handbook/concepts/user.md)
* [Track event](product-handbook/concepts/event.md)
* [Flag events](product-handbook/concepts/feature-events.md)
* [Feedback](product-handbook/concepts/feedback.md)
* [Release stage](product-handbook/concepts/release-stage.md)
* [Targeting rules](product-handbook/concepts/targeting-rules.md)
* [Filter](product-handbook/concepts/filter.md)
* [Service Resiliency](product-handbook/service-resiliency.md)
## Guides
* [Use Reflag in your CLI](guides/use-reflag-in-your-cli.md)
* [Beta feature opt-in](guides/self-opt-in.md)
## Support
* [Get support](support/get-support.md)
***
* [Changelog](https://reflag.com/changelog)
```
--------------------------------------------------------------------------------
/supported-languages/next.js.md:
--------------------------------------------------------------------------------
```markdown
---
description: Next.js client for Reflag
---
# Next.js
Using Reflag with Next.js is straightforward. You can use the [@reflag/node-sdk](../sdk/@reflag/node-sdk/) on the server or [@reflag/react-sdk](../sdk/@reflag/react-sdk/) in the browser. Handling flag targeting server-side is often advantageous because it removes the need for additional handling of loading states.
## Server-side Rendering (SSR)
It's often advantageous to use Server-side Rendering when possible because it can help avoid extra loading screens while your Reflag flags are loading.
For pages that use server-side rendering, use the `@reflag/node-sdk` in the following manner. Create a new file called `reflag.ts` and adjust it to your needs:
```typescript
// app/reflag.ts
import { ReflagClient } from "@reflag/node-sdk";
import { auth } from "@/auth";
export let reflagClient: ReflagClient;
async function initReflag() {
reflagClient = new ReflagClient({
secretKey: process.env.REFLAG_SECRET_KEY ?? "",
logger: console,
});
await reflagClient.initialize();
}
export async function getContext() {
// get the logged-in session
const session = await auth();
const user = session?.user;
if (!user || !user.id) {
return {};
}
const userId = user.id;
return {
user: {
id: userId,
...user,
},
company: session.company,
};
}
export async function getFlag(key: string) {
if (!reflagClient) {
await initReflag();
}
return reflagClient.getFlag(await getContext(), key);
}
```
And then start using flags!
{% tabs %}
{% tab title="App router" %}
Here's how you use flags with App router:
```tsx
// members-add/page.tsx
import { getFlag } from "@/app/reflag";
async addMember() {
"use server";
const { track } = await getFlag("member-add");
track()
// add member
}
export default async function Page() {
const { isEnabled } = await getFlag("members-add");
if (!isEnabled) {
return null;
}
return (
<form action={addMember}>
<button type="submit">Add member</button>
</form>
);
}
```
{% endtab %}
{% tab title="Pages router" %}
Here's how you use flags with Pages router:
```tsx
// members-add/page.tsx
import { getFlag } from "@/app/reflag";
import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
export const getServerSideProps = (async () => {
const { isEnabled: membersAddEnabled } = await getFlag("members-add");
return { props: { membersAddEnabled } };
}) satisfies GetServerSideProps<{ membersAddEnabled: boolean }>;
export default function Page({
huddles,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (!membersAddEnabled) return null;
return (
<form>
<button type="submit">Add member</button>
</form>
);
}
```
{% endtab %}
{% endtabs %}
### Flags SDK by Vercel
[Flags SDK by Vercel](https://flags-sdk.dev/) is a Next.js oriented interface for server-side flags. It's straightforward to use with the Reflag Node.js SDK:
```typescript
import { flag } from '@vercel/flags/next';
import { getFlag } from "@/app/reflag";
export const huddles = flag({
key: 'huddles',
async decide() {
return getFlag(this.key).isEnabled;
},
});
```
## Client-side Rendering
Use `@reflag/react-sdk` with Next.js client-side rendering like so:
```tsx
// layout.tsx
import { ReflagProvider } from "@reflag/react-sdk";
import { useUser } from "./auth";
export default function Layout({ children }: { children: React.ReactNode }) {
const { user } = useUser()
return (
<ReflagProvider
publishableKey={process.env.NEXT_PUBLIC_REFLAG_PUBLISHABLE_KEY ?? ""}
user={{ id: user.id }}
company={{ id: user.companyId }}
>
{children}
</ReflagProvider>
);
}
```
In a client components, use the hooks `useFlag`
```tsx
"use client";
import { useFlag } from "@reflag/react-sdk";
function StartHuddle() {
const { isEnabled, track } = useFlag("huddle");
if (!isEnabled) {
return null
}
return (
<button onClick={track}>Start huddle!</button>
);
}
```
For more details, please see the [React SDK documentation](react-sdk/)
```
--------------------------------------------------------------------------------
/product-handbook/creating-and-managing-apps/environments.md:
--------------------------------------------------------------------------------
```markdown
---
description: Learn more about environments in Reflag
---
# Environments
What are environments?
An environment is an instance of an app that is specified by a group of shared parameters or servers. Environments are usually used to isolate a production app from testing, however, they can also differentiate multiple single-tenant deployments of the same app.
Reflag has three default environments: `Production`, `Staging`, and `Development`.
You can add, edit, and delete as many additional environments as you’d like.
All environments except `Production` can be edited or deleted at any time.
## Getting started
* When you create your account, there are three default environments: `Production`, `Staging`, and `Development`.
* Go to `Settings`
* Under `App: [Your App Name]`, click `Environments`
* Fetch your unique `publishable keys` and/or `secret keys` to implement with an [SDK or HTTP API](../../supported-languages/overview.md).
* This key is essential for integrating your applications with our platform. It ensures that events and data are attributed to the correct environment.
<figure><img src="../../.gitbook/assets/Screenshot 2025-09-12 at 15.33.57.png" alt="Reflag Environments"><figcaption></figcaption></figure>
## Managing environments
### Create a new environment
To create a new environment:
* Head to the `Settings` page
* Select the `Environments` menu item listed `App: [Your App Name]`
* Click the `+ New environment` button and give a name for your new environment.
* If needed, you can rename the environment later
* After clicking the `Create` button, the new environment will appear in the list alongside its associated `publishable key` and `secret key.`
<figure><img src="../../.gitbook/assets/Screenshot 2025-09-12 at 15.35.09.png" alt="Environments after adding a new environment"><figcaption><p>Environments after adding "Pre-Production"</p></figcaption></figure>
{% hint style="info" %}
The `Production` environment cannot be deleted or edited. New environments can be edited or deleted at any time.
{% endhint %}
### Switching Between Environments
You can switch between environments by:
* Click the environment listed in the left-hand navigation bar
* The current active environment name is highlighted in the left-hand navigation bar.
<figure><img src="../../.gitbook/assets/Screenshot 2025-09-12 at 15.36.14.png" alt="Switching between environments"><figcaption></figcaption></figure>
## Environment settings
There are three levels of settings in Reflag:
* `Organization`: _C_ontains the organization-wide settings
* `App: [Your App Name]`: Contains the application-wide settings
* `Environment: [Name]`: Contain environment-specific settings for the current application.
### Application-wide functionalities
When you're configuring application-wide settings, environments aren't applicable.
The following entities and configuration options are application-wide and not dependent on an environment:
* `Feature Views`: They're application-wide except for their `Slack Reporting` settings,
* `Company Segments`: They are shared across all environments. However, the companies in these segments will vary across environments.
### Production environment-based functionalities
There are environment-specific functionalities that are only allowed in the `Production` environment. These are:
* `Slack`: Reporting settings in Features and [Feature views](https://reflag.com/glossary/feature-views) can be configured from any environment, but are also reflected in the `Production` environment
* Some configuration sections are disabled if the selected environment is not `Production`.
{% hint style="info" %}
Some settings are `Production environment`-only and are disabled when a non-`Production` environment is active.
{% endhint %}
### Environment-based functionalities
All other settings and functionalities are environment-specific. Anything that requires data to be sent from the clients is inherently environment-specific. This includes:
* [Access rules](../feature-rollouts/feature-targeting-rules.md)
* [Automate feedback surveys](../launch-monitor/automated-feedback-surveys.md)
* [Feedback](../product-overview.md#feedback)
* [Tracking](../product-overview.md#tracking)
* Data export
```
--------------------------------------------------------------------------------
/api/mcp.md:
--------------------------------------------------------------------------------
```markdown
---
description: >-
Reflag supports the MCP protocol. Understand how to connect the agent in your
code editor to your Reflag account.
---
# MCP
## Set up MCP
Model Context Protocol enables seamless integration of your Large Language Model (LLM) with external data sources, such as a code editor. This guide will walk you through connecting your editor to Reflag data efficiently.
{% embed url="https://139729605.fs1.hubspotusercontent-eu1.net/hubfs/139729605/Videos/bucketco-website/cursor-mcp-flag-feature_full-height_h264.mp4" %}
<p align="center">Guide to Integrating Model Context Protocol with Reflag Data</p>
### Get started with Reflag Remote MCP
The Model Context Protocol (MCP) is an open standard that facilitates seamless integration of AI models with various data sources and tools. In Reflag, MCP enhances your code editor's ability to interpret and manage feature flags, comprehending their states and interconnections within the codebase. This forms an efficient link between feature management workflows and AI-driven development tools. With Reflag hosting the MCP server, getting started is incredibly straightforward.
{% stepper %}
{% step %}
#### One-click to add Reflag MCP in your IDE
* [Cursor](cursor://anysphere.cursor-deeplink/mcp/install?name=Reflag\&config=eyJ1cmwiOiJodHRwczovL2FwcC5yZWZsYWcuY29tL2FwaS9tY3AiLCJ0eXBlIjoiaHR0cCJ9)
* [VSCode](vscode:mcp/install?%7B%22name%22%3A%22Reflag%22%2C%22gallery%22%3Afalse%2C%22url%22%3A%22https%3A%2F%2Fapp.reflag.com%2Fapi%2Fmcp%22%7D)
{% endstep %}
{% step %}
#### That's it!
{% endstep %}
{% endstepper %}
{% hint style="info" %}
Ensure your editor/client and [Node.js](https://nodejs.org/en/download) versions are up to date.
{% endhint %}
### Using Reflag CLI
To install the MCP into your preferred editor, use the Reflag CLI. This tool will configure your editor and provide agent guidelines, enhancing editor intelligence.
To set up the [MCP support](../sdk/documents/cli/#setting-up-mcp), invoke:
```sh
npx reflag mcp
```
### Manual setup
Below are the manual setup steps for some of the popular editors, but there are [more MCP-compatible clients](https://modelcontextprotocol.io/clients). Before you start with the manual setup, you first need the `App ID` from [your app settings page](https://app.reflag.com/env-current/settings/app-general).
{% hint style="info" %}
You can use [mcp-remote](https://www.npmjs.com/package/mcp-remote) to enable authentication and remote MCP connections in clients that don't yet support these features.
{% endhint %}
### [Cursor](https://docs.cursor.com/context/model-context-protocol)
1. Open Cursor.
2. Go to `Settings > Cursor Settings`.
3. Click `MCP` and `New MCP Server` and make sure the Reflag MCP server entry is present:
```json
{
"mcpServers": {
"Reflag": {
"url": "https://app.reflag.com/api/mcp"
}
}
}
```
{% hint style="info" %}
Cursor also supports workspace-specific MCP servers by adding the above configuration to `.cursor/mcp.json` inside your project directory.
{% endhint %}
4. Save, go back to Cursor, and start prompting!
### [Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers)
{% hint style="info" %}
You must enable the [Copilot agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode) to use MCP in Visual Studio Code Copilot chat.
{% endhint %}
1. Open VS Code.
2. Open the command palette, typically `CMD + SHIFT + P` or `CTRL + SHIFT + P`.
3. Type and select `MCP: Add Server...` .
4. Select `HTTP` .
5. Enter `https://app.reflag.com/api/mcp` as the URL
6. Enter `Reflag` as the server ID.
{% hint style="info" %}
VS Code also supports workspace-specific MCP servers by adding the above configuration to `.vscode/mcp.json` inside your project directory.
{% endhint %}
9. Start prompting!
### [Claude Desktop](https://modelcontextprotocol.io/quickstart/user)
1. Open Cursor Desktop.
2. Go to `Settings > General > Claude Settings (Configure) > Connectors`
3. Click Add Custom Connector
4. Enter "Reflag" as the name and paste the MCP URL in: `https://app.reflag.com/api/mcp`
### Claude Code
1. On the command line inside your project directory, enter: `claude mcp add --transport http Reflag https://app.reflag.com/api/mcp`
2. Start `claude` and enter `/mcp` to begin the authentication process
```
--------------------------------------------------------------------------------
/product-handbook/feature-targeting-rules/environments.md:
--------------------------------------------------------------------------------
```markdown
---
description: Learn more about environments in Reflag
---
# Environments
What are environments?
An environment is an instance of an app that is specified by a group of shared parameters or servers. Environments are usually used to isolate a production app from testing, however, they can also differentiate multiple single-tenant deployments of the same app.
Reflag has three default environments: `Production`, `Staging`, and `Development`. 
You can add, edit, and delete as many additional environments as you’d like. 
All environments except `Production` can be edited or deleted at any time.
## Getting started
- When you create your account, there are three default environments: `Production`, `Staging`, and `Development`. 
- Go to `Settings`
- Under `App: [Your App Name]`, click `Environments`
- Fetch your unique `publishable keys` and/or `secret keys` to implement with an [SDK or HTTP API](../../supported-languages/overview.md).
- This key is essential for integrating your applications with our platform. It ensures that events and data are attributed to the correct environment.
<figure><img src="../../.gitbook/assets/Getting started-min.png" alt="Reflag Environments"><figcaption></figcaption></figure>
## Managing environments
### Create a new environment
To create a new environment:
- Head to the `Settings` page
- Select the `Environments` menu item listed `App: [Your App Name]`
- Click the `+ New environment` button and give a name for your new environment.
- If needed, you can rename the environment later
- After clicking the `Create` button, the new environment will appear in the list alongside its associated `publishable key` and `secret key.`
<figure><img src="../../.gitbook/assets/Create a new environment-min.png" alt="Environments after adding a new environment"><figcaption><p>Environments after adding "Pre-Production"</p></figcaption></figure>
{% hint style="info" %}
The `Production` environment cannot be deleted or edited. New environments can be edited or deleted at any time.
{% endhint %}
### Switching Between Environments
You can switch between environments by:
- Click the app switcher interface in the top-left corner of the browser
- Click on an environment listed below the application's name to switch to that environment
- When a non-Production environment is active, it will be displayed under the current application's name in the app switcher.
<figure><img src="../../.gitbook/assets/Switching Between Environments-min.png" alt="Switching between environments"><figcaption></figcaption></figure>
## Environment settings
There are three levels of settings in Reflag:
- `Organization`: _C_ontains the organization-wide settings
- `App: [Your App Name]`: Contains the application-wide settings
- `Environment: [Name]`: Contain environment-specific settings for the current application.
### Application-wide functionalities
When you're configuring application-wide settings, environments aren't applicable.
The following entities and configuration options are application-wide and not dependent on an environment:
- `Feature Views`: They're application-wide except for their `Slack Reporting` settings,
- `Company Segments`: They are shared across all environments. However, the companies in these segments will vary across environments.
### Production environment-based functionalities
There are environment-specific functionalities that are only allowed in the `Production` environment. These are:
- `Slack`: Reporting settings in [Features](broken-reference) and [Feature views](https://reflag.com/glossary/feature-views) can be configured from any environment, but are also reflected in the `Production` environment
- Some configuration sections are disabled if the selected environment is not `Production`.
{% hint style="info" %}
Some settings are `Production environment`-only and are disabled when a non-`Production` environment is active.
{% endhint %}
### Environment-based functionalities
All other settings and functionalities are environment-specific. Anything that requires data to be sent from the clients is inherently environment-specific. This includes:
- [Access rules](../feature-rollouts/feature-targeting-rules.md)
- [Automate feedback surveys](../launch-monitor/automated-feedback-surveys.md)
- [Feedback](../product-overview.md#feedback)
- [Tracking](../product-overview.md#tracking)
- [Data export](../data-export.md)
```
--------------------------------------------------------------------------------
/.gitbook/assets/slack.svg:
--------------------------------------------------------------------------------
```
<svg width="513" height="290" viewBox="0 0 513 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M191.044 170.731L195.325 160.725C200.012 164.196 206.126 166.033 212.241 166.033C216.725 166.033 219.578 164.298 219.578 161.644C219.476 154.292 192.573 160.01 192.369 141.527C192.266 132.134 200.623 124.885 212.446 124.885C219.476 124.885 226.509 126.621 231.502 130.604L227.501 140.823C222.908 137.869 217.234 135.81 211.834 135.81C208.165 135.81 205.718 137.545 205.718 139.792C205.821 147.042 232.93 143.059 233.235 160.725C233.235 170.323 225.081 177.062 213.463 177.062C204.904 177.062 197.057 175.02 191.043 170.731H191.044ZM361.503 157.102C360.422 159.022 358.85 160.62 356.948 161.732C355.047 162.844 352.883 163.43 350.68 163.43C343.813 163.43 338.248 157.853 338.248 150.973C338.248 144.094 343.813 138.516 350.68 138.516C352.883 138.517 355.047 139.103 356.948 140.215C358.85 141.327 360.422 142.925 361.503 144.845L373.404 138.239C368.946 130.272 360.443 124.885 350.68 124.885C336.3 124.885 324.642 136.564 324.642 150.973C324.642 165.381 336.3 177.062 350.68 177.062C360.443 177.062 368.946 171.675 373.404 163.708L361.503 157.102ZM240.958 176.04H255.837V103.167H240.959L240.958 176.04ZM380.918 103.167V176.04H395.797V154.208L413.427 176.04H432.445L410.025 150.104L430.814 125.902H412.612L395.797 146.023V103.167H380.918ZM301.675 125.905V131.828C299.23 127.743 293.217 124.885 286.899 124.885C273.855 124.885 263.562 136.423 263.562 150.922C263.562 165.421 273.855 177.062 286.899 177.062C293.217 177.062 299.23 174.203 301.675 170.118V176.04H316.554V125.905H301.675ZM301.675 157.202C299.536 160.776 295.052 163.429 290.059 163.429C283.191 163.429 277.625 157.853 277.625 150.973C277.625 144.094 283.191 138.516 290.059 138.516C295.052 138.516 299.536 141.273 301.675 144.947V157.202Z" fill="black"/>
<path d="M112.469 101.558C107.648 101.558 103.739 105.475 103.739 110.305C103.738 111.453 103.963 112.589 104.401 113.65C104.839 114.71 105.482 115.674 106.293 116.487C107.103 117.299 108.066 117.944 109.126 118.384C110.186 118.824 111.322 119.051 112.469 119.052H121.201V110.305C121.203 107.987 120.284 105.764 118.646 104.123C117.009 102.483 114.787 101.56 112.469 101.558V101.558ZM112.469 124.884H89.1881C84.3664 124.884 80.4582 128.801 80.4582 133.633C80.4582 138.463 84.3664 142.38 89.1881 142.38H112.471C117.291 142.38 121.201 138.463 121.201 133.633C121.201 128.801 117.291 124.884 112.469 124.884" fill="#36C5F0"/>
<path d="M167.763 133.633C167.763 128.801 163.853 124.884 159.031 124.884C154.209 124.884 150.301 128.801 150.301 133.633V142.38H159.031C161.349 142.378 163.571 141.455 165.208 139.815C166.846 138.174 167.764 135.951 167.763 133.633V133.633ZM144.481 133.633V110.305C144.483 107.987 143.565 105.764 141.927 104.123C140.29 102.483 138.068 101.56 135.75 101.558C130.928 101.558 127.02 105.475 127.02 110.305V133.631C127.02 138.465 130.928 142.382 135.75 142.382C138.068 142.379 140.29 141.457 141.927 139.816C143.565 138.176 144.483 135.952 144.481 133.634" fill="#2EB67D"/>
<path d="M135.75 189.035C138.068 189.032 140.29 188.109 141.927 186.469C143.565 184.828 144.483 182.605 144.481 180.287C144.483 177.969 143.565 175.746 141.927 174.105C140.29 172.465 138.068 171.542 135.75 171.54H127.02V180.287C127.02 185.118 130.928 189.035 135.75 189.035ZM135.75 165.708H159.033C163.853 165.708 167.763 161.791 167.763 156.959C167.764 154.641 166.846 152.418 165.208 150.777C163.571 149.137 161.349 148.214 159.031 148.212H135.75C130.928 148.212 127.02 152.129 127.02 156.959C127.019 158.107 127.244 159.243 127.682 160.304C128.12 161.365 128.763 162.329 129.573 163.141C130.384 163.953 131.347 164.598 132.407 165.038C133.466 165.478 134.602 165.705 135.75 165.707" fill="#ECB22E"/>
<path d="M80.4577 156.96C80.4565 158.107 80.6814 159.244 81.1195 160.304C81.5576 161.365 82.2003 162.329 83.011 163.141C83.8216 163.954 84.7843 164.598 85.8441 165.039C86.9039 165.479 88.04 165.706 89.1876 165.707C91.5053 165.705 93.7273 164.782 95.3647 163.142C97.0021 161.501 97.9208 159.277 97.9189 156.96V148.212H89.1876C84.3659 148.212 80.4577 152.129 80.4577 156.96V156.96ZM103.739 156.96V180.286C103.739 185.118 107.647 189.035 112.469 189.035C114.786 189.033 117.008 188.11 118.646 186.469C120.283 184.829 121.202 182.605 121.2 180.288V156.96C121.201 155.812 120.976 154.675 120.538 153.615C120.1 152.554 119.457 151.59 118.646 150.777C117.835 149.965 116.873 149.321 115.813 148.88C114.753 148.44 113.616 148.213 112.469 148.212C107.647 148.212 103.739 152.129 103.739 156.96Z" fill="#E01E5A"/>
</svg>
```
--------------------------------------------------------------------------------
/.gitbook/assets/slack (1).svg:
--------------------------------------------------------------------------------
```
<svg width="513" height="290" viewBox="0 0 513 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="288.257" transform="translate(0.5 0.871315)" fill="white"/>
<path d="M191.044 170.731L195.325 160.725C200.012 164.196 206.126 166.033 212.241 166.033C216.725 166.033 219.578 164.298 219.578 161.644C219.476 154.292 192.573 160.01 192.369 141.527C192.266 132.134 200.623 124.885 212.446 124.885C219.476 124.885 226.509 126.621 231.502 130.604L227.501 140.823C222.908 137.869 217.234 135.81 211.834 135.81C208.165 135.81 205.718 137.545 205.718 139.792C205.821 147.042 232.93 143.059 233.235 160.725C233.235 170.323 225.081 177.062 213.463 177.062C204.904 177.062 197.057 175.02 191.043 170.731H191.044ZM361.503 157.102C360.422 159.022 358.85 160.62 356.948 161.732C355.047 162.844 352.883 163.43 350.68 163.43C343.813 163.43 338.248 157.853 338.248 150.973C338.248 144.094 343.813 138.516 350.68 138.516C352.883 138.517 355.047 139.103 356.948 140.215C358.85 141.327 360.422 142.925 361.503 144.845L373.404 138.239C368.946 130.272 360.443 124.885 350.68 124.885C336.3 124.885 324.642 136.564 324.642 150.973C324.642 165.381 336.3 177.062 350.68 177.062C360.443 177.062 368.946 171.675 373.404 163.708L361.503 157.102ZM240.958 176.04H255.837V103.167H240.959L240.958 176.04ZM380.918 103.167V176.04H395.797V154.208L413.427 176.04H432.445L410.025 150.104L430.814 125.902H412.612L395.797 146.023V103.167H380.918ZM301.675 125.905V131.828C299.23 127.743 293.217 124.885 286.899 124.885C273.855 124.885 263.562 136.423 263.562 150.922C263.562 165.421 273.855 177.062 286.899 177.062C293.217 177.062 299.23 174.203 301.675 170.118V176.04H316.554V125.905H301.675ZM301.675 157.202C299.536 160.776 295.052 163.429 290.059 163.429C283.191 163.429 277.625 157.853 277.625 150.973C277.625 144.094 283.191 138.516 290.059 138.516C295.052 138.516 299.536 141.273 301.675 144.947V157.202Z" fill="black"/>
<path d="M112.469 101.558C107.648 101.558 103.739 105.475 103.739 110.305C103.738 111.453 103.963 112.589 104.401 113.65C104.839 114.71 105.482 115.674 106.293 116.487C107.103 117.299 108.066 117.944 109.126 118.384C110.186 118.824 111.322 119.051 112.469 119.052H121.201V110.305C121.203 107.987 120.284 105.764 118.646 104.123C117.009 102.483 114.787 101.56 112.469 101.558V101.558ZM112.469 124.884H89.1881C84.3664 124.884 80.4582 128.801 80.4582 133.633C80.4582 138.463 84.3664 142.38 89.1881 142.38H112.471C117.291 142.38 121.201 138.463 121.201 133.633C121.201 128.801 117.291 124.884 112.469 124.884" fill="#36C5F0"/>
<path d="M167.763 133.633C167.763 128.801 163.853 124.884 159.031 124.884C154.209 124.884 150.301 128.801 150.301 133.633V142.38H159.031C161.349 142.378 163.571 141.455 165.208 139.815C166.846 138.174 167.764 135.951 167.763 133.633V133.633ZM144.481 133.633V110.305C144.483 107.987 143.565 105.764 141.927 104.123C140.29 102.483 138.068 101.56 135.75 101.558C130.928 101.558 127.02 105.475 127.02 110.305V133.631C127.02 138.465 130.928 142.382 135.75 142.382C138.068 142.379 140.29 141.457 141.927 139.816C143.565 138.176 144.483 135.952 144.481 133.634" fill="#2EB67D"/>
<path d="M135.75 189.035C138.068 189.032 140.29 188.109 141.927 186.469C143.565 184.828 144.483 182.605 144.481 180.287C144.483 177.969 143.565 175.746 141.927 174.105C140.29 172.465 138.068 171.542 135.75 171.54H127.02V180.287C127.02 185.118 130.928 189.035 135.75 189.035ZM135.75 165.708H159.033C163.853 165.708 167.763 161.791 167.763 156.959C167.764 154.641 166.846 152.418 165.208 150.777C163.571 149.137 161.349 148.214 159.031 148.212H135.75C130.928 148.212 127.02 152.129 127.02 156.959C127.019 158.107 127.244 159.243 127.682 160.304C128.12 161.365 128.763 162.329 129.573 163.141C130.384 163.953 131.347 164.598 132.407 165.038C133.466 165.478 134.602 165.705 135.75 165.707" fill="#ECB22E"/>
<path d="M80.4577 156.96C80.4565 158.107 80.6814 159.244 81.1195 160.304C81.5576 161.365 82.2003 162.329 83.011 163.141C83.8216 163.954 84.7843 164.598 85.8441 165.039C86.9039 165.479 88.04 165.706 89.1876 165.707C91.5053 165.705 93.7273 164.782 95.3647 163.142C97.0021 161.501 97.9208 159.277 97.9189 156.96V148.212H89.1876C84.3659 148.212 80.4577 152.129 80.4577 156.96V156.96ZM103.739 156.96V180.286C103.739 185.118 107.647 189.035 112.469 189.035C114.786 189.033 117.008 188.11 118.646 186.469C120.283 184.829 121.202 182.605 121.2 180.288V156.96C121.201 155.812 120.976 154.675 120.538 153.615C120.1 152.554 119.457 151.59 118.646 150.777C117.835 149.965 116.873 149.321 115.813 148.88C114.753 148.44 113.616 148.213 112.469 148.212C107.647 148.212 103.739 152.129 103.739 156.96Z" fill="#E01E5A"/>
</svg>
```
--------------------------------------------------------------------------------
/.gitbook/assets/gitbook-logo.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M103.988 146.536C107.875 148.778 109.818 149.899 111.953 149.901C114.087 149.903 116.032 148.785 119.922 146.55L144.722 132.303C145.842 131.66 146.532 130.467 146.532 129.177C146.532 127.886 145.842 126.694 144.722 126.051L119.913 111.798C116.027 109.566 114.084 108.449 111.952 108.45C109.82 108.451 107.878 109.569 103.993 111.805L82.6656 124.079C82.5076 124.17 82.4286 124.215 82.3548 124.259C75.0697 128.521 70.5686 136.302 70.5084 144.739C70.5078 144.824 70.5078 144.915 70.5078 145.098C70.5078 145.28 70.5078 145.371 70.5084 145.456C70.5685 153.883 75.0595 161.657 82.3318 165.923C82.4052 165.966 82.4842 166.012 82.6419 166.103L96.0013 173.811C103.786 178.303 107.678 180.549 111.952 180.551C116.227 180.552 120.12 178.309 127.908 173.822L142.011 165.697C145.91 163.451 147.859 162.327 148.93 160.476C150.001 158.624 150.001 156.375 150.001 151.876V143.187C150.001 141.939 149.324 140.789 148.234 140.182C147.178 139.594 145.891 139.603 144.844 140.204L115.926 156.817C113.986 157.932 113.016 158.489 111.951 158.49C110.887 158.49 109.916 157.933 107.975 156.82L88.4034 145.592C87.423 145.029 86.9327 144.748 86.539 144.697C85.6413 144.581 84.7782 145.084 84.4362 145.922C84.2863 146.289 84.2894 146.854 84.2954 147.984C84.2999 148.815 84.3021 149.231 84.3799 149.614C84.5541 150.47 85.005 151.246 85.6634 151.821C85.9574 152.078 86.3178 152.286 87.0386 152.702L107.964 164.772C109.91 165.895 110.883 166.456 111.952 166.456C113.02 166.457 113.993 165.896 115.94 164.775L141.589 149.998C142.254 149.615 142.586 149.424 142.835 149.568C143.085 149.712 143.085 150.095 143.085 150.862V154.804C143.085 155.928 143.085 156.49 142.817 156.953C142.549 157.416 142.062 157.697 141.087 158.259L119.932 170.446C116.037 172.69 114.09 173.812 111.952 173.811C109.814 173.81 107.868 172.686 103.976 170.439L84.183 159.012C84.1202 158.976 84.0888 158.958 84.0594 158.941C79.9094 156.517 77.3487 152.083 77.3247 147.28C77.3245 147.246 77.3245 147.209 77.3245 147.137V143.519C77.3245 140.867 78.7377 138.416 81.0334 137.086C83.0619 135.911 85.564 135.909 87.5948 137.08L103.988 146.536Z" fill="#181C1F"/>
<path d="M202.835 163.146C190.034 163.146 182.312 155.532 182.312 144.5C182.312 133.623 190.086 125.854 202.887 125.854C214.495 125.854 220.767 131.447 221.285 138.802H213.77C213.407 135.85 210.816 132.173 203.302 132.173H202.473C194.698 132.173 189.516 136.679 189.516 144.5C189.516 152.321 194.802 156.827 202.473 156.827H203.302C210.868 156.827 214.962 153.305 214.962 150.352V149.938H203.042V143.619H216.879C220.041 143.619 221.804 145.432 221.804 148.591V162.628H214.962V158.588C213.563 160.349 209.884 163.146 202.835 163.146Z" fill="#181C1F"/>
<path d="M233.277 162.628H226.125V126.372H233.277V162.628Z" fill="#181C1F"/>
<path d="M258.641 162.628H251.49V132.691H236.875V126.372H273.256V132.691H258.641V162.628Z" fill="#181C1F"/>
<path d="M298.092 162.628H276.844V126.372H297.471C303.949 126.372 308.924 129.998 308.924 135.954C308.924 140.098 306.281 143.05 303.171 144.19C306.902 145.018 309.805 148.074 309.805 152.787C309.805 158.796 304.57 162.628 298.092 162.628ZM283.996 132.691V141.082H296.693C299.855 141.082 301.72 139.631 301.72 136.731C301.72 134.348 299.855 132.691 296.693 132.691H283.996ZM283.996 147.401V156.309H297.056C300.476 156.309 302.602 154.548 302.602 151.803C302.602 148.851 300.476 147.401 297.056 147.401H283.996Z" fill="#181C1F"/>
<path d="M333.451 163.146C321.686 163.146 312.875 156.102 312.875 144.5C312.875 132.898 321.686 125.854 333.451 125.854C345.214 125.854 353.973 132.898 353.973 144.5C353.973 156.102 345.214 163.146 333.451 163.146ZM333.036 156.827H333.864C340.861 156.827 346.769 152.321 346.769 144.5C346.769 136.679 340.861 132.173 333.864 132.173H333.036C326.039 132.173 320.079 136.679 320.079 144.5C320.079 152.321 326.039 156.827 333.036 156.827Z" fill="#181C1F"/>
<path d="M377.231 163.146C365.466 163.146 356.656 156.102 356.656 144.5C356.656 132.898 365.466 125.854 377.231 125.854C388.995 125.854 397.753 132.898 397.753 144.5C397.753 156.102 388.995 163.146 377.231 163.146ZM376.816 156.827H377.646C384.641 156.827 390.55 152.321 390.55 144.5C390.55 136.679 384.641 132.173 377.646 132.173H376.816C369.82 132.173 363.859 136.679 363.859 144.5C363.859 152.321 369.82 156.827 376.816 156.827Z" fill="#181C1F"/>
<path d="M438.018 162.628H428.586L413.763 146.261L408.581 150.664V162.628H401.43V126.372H408.581V142.377L427.29 126.372H437.188L419.05 141.807L438.018 162.628Z" fill="#181C1F"/>
</svg>
```
--------------------------------------------------------------------------------
/product-handbook/feature-clean-up-and-archival-beta/ai-code-clean-up-beta.md:
--------------------------------------------------------------------------------
```markdown
# AI code clean-up (beta)
When the [GitHub integration](../../integrations/github.md) has been enabled, Reflag can automatically clean up your code after features turn stale. The Reflag bot simply submits a pull request to your GitHub repository which removes the flag code once a feature turns stale.
{% hint style="warning" %}
This feature **keeps the codepath that grants access (isEnabled == true)** when cleaning up and archiving a feature i.e. releasing it everyone by removing the flagging code.
{% endhint %}
{% hint style="info" %}
Note: This works best when using the [React SDK](../../sdk/@reflag/browser-sdk/), but stay tuned for improved Node.js support
{% endhint %}
<figure><img src="../../.gitbook/assets/1753259671871 (1).jpeg" alt=""><figcaption></figcaption></figure>
## Get started with AI code clean-up
### 1. Connect with GitHub
Make sure the [GitHub integration](https://app.reflag.com/env-current/settings/org-integrations) is connected for your organization and a repository have been chosen.
### 2. Enable automation
Enable "Auto-create AI Clean-up PRs" under organization-level [Clean-up settings](https://app.reflag.com/env-current/settings/org-archiving-flow).
This will ensure that newly created features have the automation switched on.
<figure><img src="../../.gitbook/assets/image (26).png" alt="" width="563"><figcaption></figcaption></figure>
### 3. Test it manually
Find a stale feature that is ready for clean-up by looking for the broom icon in the features table.
<figure><img src="../../.gitbook/assets/image (30).png" alt="" width="563"><figcaption></figcaption></figure>
Find the "Clean-up guide" in the feature sidebar, click "Show details" and hit the "Create AI clean-up PR" button to start the process.
<figure><img src="../../.gitbook/assets/image (23).png" alt="" width="563"><figcaption></figcaption></figure>
Within a few minutes, you'll have a GitHub Pull Request that removes the feature flag and keeps the enabled codepath, like here:
<figure><img src="../../.gitbook/assets/image (29).png" alt=""><figcaption></figcaption></figure>
Magical! ✨
## Formatting clean-up PRs
If you're using eslint and/or prettier in GitHub Actions to ensure that code is correctly formatted, you'll need to set up a small GitHub Action workflow which runs on the AI Clean-up PRs.
The idea is that you run your own formatters with the existing configuration once the Reflag generated AI Clean-up PR has been created and then commit the results directly in the same Pull Request to make the PR checks pass.
Example: `.github/workflows/reflag-clean-up-formatting.yml`
```yaml
name: AI clean-up formatting
on:
pull_request:
types: [opened]
permissions:
contents: write
jobs:
formatting:
if: startsWith(github.head_ref, 'reflag-flag-removal/')
name: ✨ Check formatting
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
- name: ☁️ Checkout project
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: ⚙️ Setup Node.js
uses: actions/setup-node@v4
with:
node-version-file: ".nvmrc"
- name: 📥 Install dependencies
uses: ./.github/actions/install
- name: ✨ Run formatting
run: yarn format # <--- this is where you run `eslint --fix` or `prettier -w` etc.
- name: 💾 Commit formatted files
uses: stefanzweifel/git-auto-commit-action@v5
with:
commit_message: "style: format code (@reflagcom: push empty commit)"
```
Take note of the magic ✨ keyword included in the commit message in the final step.
Unfortunately, GitHub purposefully disables running checks on commits that are generated from inside the GitHub Actions job. In order for the checks to run again after the code has been correctly formatted and committed, the @reflagcom bot will push an empty commit when it sees a commit with the text `(@reflagcom: push empty commit)` .
## Under the hood
The GitHub integration continuously checks the codebase against the feature keys in Reflag whenever a commit is pushed to the repository.
When the AI clean-up bot operates, it searches for usage of the Reflag SDK in your codebase and identifies where specific feature keys are used. LLMs are employed to intelligently refactor the code to remove the flag and eliminate codepaths that become unreachable.
For React, this usually corresponds to the `useFlag` hook, like in this contrived example:
```javascript
function StartHuddleButton() {
const { isEnabled } = useFlag("huddle");
if (!isEnabled) {
return null;
}
return <button onClick={track}>Start huddle!</button>;
}
```
When the bot cleans up the file, it removes the hook and only retains the `isEnabled` codepath:
```javascript
function StartHuddleButton() {
return <button onClick={track}>Start huddle!</button>;
}
```
**Limitations**:
* Only `isEnabled` is removed, whereas `track`, `config`, and `requestFeedback` are untouched.
* Works best with the React SDK while in beta.
```
--------------------------------------------------------------------------------
/.gitbook/assets/github-logo.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>@media (prefers-color-scheme: dark) { path { fill: white; }}</style>
<path d="M135.587 105C113.136 105 95 123.088 95 145.479C95 163.392 106.621 178.583 122.733 183.939C124.758 184.29 125.55 183.061 125.55 182.007C125.55 181.041 125.462 177.88 125.462 174.456C115.249 176.3 112.608 171.997 111.816 169.714C111.376 168.573 109.351 164.972 107.678 164.007C106.269 163.216 104.244 161.372 107.59 161.284C110.759 161.197 113.048 164.182 113.841 165.411C117.538 171.558 123.349 169.802 125.638 168.748C125.99 166.114 127.047 164.358 128.191 163.304C119.123 162.25 109.703 158.826 109.703 143.284C109.703 138.894 111.287 135.206 113.841 132.396C113.4 131.342 111.992 127.215 114.281 121.683C114.281 121.683 117.714 120.63 125.462 125.81C128.719 124.932 132.153 124.405 135.587 124.405C139.02 124.405 142.454 124.844 145.711 125.81C153.459 120.542 156.892 121.683 156.892 121.683C159.093 127.215 157.685 131.43 157.333 132.396C159.886 135.206 161.471 138.806 161.471 143.284C161.471 158.826 151.962 162.25 142.894 163.304C144.391 164.533 145.623 166.992 145.623 170.768C145.623 176.212 145.535 180.514 145.535 181.919C145.535 182.973 146.328 184.29 148.352 183.851C164.376 178.495 175.997 163.304 175.997 145.391C176.261 123.088 158.037 105 135.587 105Z" fill="#1B1F24"/>
<path d="M289.818 164.689H289.73C289.818 164.689 289.818 164.689 289.818 164.689ZM289.818 164.689C289.378 164.689 288.235 164.956 287.004 164.956C283.136 164.956 281.817 163.178 281.817 160.867V145.312H289.642C290.081 145.312 290.433 144.956 290.433 144.334V135.89C290.433 135.445 290.081 135.09 289.642 135.09H281.817V124.69C281.817 124.334 281.554 124.068 281.114 124.068H270.564C270.124 124.068 269.861 124.334 269.861 124.69V135.445C269.861 135.445 264.498 136.778 264.146 136.867C263.794 136.956 263.531 137.312 263.531 137.667V144.423C263.531 144.956 263.882 145.401 264.322 145.401H269.773V161.667C269.773 173.756 278.125 175 283.839 175C286.477 175 289.554 174.2 290.081 173.933C290.345 173.844 290.521 173.489 290.521 173.133V165.667C290.609 165.134 290.257 164.778 289.818 164.689ZM406.043 153.845C406.043 144.867 402.439 143.712 398.658 144.067C395.757 144.245 393.383 145.756 393.383 145.756V163.178C393.383 163.178 395.757 164.867 399.362 164.956C404.461 165.134 406.043 163.267 406.043 153.845ZM418 153.045C418 170.022 412.549 174.911 403.054 174.911C395.054 174.911 390.658 170.822 390.658 170.822C390.658 170.822 390.482 173.133 390.218 173.4C390.043 173.667 389.867 173.756 389.515 173.756H382.218C381.691 173.756 381.251 173.4 381.251 172.956L381.339 117.845C381.339 117.401 381.691 117.046 382.13 117.046H392.592C393.032 117.046 393.383 117.401 393.383 117.845L393.295 136.423C393.295 136.423 397.34 133.756 403.23 133.756H403.318C409.296 133.756 418 135.978 418 153.045ZM375.185 135.09H364.898C364.371 135.09 364.107 135.445 364.107 136.067V163C364.107 163 361.382 164.956 357.689 164.956C353.997 164.956 352.942 163.267 352.942 159.534V135.978C352.942 135.534 352.59 135.179 352.151 135.179H341.688C341.249 135.179 340.897 135.534 340.897 135.978V161.311C340.897 172.244 346.963 174.911 355.228 174.911C362.085 174.911 367.624 171.089 367.624 171.089C367.624 171.089 367.888 173.044 367.976 173.311C368.063 173.578 368.415 173.756 368.767 173.756H375.361C375.888 173.756 376.152 173.4 376.152 172.956L376.24 135.89C376.152 135.534 375.712 135.09 375.185 135.09ZM258.959 135.09H248.497C248.057 135.09 247.706 135.534 247.706 136.067V172.422C247.706 173.4 248.321 173.756 249.2 173.756H258.607C259.574 173.756 259.838 173.311 259.838 172.422V135.89C259.838 135.445 259.399 135.09 258.959 135.09ZM253.86 118.29C250.079 118.29 247.09 121.312 247.09 125.134C247.09 128.956 250.079 131.979 253.86 131.979C257.552 131.979 260.542 128.956 260.542 125.134C260.542 121.312 257.552 118.29 253.86 118.29ZM334.743 117.046H324.369C323.929 117.046 323.578 117.401 323.578 117.845V138.112H307.313V117.934C307.313 117.49 306.961 117.134 306.522 117.134H296.06C295.62 117.134 295.269 117.49 295.269 117.934V173.044C295.269 173.489 295.708 173.844 296.06 173.844H306.522C306.961 173.844 307.313 173.489 307.313 173.044V149.4H323.578L323.49 172.956C323.49 173.4 323.841 173.756 324.281 173.756H334.743C335.183 173.756 335.534 173.4 335.534 172.956V117.845C335.534 117.49 335.183 117.046 334.743 117.046ZM242.167 141.49V169.933C242.167 170.111 242.079 170.467 241.903 170.556C241.903 170.556 235.749 175 225.639 175C213.418 175 199 171.089 199 145.667C199 120.157 211.66 114.912 223.968 115.001C234.694 115.001 239.002 117.401 239.617 117.845C239.793 118.112 239.881 118.29 239.881 118.557L237.859 127.356C237.859 127.801 237.42 128.334 236.892 128.156C235.134 127.623 232.496 126.556 226.254 126.556C219.045 126.556 211.308 128.601 211.308 145.045C211.308 161.489 218.693 163.356 223.968 163.356C228.452 163.356 230.122 162.822 230.122 162.822V151.445H222.913C222.386 151.445 221.946 151.089 221.946 150.645V141.49C221.946 141.045 222.298 140.69 222.913 140.69H241.288C241.815 140.601 242.167 141.045 242.167 141.49Z" fill="#1B1F24"/>
</svg>
```
--------------------------------------------------------------------------------
/.gitbook/assets/amplitude.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M107.63 129.799C108.579 132.675 109.527 136.35 110.633 140.505C106.524 140.505 102.257 140.345 98.3063 140.345H96.2518C98.6223 131.237 101.309 124.206 103.521 122.608C103.679 122.448 103.838 122.448 104.154 122.448C104.47 122.448 104.628 122.608 104.944 122.928C105.26 123.727 106.208 125.644 107.63 129.799ZM148.088 144.5C148.088 166.072 130.704 183.65 109.369 183.65C88.034 183.65 70.65 166.072 70.65 144.5C70.65 122.928 88.034 105.35 109.369 105.35C130.704 105.35 148.088 122.928 148.088 144.5ZM138.131 143.541C138.131 142.582 137.499 141.624 136.551 141.464C136.393 141.464 136.393 141.464 136.235 141.464H135.919C129.439 140.984 122.644 140.825 116.322 140.665C113.32 129 109.369 117.175 104.312 117.175C99.5706 117.175 95.1456 125.005 91.3527 140.345C88.6661 140.345 86.2956 140.345 84.0831 140.186C83.925 140.186 83.767 140.186 83.767 140.186C83.2929 140.186 82.9768 140.186 82.9768 140.186C81.7125 140.345 80.7643 141.624 80.7643 142.902C80.7643 144.18 81.7125 145.459 83.1348 145.619H90.4045C89.7723 148.655 89.1402 151.691 88.6661 154.567L88.5081 155.846C88.5081 156.804 89.2982 157.603 90.2465 157.603C90.8786 157.603 91.5107 157.284 91.8268 156.804L95.3036 145.459H112.213C113.478 150.412 114.9 155.526 116.638 160.32C117.587 162.877 119.799 168.949 123.592 168.949C129.281 168.949 131.494 159.681 132.916 153.608C133.232 152.33 133.548 151.211 133.706 150.253L133.864 149.933C133.864 149.773 133.864 149.613 133.864 149.454C133.706 149.134 133.548 148.974 133.232 148.814C132.758 148.655 132.442 148.974 132.284 149.454L132.126 149.773C131.652 151.052 131.178 152.33 130.862 153.449V153.608C128.333 160.639 127.227 163.835 125.014 163.835C122.17 163.835 119.483 152.17 118.535 147.696C118.377 146.897 118.219 146.258 118.061 145.619H136.551C136.867 145.619 137.183 145.459 137.499 145.459C137.499 145.459 137.499 145.459 137.657 145.459C137.657 145.459 137.657 145.459 137.815 145.459C137.815 145.459 137.973 145.459 137.973 145.299C137.815 144.66 138.131 144.18 138.131 143.541ZM187.438 154.248L190.599 161.918H199.449L182.381 121.809H174.479L157.57 161.918H166.42L169.58 154.248H187.438ZM184.278 146.737H172.583L178.43 132.196L184.278 146.737ZM237.378 132.995C232.953 132.995 230.266 134.273 227.263 136.99C225.051 134.433 221.89 132.995 218.413 132.995C215.095 132.995 213.356 133.953 211.618 135.551V133.953H203.716V161.918H211.776V143.541C213.356 141.304 215.095 140.345 216.675 140.345C220.468 140.345 222.68 142.742 222.68 147.217V161.918H230.582V146.577C230.582 145.459 230.424 144.5 230.424 143.541C232.163 141.144 233.901 140.505 235.639 140.505C239.432 140.505 241.487 142.902 241.487 147.376V162.078H249.546V146.737C249.546 138.268 244.173 132.995 237.378 132.995ZM271.355 133.314C268.195 133.314 265.666 134.113 263.454 135.551V133.953H255.394V175.5H263.454V160.32C265.666 161.758 268.195 162.557 271.355 162.557C279.099 162.557 285.263 156.165 285.263 148.016C285.105 139.706 278.941 133.314 271.355 133.314ZM269.933 155.686C267.563 155.686 265.192 154.887 263.454 152.49V143.541C265.192 141.144 267.563 140.186 269.933 140.186C274.042 140.186 277.045 143.861 277.045 148.016C277.045 152.01 274.042 155.686 269.933 155.686ZM297.589 120.371H289.529V161.918H297.589V120.371ZM309.6 128.68C312.287 128.68 314.341 126.763 314.341 124.046C314.341 121.33 312.129 119.252 309.6 119.252C306.913 119.252 304.701 121.33 304.701 124.046C304.859 126.763 306.913 128.68 309.6 128.68ZM305.649 133.953V161.918H313.709V133.953H305.649ZM342.155 154.727C340.575 155.206 338.995 155.526 337.414 155.526C334.412 155.526 332.515 154.088 332.515 150.892V140.984H342.471V134.113H332.357V124.046H324.455V134.113H318.608V140.984H324.455V151.052C324.455 158.242 328.88 163.036 335.676 163.036C338.363 163.036 339.785 162.877 343.262 161.758L342.155 154.727ZM375.185 133.953H367.125V152.01C365.229 154.248 363.174 155.526 361.12 155.526C357.327 155.526 355.114 153.129 355.114 148.655V133.953H347.054V149.454C347.054 157.603 351.954 162.877 359.223 162.877C362.384 162.877 364.913 161.758 367.125 160V161.918H375.185V133.953ZM409.479 120.371H401.419V135.551C399.206 134.113 396.678 133.314 393.517 133.314C385.773 133.314 379.61 139.706 379.61 147.856C379.61 156.165 385.773 162.397 393.517 162.397C396.678 162.397 399.206 161.598 401.419 160.16V161.758H409.479V120.371ZM394.781 155.686C390.514 155.686 387.67 152.01 387.67 147.856C387.67 143.701 390.672 140.186 394.781 140.186C397.152 140.186 399.522 140.984 401.261 143.381V152.33C399.522 154.887 397.152 155.686 394.781 155.686ZM442.35 147.376C442.35 138.588 436.345 132.995 428.443 132.995C419.593 132.995 413.588 139.227 413.588 148.016C413.588 156.485 419.593 163.036 428.601 163.036C435.238 163.036 440.454 159.361 442.034 153.928H433.5C432.552 155.366 431.13 156.005 428.759 156.005C424.334 156.005 422.121 153.449 421.489 150.093H442.034C442.35 149.134 442.35 148.495 442.35 147.376ZM428.443 139.866C431.762 139.866 433.816 141.783 434.29 145.299H421.647C422.438 142.103 424.65 139.866 428.443 139.866Z" fill="#1E61F0"/>
</svg>
```
--------------------------------------------------------------------------------
/.gitbook/assets/mixpanel.svg:
--------------------------------------------------------------------------------
```
<svg width="512" height="289" viewBox="0 0 512 289" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="M70.6 167.819H92.8414V165.492H91.1751C87.9222 165.492 87.1439 164.618 87.1439 161.427V132.572C89.4089 128.792 92.4622 126.367 96.3039 126.367C101.133 126.367 104.077 129.852 104.077 136.44V161.427C104.077 164.628 103.289 165.492 100.135 165.492H98.3594V167.819H120.112V165.502H118.535C115.282 165.502 114.504 164.628 114.504 161.437V135.37C114.504 134.496 114.504 133.622 114.404 132.758C116.57 128.88 119.822 126.367 123.654 126.367C128.484 126.367 131.437 129.852 131.437 136.44V161.427C131.437 164.628 130.649 165.492 127.496 165.492H125.72V167.819H147.472V165.502H145.995C142.643 165.502 141.864 164.628 141.864 161.437V135.37C141.864 125.591 136.257 120.161 128.084 120.161C121.988 120.161 116.669 123.46 113.816 130.039C112.149 123.647 107.22 120.161 100.724 120.161C94.9169 120.161 89.8978 123.254 87.1339 129.459V121.32H70.6V123.647H72.5657C75.9184 123.647 76.6967 124.521 76.6967 127.712V161.417C76.6967 164.618 75.9084 165.482 72.5657 165.482H70.6V167.819ZM160.573 113.583C164.116 113.583 167.069 110.677 167.069 107.192C167.069 103.706 164.116 100.8 160.573 100.8C157.031 100.8 154.078 103.706 154.078 107.192C154.078 110.677 157.031 113.583 160.573 113.583ZM149.548 167.819H171.4V165.492H169.923C166.67 165.492 165.892 164.618 165.892 161.427V121.33H149.348V123.657H151.314C154.666 123.657 155.445 124.531 155.445 127.721V161.427C155.445 164.628 154.656 165.492 151.314 165.492H149.538L149.548 167.819ZM187.345 140.515H193.641C192.065 139.543 191.476 138.188 190.688 135.674L188.323 127.054C187.245 123.176 186.357 121.34 182.027 121.34H172.976V123.667H174.264C176.918 123.667 177.217 124.639 178.005 127.545L180.071 135.105C181.149 138.777 182.835 140.515 187.345 140.515ZM201.923 140.515H208.219C212.749 140.515 214.316 138.767 215.404 135.095L217.469 127.535C218.257 124.629 218.647 123.657 221.211 123.657H222.498V121.33H213.538C209.107 121.33 208.219 123.077 207.232 127.044L204.867 135.664C204.088 138.276 203.49 139.543 201.923 140.515ZM193.651 148.644H201.923V140.505H193.651V148.644ZM172.976 167.829H182.027C186.357 167.829 187.245 165.983 188.323 162.115L190.688 153.494C191.476 150.981 192.065 149.616 193.641 148.654H187.345C182.815 148.654 181.139 150.401 180.061 154.073L177.995 161.633C177.207 164.54 176.918 165.512 174.254 165.512H172.966L172.976 167.829ZM213.528 167.829H222.488V165.502H221.201C218.647 165.502 218.247 164.53 217.459 161.624L215.394 154.064C214.316 150.382 212.74 148.644 208.209 148.644H201.923C203.5 149.616 204.068 150.873 204.857 153.484L207.222 162.105C208.209 166.081 209.097 167.829 213.528 167.829ZM223.765 187.2H246.596V184.873H244.231C241.088 184.873 240.289 183.999 240.289 180.808V162.311C243.143 166.474 247.973 168.997 253.68 168.997C264.407 168.997 272.968 159.699 272.968 143.627C272.968 129.096 264.896 120.191 254.458 120.191C248.362 120.191 243.233 123.676 240.279 129.872V121.349H223.735V123.676H225.701C228.954 123.676 229.832 124.55 229.832 127.741V180.808C229.832 184.009 228.944 184.873 225.701 184.873H223.735V187.2H223.765ZM250.746 126.18C257.143 126.18 262.361 132.091 262.361 143.804C262.361 156.587 257.532 163.568 250.946 163.568C246.705 163.568 242.973 161.339 240.309 157.461V133.436C242.864 128.693 246.516 126.17 250.746 126.18ZM288.544 168.801C294.94 168.801 300.059 165.796 303.9 159.022V160.082C303.9 165.895 307.642 168.408 313.839 168.408C315.715 168.408 318.079 168.221 319.646 167.731V165.305C318.858 165.492 318.269 165.6 317.68 165.6C315.216 165.6 314.427 164.147 314.427 161.82V137.029C314.427 125.601 307.932 120.171 297.005 120.171C289.721 120.171 282.637 123.47 278.107 126.956L279.683 129.675C284.413 126.475 289.033 124.639 294.052 124.639C300.548 124.639 303.89 128.124 303.89 136.263V138.394L291.777 143.048C280.751 147.505 276.71 151.668 276.71 157.961C276.72 164.245 281.25 168.801 288.544 168.801ZM287.067 155.428C287.067 150.588 289.921 147.103 295.728 144.579L303.9 141.094V156.204C300.847 160.367 297.305 162.792 293.463 162.792C289.632 162.792 287.077 160.18 287.067 155.428ZM321.612 167.829H344.063V165.502H342.187C338.934 165.502 338.156 164.628 338.156 161.437V132.67C340.421 128.792 343.763 126.376 347.705 126.376C352.823 126.376 356.076 129.862 356.076 136.45V161.437C356.076 164.638 355.288 165.502 352.135 165.502H350.259V167.829H372.6V165.502H370.635C367.282 165.502 366.504 164.628 366.504 161.437V135.37C366.504 125.591 360.597 120.161 352.235 120.161C346.138 120.161 341.009 123.254 338.156 129.459V121.32H321.612V123.647H323.577C326.93 123.647 327.708 124.521 327.708 127.712V161.417C327.708 164.618 326.92 165.482 323.577 165.482H321.612V167.829ZM398.194 168.987C404.69 168.987 410.797 166.081 415.227 162.596L413.75 160.465C409.809 163.273 405.379 164.53 401.248 164.53C391.21 164.53 385.303 157.559 385.303 144V142.252H416.405C416.215 129.175 408.033 120.269 396.129 120.269C384.225 120.269 374.666 130.824 374.666 144.776C374.676 160.092 383.536 168.997 398.194 168.987ZM396.229 122.685C402.136 122.685 405.778 128.978 406.367 139.631H385.502C386.39 128.89 390.521 122.685 396.229 122.685ZM418.57 167.819H441.4V165.492H439.135C435.882 165.492 435.104 164.618 435.104 161.427V101.959H418.56V104.285H420.526C423.779 104.285 424.657 105.159 424.657 108.35V161.427C424.657 164.628 423.769 165.492 420.526 165.492H418.56L418.57 167.819Z" fill="#7856FF"/>
</svg>
```
