🚩 技術調査 - Vercel Flags

node -e "console.log(crypto.randomBytes(32).toString('base64url'))"

pnpm i flags
pnpm i @flags-sdk/vercel

vercel link
vercel env pull

// app/.well-known/vercel/flags/route.ts
import { createFlagsDiscoveryEndpoint } from 'flags/next';
import { getProviderData } from '@flags-sdk/vercel';
import * as flags from '../../../../flags';

export const GET = createFlagsDiscoveryEndpoint(async (request) => {
  return await getProviderData(flags);
});

npx vercel toolbar enable

// flags.ts
import { flag } from 'flags/next';

export const showNewFeature = flag({
  key: 'show-new-feature',
  decide: () => false,
  description: '新しいダッシュボード機能を表示する',
});

// flags.ts
import { flag } from 'flags/next';

export const theme = flag<string>({
  key: 'theme',
  options: [
    { value: 'light', label: 'ライトテーマ' },
    { value: 'dark',  label: 'ダークテーマ' },
    { value: 'auto',  label: '自動' },
  ],
  decide: () => 'auto',
});

import { dedupe, flag } from 'flags/next';
import type { ReadonlyRequestCookies } from 'flags';

interface Entities {
  user?: { id: string };
}

const identify = dedupe(
  ({ cookies }: { cookies: ReadonlyRequestCookies }): Entities => {
    const userId = cookies.get('user-id')?.value;
    return { user: userId ? { id: userId } : undefined };
  },
);

export const dashboardFlag = flag<boolean, Entities>({
  key: 'new-dashboard',
  identify,
  decide({ entities }) {
    if (!entities?.user) return false;
    return ['user1', 'user2'].includes(entities.user.id);
  },
});

import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';

export const exampleFlag = flag({
  key: 'example-flag',
  adapter: vercelAdapter(),
});

pnpm i @flags-sdk/edge-config

{
  "flags": {
    "example-flag": true,
    "another-flag": false
  }
}

import { flag } from 'flags/next';
import { edgeConfigAdapter } from '@flags-sdk/edge-config';

export const exampleFlag = flag({
  adapter: edgeConfigAdapter(),
  key: 'example-flag',
});

import { createEdgeConfigAdapter } from '@flags-sdk/edge-config';

const myAdapter = createEdgeConfigAdapter({
  connectionString: process.env.OTHER_EDGE_CONFIG!,
  options: {
    edgeConfigItemKey: 'other-flags-key',
    teamSlug: 'my-vercel-team',
  },
});

import { ldAdapter, type LDContext } from '@flags-sdk/launchdarkly';
import { dedupe, flag } from 'flags/next';
import type { Identify } from 'flags';

const identify = dedupe((async ({ headers, cookies }) => {
  const user = await getUser(headers, cookies);
  return { key: user.userID };
}) satisfies Identify<LDContext>);

export const exampleFlag = flag<boolean, LDContext>({
  key: 'example-flag',
  identify,
  adapter: ldAdapter.variation(),
});

import { mergeProviderData } from 'flags';
import { createFlagsDiscoveryEndpoint, getProviderData } from 'flags/next';
import { getProviderData as getLDProviderData } from '@flags-sdk/launchdarkly';
import * as flags from '../../../../flags';

export const GET = createFlagsDiscoveryEndpoint(async () => {
  return mergeProviderData([
    getProviderData(flags),
    getLDProviderData({
      apiKey: process.env.LAUNCHDARKLY_API_KEY,
      projectKey: process.env.LAUNCHDARKLY_PROJECT_KEY,
      environment: process.env.LAUNCHDARKLY_ENVIRONMENT,
    }),
  ]);
});

import { statsigAdapter, type StatsigUser } from '@flags-sdk/statsig';

export const showFeature = flag<boolean, StatsigUser>({
  key: 'show_feature',
  adapter: statsigAdapter.featureGate((gate) => gate.value),
  identify,
});

export const myExperiment = flag<Record<string, unknown>, StatsigUser>({
  key: 'my_experiment',
  adapter: statsigAdapter.experiment((config) => config.value),
  identify,
});

import { postHogAdapter } from '@flags-sdk/posthog';

export const myFlag = flag({
  key: 'my-flag',
  adapter: postHogAdapter.isFeatureEnabled(),
  identify,
});

