Skip to main content

​
Installation

# Install CLI globally
npm install -g @flagkit-io/cli

# Install core SDK in your project
npm install @flagkit-io/core

​
Initialize Your Project

cd your-project
flagkit init
This creates:
  • flags.config.ts - Your flag definitions
  • .flagkit/ directory - Generated code and configuration

​
Define Your First Flag

Edit flags.config.ts:
flags.config.ts
import { defineFlags, flag } from "@flagkit-io/core";

export const flags = defineFlags({
  newCheckout: flag
    .boolean()
    .description("Enable new checkout flow")
    .default(false),
});

​
Generate Client Code

flagkit generate
This generates:
  • .flagkit/generated/types.ts - TypeScript types
  • .flagkit/generated/client.ts - Runtime client
  • .flagkit/generated/decision-tree.json - Evaluation rules

​
Use in Your Application

​
Basic Usage

import { flags } from './.flagkit/generated/client';

const isNewCheckout = flags.get('newCheckout');

if (isNewCheckout) {
  return <NewCheckout />;
} else {
  return <OldCheckout />;
}

​
With User Context

import { flags, calculateRolloutPercent } from "@flagkit-io/core";

const rolloutPercent = calculateRolloutPercent(user.id);

const isNewCheckout = flags.get("newCheckout", {
  userId: user.id,
  rolloutPercent,
  email: user.email,
  plan: user.plan,
});

​
React Hook

function MyComponent() {
  const isNewCheckout = flags.useFlag('newCheckout', {
    userId: user.id
  });

  return isNewCheckout ? <NewUI /> : <OldUI />;
}

​
Configure Targeting Rules

​
In the Dashboard

  1. Go to dashboard.flagkit.io
  2. Click on your flag
  3. Add targeting rules:
{
  "condition": {
    "field": "rolloutPercent",
    "op": "lte",
    "value": 9
  },
  "value": true
}

​
Pull and Deploy

# Pull targeting rules from dashboard
flagkit sync --pull

# Regenerate client with new rules
flagkit generate

# Commit and deploy
git add .flagkit/generated/
git commit -m "chore: update flag rules"
git push

​
Common Flag Types

flag.boolean()
  .description('Enable feature')
  .default(false)
flag.string() .description('API endpoint')
.default('https://api.example.com') ```
</Accordion>

<Accordion title="Number Flag">
```typescript flag.number() .description('Max items per page') .min(0)
.max(100) .default(10) ```
</Accordion>

<Accordion title="Enum Flag">
  ```typescript
  flag.enum(['red', 'green', 'blue'])
    .description('Theme color')
    .default('blue')

​
Next Steps

Percentage Rollouts

Learn how to gradually roll out features

Deployment Guide

Complete deployment workflow from dev to production

Testing Strategies

Test your feature flags effectively

CLI Reference

Explore all CLI commands