Quickstart (5분)

1. API Keys 페이지에서 read scope 키를 발급합니다.
2. 호스트 프로젝트에서 설치:

pnpm add @taekcle/web

혹은 npm:

npm i @taekcle/web

1) Provider 셋업 (Next.js App Router 예시)

'use client';
import { createClient, TaekcleProvider } from '@taekcle/web';
import { useMemo } from 'react';

export function Providers({ children, deviceId, userId }) {
  const client = useMemo(
    () =>
      createClient({
        apiKey: process.env.NEXT_PUBLIC_TAEKCLE_KEY!,
        apiUrl: process.env.NEXT_PUBLIC_TAEKCLE_URL!,
        identity: { deviceId, userId },
      }),
    [deviceId, userId],
  );
  return <TaekcleProvider client={client}>{children}</TaekcleProvider>;
}

2) Variant 사용

'use client';
import { useVariant } from '@taekcle/web';

export function CheckoutCTA() {
  const variant = useVariant('checkout-redesign', 'control');
  // 호스트 앱이 직접 이벤트 발화
  // mixpanel.track('experiment_started', { experiment: 'checkout-redesign', variant });
  return variant === 'B' ? <NewCTA /> : <OldCTA />;
}

3) 플래그 사용

import { useFlag } from '@taekcle/web';

const showBanner = useFlag('promo-banner', false);
if (showBanner) return <Banner />;

4) 로그인 시 identity 매핑

import { identify, useTaekcle } from '@taekcle/web';

const client = useTaekcle();
await identify(client, {
  deviceId: getDeviceId(),
  userId: currentUser.id,
  apiKey: process.env.NEXT_PUBLIC_TAEKCLE_KEY!,
  apiUrl: process.env.NEXT_PUBLIC_TAEKCLE_URL!,
});

Playground에서 바로 테스트