export const myVariant = flag({
  key: 'my-flag',
  adapter: postHogAdapter.featureFlagValue(),
  identify,
});

export const myPayload = flag({
  key: 'my-flag',
  adapter: postHogAdapter.featureFlagPayload((v) => v),
  defaultValue: {},
  identify,
});

import type { Adapter } from 'flags';

export function createExampleAdapter() {
  return function exampleAdapter<ValueType, EntitiesType>(): Adapter<ValueType, EntitiesType> {
    return {
      origin(key) {
        return `https://example.com/flags/${key}`;
      },
      async decide({ key }): Promise<ValueType> {
        return false as ValueType;
      },
    };
  };
}

import { showNewFeature } from '../flags';

export default async function Page() {
  const isEnabled = await showNewFeature();
  return isEnabled ? <NewDashboard /> : <OldDashboard />;
}

import { type NextRequest, NextResponse } from 'next/server';
import { showNewFeature } from './flags';

export async function middleware(request: NextRequest) {
  const isEnabled = await showNewFeature();
  if (isEnabled) {
    return NextResponse.rewrite(new URL('/new-page', request.url));
  }
  return NextResponse.next();
}

// flags.ts
import { flag } from 'flags/next';

export const showSummerSale = flag({
  key: 'summer-sale',
  options: [{ value: true }, { value: false }],
  decide: () => false,
});

export const showBanner = flag({
  key: 'banner',
  options: [{ value: true }, { value: false }],
  decide: () => false,
});

export const marketingFlags = [showSummerSale, showBanner] as const;

// middleware.ts
import { type NextRequest, NextResponse } from 'next/server';
import { precompute } from 'flags/next';
import { marketingFlags } from './flags';

export const config = { matcher: ['/'] };

export async function middleware(request: NextRequest) {
  const code = await precompute(marketingFlags);
  const nextUrl = new URL(
    `/${code}${request.nextUrl.pathname}${request.nextUrl.search}`,
    request.url,
  );
  return NextResponse.rewrite(nextUrl, { request });
}

// app/[code]/page.tsx
import { marketingFlags, showSummerSale, showBanner } from '../../flags';

type Params = Promise<{ code: string }>;

export default async function Page({ params }: { params: Params }) {
  const { code } = await params;
  const summerSale = await showSummerSale(code, marketingFlags);
  const banner     = await showBanner(code, marketingFlags);

  return (
    <div>
      {banner    ? <p>ようこそ</p>          : null}
      {summerSale ? <p>サマーセール開催中</p> : <p>サマーセール近日開催</p>}
    </div>
  );
}

import { generatePermutations } from 'flags/next';
import { marketingFlags } from '../../flags';

export async function generateStaticParams() {
  const codes = await generatePermutations(marketingFlags);
  return codes.map((code) => ({ code }));
}

const identify = dedupe(async (): Promise<{ user: { id: string; plan: string } }> => {
  const session = await getSession();
  return { user: { id: session.userId, plan: session.plan } };
});

export const premiumFeature = flag<boolean, { user: { id: string; plan: string } }>({
  key: 'premium-feature',
  identify,
  adapter: vercelAdapter(),
});

export const layoutVariant = flag<string>({
  key: 'layout-variant',
  options: [
    { value: 'control',   label: 'コントロール' },
    { value: 'variant-a', label: 'バリアント A' },
  ],
  identify,
  adapter: vercelAdapter(),
});

export const newCheckout = flag<boolean>({
  key: 'new-checkout',
  adapter: vercelAdapter(),
  defaultValue: false,
});

{
  "flags": {
    "model_id": "openai:gpt-4o"
  }
}

// flags.ts
export const aiModelFlag = flag<string>({
  key: 'model_id',
  adapter: edgeConfigAdapter(),
  defaultValue: 'openai:gpt-4o-mini',
});

// app/api/chat/route.ts
import { aiModelFlag } from '../../../flags';
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';

export async function POST(req: Request) {
  const modelId = await aiModelFlag();
  const [provider, model] = modelId.split(':');

  const aiModel = provider === 'anthropic'
    ? anthropic(model)
    : openai(model);

  const result = await streamText({
    model: aiModel,
    messages: (await req.json()).messages,
  });
  return result.toDataStreamResponse();
}

