> ## Documentation Index
> Fetch the complete documentation index at: https://docs.foff.twospoon.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart: Ship your first feature flag with Foff

> Go from sign-up to reading a live feature flag in your TypeScript app — create a workspace, scope, and flag, then integrate the SDK.

This guide walks you through every step needed to create a feature flag in Foff and read its value from a TypeScript application. By the end you will have a working integration that resolves flag values based on a real hierarchy.

<Steps>
  <Step title="Sign up for Foff">
    Go to [foff.twospoon.ai](https://foff.twospoon.ai) and create an account using your email address. Foff sends a one-time passcode to your inbox — enter it to complete sign-in.
  </Step>

  <Step title="Create a workspace">
    After signing in, you are prompted to create a workspace. A workspace is the top-level container for all your feature flags and configuration. Give it a name that reflects your organization or product, then click **Create workspace**.

    Your new workspace appears in the top-left of the navigation bar. All the scopes and features you create are scoped to this workspace.
  </Step>

  <Step title="Create a scope">
    Select **Scopes** from the navigation bar, then click **New scope**.

    A scope defines the hierarchy shape that all its feature flags will follow. For this guide, use an organizational hierarchy:

    | Level      | Example value     |
    | ---------- | ----------------- |
    | Company    | `zomato`          |
    | Department | `online-ordering` |
    | Team       | `riders`          |
    | User       | `user-123`        |

    Name the scope something descriptive — for example, `employee-hierarchy` — then save it. Foff displays the scope's detail page once it is created.
  </Step>

  <Step title="Create a feature flag">
    Navigate to the **Features** section inside your scope and click **New feature**.

    For this guide, create a flag called `dark-mode-ui` with a boolean default value of `true`. This default applies to every user unless a more specific override exists.

    After saving, the feature appears in your scope's feature list with its default value displayed.
  </Step>

  <Step title="Add a hierarchy override">
    Click **Add override** on the `dark-mode-ui` feature.

    Overrides let you return a different value for a specific path through your hierarchy. To disable dark mode for everyone in the Zomato → Online Ordering → Riders path, set:

    * Company: `zomato`
    * Department: `online-ordering`
    * Team: `riders`
    * Value: `false`

    Save the override. It appears in the feature's overrides list.

    <Warning>
      Hierarchy values in overrides are **case-sensitive**. Enter `zomato`, not `Zomato` — a mismatch means the override will never match and the default value will be returned instead.
    </Warning>
  </Step>

  <Step title="Generate an API key">
    Click **Developers** in the navigation bar, then click **Generate API key**. Give the key a descriptive name (for example, `local-dev`) and click **Create**.

    <Warning>
      The API key is shown **only once**. Copy it and store it somewhere safe — for example, in a `.env` file or your secrets manager — before closing the dialog. You cannot retrieve it again.
    </Warning>

    You can manage all your keys from the **Developers** section: enable or disable a key, or restrict it to specific IP addresses.
  </Step>

  <Step title="Install the TypeScript SDK">
    Install the Foff TypeScript SDK. It requires Node.js 18 or later.

    ```bash theme={null}
    npm install @twospoon/foff-feature-config-typescript-sdk
    ```
  </Step>

  <Step title="Read your feature flag">
    Create a client using the API key you generated and the scope name you created earlier, then call `getFeatureConfig` with the feature name and the hierarchy path you want to resolve.

    ```ts theme={null}
    import { Client, Config } from "@twospoon/foff-feature-config-typescript-sdk";

    const config = new Config({
      APIKey: process.env.FOFF_API_KEY!,
      BaseURL: "https://foff.twospoon.ai/live",
      Scope: "employee-hierarchy",
      PollingInterval: 30, // re-fetch configs every 30 seconds
    });

    const client = await Client.newClient(config);

    // Resolves to `false` — matches the Zomato → Online Ordering → Riders override
    const value = client.getFeatureConfig("dark-mode-ui", ["zomato", "online-ordering", "riders"]);
    console.log(value); // false

    client.close();
    ```

    The SDK fetches all configs for your scope on startup and caches them in memory. `getFeatureConfig` resolves the hierarchy from most specific to least specific:

    1. `zomato + online-ordering + riders` — matches the override → returns `false`
    2. If no match, falls back to `zomato + online-ordering`, then `zomato`
    3. If no override matches at any level, returns the feature's default value

    For a user who is not in that hierarchy path, the default value of `true` is returned:

    ```ts theme={null}
    const value = client.getFeatureConfig("dark-mode-ui", ["acme-corp", "engineering", "backend"]);
    console.log(value); // true (default)
    ```

    <Note>
      For long-lived processes such as an Express server, create the client once at startup and call `client.close()` on process exit to stop background polling. See the [SDK reference](/sdks/overview) for lifecycle patterns and all configuration options.
    </Note>
  </Step>
</Steps>

You now have a working Foff integration. Any changes you make to flags or overrides in the dashboard will propagate to your running application within the polling interval — no redeploy required.