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

# CLI

> Use FlagSync’s CLI to generate TypeScript type definitions.

## Overview

The `@flagsync/cli` generates TypeScript type definitions based on your flag configurations.

<CardGroup cols={2}>
  <Card title="npm" icon="npm" href="https://www.npmjs.com/package/@flagsync/cli">
    Latest version available on npm
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/flagsync/cli/">
    Explore the source code on GitHub
  </Card>
</CardGroup>

## Installation

Install the CLI with your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install -D @flagsync/cli
  ```

  ```bash yarn theme={null}
  yarn add -D @flagsync/cli
  ```

  ```bash pnpm theme={null}
  pnpm add -D @flagsync/cli
  ```
</CodeGroup>

## Quickstart

1. **Authenticate with your FlagSync account:**

```bash terminal theme={null}
npx flagsync login
```

2. **Generate type definitions:**

```bash terminal theme={null}
$ npx flagsync generate

✓ Select your SDK: React
i Found 4 flags
✓ Generated flag types, saved to "gen/flags.d.ts"
```

3. **Use in your code:**

```typescript app.jsx theme={null}
import React from 'react';
import { useFlag } from '@flagsync/react-sdk';

function MyComponent() {
  // TypeScript knows this returns a boolean
  const { value: isEnabled } = useFlag('show-new-feature');

  // TypeScript knows this returns "light" | "dark" | "auto"
  const { value: theme } = useFlag('theme-preference');

  return (
    <div className={theme}>
      {isEnabled && <NewFeatureComponent />}
    </div>
  );
}
```

<Note>
  The generated types will be saved to `gen/flags.d.ts`.

  Most default `tsconfig.json` setups include this file via a broad pattern like `**/*.ts`, but if you're using a custom config, make sure it's covered by the include array:

  `"include": ["**/*.ts"]`
</Note>

## Generated Types

The CLI generates TypeScript types based on your flag configurations.

<CodeGroup>
  ```typescript Boolean Flags theme={null}
  // For boolean flags
  declare module "@flagsync/node-sdk" {
    export interface FeatureFlags {
      "enable-dark-mode": boolean;
      "show-beta-features": boolean;
    }
  }
  ```

  ```typescript String Flags theme={null}
  // For string flags with variants
  declare module "@flagsync/react-sdk" {
    export interface FeatureFlags {
      "theme-color": "blue" | "red" | "green";
      "welcome-message": "hello" | "welcome" | "hi there";
    }
  }
  ```

  ```typescript Number Flags theme={null}
  // For number flags with variants
  declare module "@flagsync/nestjs-sdk" {
    export interface FeatureFlags {
      "max-items": 10 | 25 | 50 | 100;
      "timeout-duration": 1000 | 5000 | 10000;
    }
  }
  ```

  ```typescript JSON Flags theme={null}
  // For JSON/object flags
  declare module "@flagsync/nextjs-sdk" {
    export interface FeatureFlags {
    "config-object": object;
    "feature-settings": object;
    }
  }
  ```
</CodeGroup>

## Integration Examples

A few integration examples for FlagSync's SDKS. Supported SDKs:

* [`@flagsync/react-sdk`](/sdks-client-side/react)
* [`@flagsync/js-sdk`](/sdks-client-side/javascript)
* [`@flagsync/node-sdk`](/sdks-server-side/nodejs)
* [`@flagsync/nextjs-sdk`](/sdks-server-side/nextjs)
* [`@flagsync/nestjs-sdk`](/sdks-server-side/nestjs)

### `@flagsync/react-sdk`

```typescript theme={null}
import React from 'react';
import { useFlag } from '@flagsync/react-sdk';

function MyComponent() {
  // TypeScript knows this returns a boolean
  const { value: isEnabled } = useFlag('show-new-feature');

  // TypeScript knows this returns "light" | "dark" | "auto"
  const { value: theme } = useFlag('theme-preference');

  return (
    <div className={theme}>
      {isEnabled && <NewFeatureComponent />}
    </div>
  );
}
```

### `@flagsync/nextjs-sdk`

<CodeGroup>
  ```jsx page.tsx theme={null}
  import { welcomeMessage } from '@/lib/flagsync';

  export default function HomePage() {
    // TypeScript knows this returns "hello" | "welcome" | "hi there"
    const message = await welcomeMessage();
    return <h1>{message}</div>;
  }
  ```

  ```typescript @/lib/flagsync theme={null}
  import { flag } from 'flags/next';
  import { getFlag } from '@/lib/flagsync/flag';

  // TypeScript knows this returns "hello" | "welcome" | "hi there"
  export const welcomeMessage = flag({
    key: 'welcome-message',
    async decide(params) {
      return getFlag(this.key, params);
    },
  });
  ```
</CodeGroup>

### `@flagsync/js-sdk`

```typescript theme={null}
import { FlagSyncFactory } from '@flagsync/js-sdk';

// Initialize the SDK
const factory = FlagSyncFactory({...});
const client = factory.client()
await client.waitForReady();

// TypeScript knows this returns 10 | 25 | 50 | 100
const maxItems = client.flag('max-items');
```

## Commands

### `flagsync login`

Authenticates the CLI with your FlagSync account using a secure OAuth2 flow.

```bash theme={null}
npx flagsync login
```

<Tip>
  Opens your browser for authentication, then walks you through selecting your project context
</Tip>

**Prompts:**

* **Organization**: Choose which FlagSync organization to use
* **Workspace**: Select the workspace containing your flags

### `flagsync logout`

Disconnects the CLI from your FlagSync account.

```bash theme={null}
npx flagsync logout
```

<Tip>
  Clears your saved login credentials. You'll need to run `flagsync login` again to use other commands.
</Tip>

### `flagsync generate`

Creates TypeScript definitions for your feature flags.

```bash theme={null}
npx flagsync generate
```

<Tip>
  Pulls your flag definitions and generates type-safe TypeScript code in `gen/flags.d.ts`.
</Tip>

**Prompts:**

* **SDK Selection**: Choose your framework:
  * [`@flagsync/react-sdk`](/sdks-client-side/react)
  * [`@flagsync/js-sdk`](/sdks-client-side/javascript)
  * [`@flagsync/node-sdk`](/sdks-server-side/nodejs)
  * [`@flagsync/nextjs-sdk`](/sdks-server-side/nextjs)
  * [`@flagsync/nestjs-sdk`](/sdks-server-side/nestjs)

## File Structure

After running `flagsync generate`, your project will have:

```
your-project/
├── gen/
│   └── flags.d.ts # Generated type definitions
├── package.json
└── ... your other files
```

The generated `flags.d.ts` file contains:

* Module declaration for your chosen SDK
* `FeatureFlags` interface with all your flags
* Type-safe flag key constants

<Note>
  The generated types will be saved to `gen/flags.d.ts`.

  Most default `tsconfig.json` setups include this file via a broad pattern like `**/*.ts`, but if you're using a custom config, make sure it's covered by the include array:

  `"include": ["**/*.ts"]`
</Note>