export const summaryPrompt = flag<'concise' | 'detailed'>({
  key: 'summary-prompt-variant',
  adapter: vercelAdapter(),
  defaultValue: 'concise',
});

// app/api/summarize/route.ts
import { summaryPrompt } from '../../../flags';

const CONCISE_SYSTEM_PROMPT = '要点だけを3文で要約します。';
const DETAILED_SYSTEM_PROMPT = '構造化された詳細サマリを Markdown で出力します。';

export async function POST(req: Request) {
  const variant = await summaryPrompt();
  const systemPrompt = variant === 'detailed' ? DETAILED_SYSTEM_PROMPT : CONCISE_SYSTEM_PROMPT;
  // ... LLM 呼び出し
}

export const ragBackend = flag<'pinecone' | 'pgvector'>({
  key: 'rag-backend',
  adapter: edgeConfigAdapter(),
  defaultValue: 'pgvector',
});

// lib/retriever.ts
import { ragBackend } from '../flags';

export async function getRetriever() {
  const backend = await ragBackend();
  return backend === 'pinecone' ? pineconeRetriever : pgvectorRetriever;
}

export const useNewDatabase = flag<boolean>({
  key: 'use-new-database',
  adapter: vercelAdapter(),
  defaultValue: false,
});

// lib/db.ts
import { useNewDatabase } from '../flags';

export async function getDatabase() {
  const isNew = await useNewDatabase();
  return isNew ? newDbClient : legacyDbClient;
}

// app/layout.tsx
import { Suspense } from 'react';
import { FlagValues } from 'flags/react';
import { myFlag } from '../flags';

export default async function RootLayout({ children }) {
  return (
    <html><body>
      {children}
      <Suspense fallback={null}>
        <FlagValues values={{ 'my-flag': await myFlag() }} />
      </Suspense>
    </body></html>
  );
}

// flags.ts
export const aiSummaryModel = flag<'stable' | 'candidate'>({
  key: 'ai-summary-model',
  adapter: vercelAdapter(),
  defaultValue: 'stable',
  options: [
    { value: 'stable', label: 'GPT-4o (stable)' },
    { value: 'candidate', label: 'Claude 3.7 Sonnet (candidate)' },
  ],
  description: 'AI summary generation model selector',
});

# 5% カナリアから開始
vercel flags split ai-summary-model -e production --by user.id \
  --default-variant stable --weight stable=95 --weight candidate=5 \
  --message "Start candidate model 5% canary"

# 問題なければ Progressive rollout に切り替え
vercel flags rollout ai-summary-model -e production --by user.id \
  --from-variant stable --to-variant candidate --default-variant stable \
  --stage 5,6h --stage 10,6h --stage 25,12h --stage 50,1d \
  --message "Gradual rollout: stable to candidate"

# 緊急ロールバック (string flag なので set で stable に戻す)
vercel flags set ai-summary-model -e production --variant stable \
  --message "Emergency rollback"

import { dedupe } from 'flags/next';

type Entities = { user?: { id: string; email: string; plan: string } };

const identify = dedupe(async (): Promise<Entities> => {
  const session = await getSession();
  return {
    user: session?.user
      ? { id: session.user.id, email: session.user.email, plan: session.user.plan }
      : undefined,
  };
});

export const featureFlag = flag<boolean, Entities>({
  key: 'my-feature',
  identify,
  adapter: vercelAdapter(),
});

vercel flags create ai-feature-enabled --kind boolean \
  --description "Master kill switch for all AI features"

vercel flags create ai-model-tier --kind string \
  --variant stable="GPT-4o" --variant candidate="Claude 3.7"

vercel flags create ai-model-config --kind json \
  --variant '{"temperature":0.7,"maxTokens":2048}'=Conservative \
  --variant '{"temperature":1.0,"maxTokens":4096}'=Creative

// FlagValues 配置で Web Analytics に自動付与
<FlagValues values={{ 'pricing-layout': await pricingLayout() }} />

import { track } from '@vercel/analytics';
track('Purchase', { amount: 99 }, { flags: ['pricing-layout'] });

source:vercel @evt.name:edge_config.updated
source:vercel @evt.name:project.env_variable.updated