本文へ移動

まずはAI導入ガイドから

対象repositoryのrootで導入プロンプトを実行し、実装後に setup-check と setup-doctor で確認します。

導入手順を見る
AI が検索して使う Cluebase 導入ドキュメント
22 docs matched
導入順序

AI導入ガイド

AI agent が Cluebase を導入するときに最初に読む作業順序です。

aisetuporderhandoffcluebase

目的

Cluebase 導入は analytics のタグ埋め込みではありません。観測された事実を Customer Value Understanding Engine へ渡し、後続の value_achievement、diagnosis、next_action へつながる証拠経路を作る作業です。

顧客側の変更は、対象runtimeの公式SDKを導入し、既存アプリの起動・認証・組織・session resetの境界へ公式APIを必要最小限だけ追加することです。transport、token、OpenTelemetry/自動収集、相関、送信失敗の隔離はCluebase SDKが担当します。

作業順序

  • 対象runtimeの公式Cluebase SDKを依存管理へ追加する。server runtimeでAPI keyまたはservice keyが必要な場合はserverだけに設定し、frontendへ渡さない。
  • 起動時に `cluebase.init` を一度だけ呼び、既存の認証・組織・session resetの境界に `identify`・`group`・`reset` を追加する。`track` は自動収集で取れない明確な業務イベントを顧客が明示する場合だけ使い、自動挿入しない。
  • 通常のアプリ操作でCluebase導入が顧客アプリを妨げないことを確認する。

完了条件

  • Cluebase SDK が本番コードの通常経路に接続されている。
  • frontend/backendの全対象serviceが、対象runtimeに対応する公開Cluebase SDKを宣言している。
  • secret が server 側に残り、client bundle に含まれない。
  • user と organization の識別が既存 auth 状態に追従する。
  • logout または session reset で Cluebase 側の identity がクリアされる。
  • 通常のアプリ操作でCluebase導入が顧客アプリを妨げないことを確認し、必要に応じて任意の診断を利用する。
導入順序

Cluebaseの責務境界

SDK 導入時に混同しやすい観測、解釈、価値理解の境界です。

conceptcustomer-valueobservationevidence

正しい境界

  • SDK は事実を観測して送る入口です。
  • AI analysis や diagnosis を導入先アプリ内で固定実装しない。
  • Cluebase 側で observation、operation、value_achievement、evidence_bundle、next_action へ発展できるように、識別情報と context を欠落させない。
  • event name や URL だけに依存せず、user、organization、environment、page context を送れる状態にする。

導入時に守ること

  • 観測された事実と AI の判断を host app 側で混ぜない。
  • unknown page や unknown operation でも送信が壊れないようにする。
  • 特定顧客、特定画面、特定 URL 前提の分岐を追加しない。
  • Cluebase の canonical model を壊す新しい用語を作らない。

Canonical model

`ObservationSourceEvent -> observation -> operation -> value_achievement -> flow_progress / value_claim / diagnosis -> customer_value_state -> evidence_bundle -> next_action` を正とします。

導入順序

環境変数とSecret

frontend に置ける値と server にだけ置く値を分けるための基準です。 業界標準 (= Stripe publishable key / Mixpanel project token / Segment write key / Sentry DSN) と同じ「public 識別子 + origin allowlist」 パターンで動きます。

envsecretapi-keysecurity

server only

  • `CLUEBASE_API_KEY` または `CLUEBASE_SERVICE_KEY`: 対象runtimeの公式SDKが要求する場合だけ、host backendのsecretとして設定します。frontend code、HTML、public env、mobile bundleには置きません。
  • `CLUEBASE_PROJECT_KEY`: 対象runtimeの公式SDKが要求する場合に設定します。
  • API base URL / endpoint は任意です。接続先を変更しない場合は設定せず、SDKの既定値 `https://api.cluebase.io` を使います。
  • server only の値は `.env`、secret manager、hosting provider の server secret に置きます。

frontend safe

  • `NEXT_PUBLIC_CLUEBASE_PROJECT_KEY` (Vite なら `VITE_CLUEBASE_PROJECT_KEY`) は必須のpublic project keyです。
  • `NEXT_PUBLIC_CLUEBASE_API_BASE_URL` (Vite なら `VITE_CLUEBASE_API_BASE_URL`) は接続先を変える場合だけ置く任意のpublic envです。未指定時はSDKの既定値 `https://api.cluebase.io` を使い、server-onlyの `CLUEBASE_*` secretは置きません。
  • 既存のpublic runtime設定機構がない場合は、Cluebase専用の環境ファイルを作らず、既存の起動・設定ファイルへ公開project keyだけを最小限記述します。

顧客 backend に追加する Cluebase 専用 route は 0 個

Cluebase は Stripe publishable key / Mixpanel project token / Sentry DSN と同じ業界標準パターンで、 frontend SDK が public 識別子を持って Cluebase backend と直接通信します。 顧客 backend に Cluebase 専用 route を作る必要はありません。

短命 token に origin claim を bind + HMAC 署名 + 期限 を含めて発行し、 ingest 時には Origin header と claim を再検証することで CSRF / 他 origin からの abuse を防御しています。 安全な公開設計です。

禁止

  • `CLUEBASE_API_KEY` を frontend code、HTML、public env、mobile bundle に入れない。
  • browser から secret を使って Cluebase API を直接呼ばない。
  • setup のために一時的に secret を console に出さない。

任意の確認コマンド例

sh
rg "CLUEBASE_API_KEY" src app packages
rg "NEXT_PUBLIC_CLUEBASE" src app packages
pnpm build
導入順序

導入先の見つけ方

AI agent が framework ごとの正しい接続点を見つけるための探索手順です。

searchentrypointauthorganizationlogout

最初に探す場所

  • app root、layout、provider、client bootstrap、main entry。
  • API server startup、middleware registration、plugin registration。
  • login callback、session restore、auth provider success handler。
  • organization を確定する provider または hook。
  • logout、sign out、session clear、token revoke の実装。

検索語

sh
rg "login|signin|signIn|auth|session|user" src app
rg "organization|company" src app
rg "logout|signOut|session.clear|revoke" src app
rg "main\.|layout\.|provider|middleware|startup" src app

判断ルール

  • 既存の auth source of truth に従う。
  • organization switch がある場合は switch 後の確定値を使う。
  • route path や button text だけで user identity を決めない。
  • 未ログイン状態では identify せず、匿名観測に留める。
導入順序

Official SDK Contract

setup画面のAIプロンプトと人間が同じ前提で実装できるようにする公式SDK契約です。

sdkcontractsetuppackagelifecycle

前提

初回導入の customer repository に Cluebase SDK importやdependencyが存在しないのは正常です。公式契約に従って対象runtimeの公式SDKを導入し、既存の起動・lifecycle境界へ必要最小限のAPIを追加します。

既存の auth、organization、reset、bootstrap の境界は repository から判断しますが、SDK package 名、関数 signature、env 名、 frontend SDK と Cluebase backend の通信方向は Cluebase の公式契約を source of truth とします。

frontend SDK

  • dependency: `@genn-inc/cluebase-frontend-sdk@latest`
  • import: `import cluebase from "@genn-inc/cluebase-frontend-sdk"`
  • `cluebase.init(options)` は app 起動時に一度だけ呼ぶ。endpointは任意で、未指定時は `https://api.cluebase.io` を使う。SDKがtransport、token、event送信を内蔵するため、顧客backendにCluebase専用routeを作る必要はない。
  • `cluebase.identify(userId, traits)` はログイン済み user id を受け取り、表示名がある場合は `traits.name` に入れる。
  • `cluebase.group("organization", organizationId, traits)` は会社 id を受け取り、表示名がある場合は `traits.name` に入れる。
  • `cluebase.reset()` は session reset 後に呼ぶ。
  • frontendから顧客backendへリクエストを送る場合は、実際のbackend originを `tracePropagationOrigins` に設定する。Cluebase API originを指定してはいけない。
  • public lifecycle API は SDK 内で failure isolation されるため、各呼び出しを独自 try/catch で囲まない。

FastAPI backend SDK

  • dependency: `cluebase-backend-sdk`。Python backend dependency は version pin しない。
  • import: `from cluebase_backend_sdk import cluebase`
  • FastAPI app 作成後に `cluebase.init(...)` を一度だけ呼ぶ。初期化には対象SDKの契約で必要な `project_key`、`api_key`、`service_key` のみを渡し、endpointは接続先を変える場合だけ任意で指定します。
  • `cluebase.identify(user_id, traits={...})`, `cluebase.group("organization", organization_id, traits={...})`, `cluebase.reset()` を既存 lifecycle 境界で呼ぶ。
  • API base URL / endpointは接続先を変える場合だけ任意で設定します。未指定時はbackend SDKが `https://api.cluebase.io` を使います。

新規ファイル作成の扱い

  • Cluebase固有のsource、config、environment、adapter fileは作成しない。公式SDKのimport、初期化、API呼び出しは既存のアプリケーションファイルへ最小限だけ追加する。
  • 顧客 backend に Cluebase 専用 route は作らない。 frontend SDK が Cluebase backend を直接叩く設計のため、 host backend に追加する Cluebase 関連 route は 0 個。
  • 既存の関数、変数、クラス、route、cookie、認証、session、tenant/organization処理を改名、削除、移動、分割、統合、wrapper化、挙動変更しない。
  • 顧客側で独自のmiddleware、proxy、経由route、HTTP client、独自transport、logger、exporter、OpenTelemetry設定、runtime preload、browser build plugin、framework adapter、zone/polyfillを追加しない。公式SDKの初期化が内部で登録する処理は公式SDKの責務とする。
  • 顧客側の変更は package.json または同等の依存管理ファイル、lockfile、既存のアプリケーション・環境設定ファイルへの最小追記に限定し、host appのauth redesign、router redesign、formatter cleanup、独自transportを混ぜない。
導入順序

Frontend SDK の通信経路

frontend SDK が secret を持たずに Cluebase backend と直接通信する仕組みです。 顧客 backend に Cluebase 専用 route を追加する必要はありません。

frontend-sdkdirect-connectionsecuritycluebase-apidirect-browser-token

業界標準パターン

Cluebase frontend SDK は Stripe.js (publishable key) / Mixpanel JS SDK (project token) / Segment Analytics.js (write key) / Sentry JavaScript SDK (DSN) と同じ「public 識別子 + origin allowlist」 業界標準パターンで動きます。 顧客 backend に Cluebase 専用 route を追加実装する必要はありません。

frontend は framework に合う public env 名で必須のproject keyを持ちます。API base URLはローカルなど接続先を変える場合だけ任意で設定し、未指定時はSDKの既定値 `https://api.cluebase.io` を使います。Next.js は `NEXT_PUBLIC_CLUEBASE_PROJECT_KEY` / `NEXT_PUBLIC_CLUEBASE_API_BASE_URL`、Vite は `VITE_CLUEBASE_PROJECT_KEY` / `VITE_CLUEBASE_API_BASE_URL` を使い、SDK内蔵でCluebase backendを直接呼びます。

通信経路 (= 3 hops)

  • hop 1: 顧客 frontend → Cluebase backend `POST /api/v1/ingest/browser-tokens` で短命 frontend token を取得 (= SDK が自動で叩く)。
  • hop 2: 顧客 frontend → Cluebase backend `POST /api/v1/ingest/browser` で frontend event を ingest (= SDK が自動で叩く)。
  • hop 3: 顧客 backend → Cluebase backend `POST /api/v1/ingest/backend` で server event を ingest (= backend SDK が `x-cluebase-api-key` 付きで叩く)。

セキュリティ (= browser に secret を出さずに済む理由)

  • token は Cluebase backend が発行する短命 token で、 origin claim bind + HMAC 署名 + 期限 を含みます。
  • ingest 時に Cluebase backend が token を再検証し、 同時に request の Origin header と claim の origin が一致するか確認します (= 他 origin からの abuse 防御)。
  • `CLUEBASE_API_KEY` (secret) は backend SDK のみが使用し、 frontend bundle / public env には絶対に出ません。
  • projectKey は public 識別子で、 Stripe publishable key と同じく漏れても安全な設計です。

顧客 backend に追加する route が 0 個である理由

Cluebase backend 側の `POST /api/v1/ingest/browser-tokens` が origin allowlist + projectKey 検証で短命 token を発行します。

顧客 backend は frontend event 送信の token 発行責務を持ちません。frontend SDK が Cluebase backend を直接呼びます。

Cluebase関数

cluebase.init

Cluebase SDK の初期化です。app 起動時に一度だけ実行します。

API Reference / Frontend SDK
cluebase.init(options: CluebaseInitOptions): void
Returns

void。SDK は送信処理を非同期に扱い、host app の render / login / API response を待たせません。

ParameterTypeRequiredSourceExampleNotes
options.endpoint
string任意ローカルなど接続先を変える場合の `NEXT_PUBLIC_CLUEBASE_API_BASE_URL` / `VITE_CLUEBASE_API_BASE_URL` などの public envhttps://cluebase.example.com

Cluebase API の base URL (= origin) です。省略時は `https://api.cluebase.io` を使います。frontend SDKが短命token取得とevent送信を内蔵します。

path を含めず origin だけを渡します (= `https://cluebase.example.com`)。 fullingest path や proxy URL を渡してはいけません。

options.projectKey
string必須setup 画面で発行された project keypk_dev_abc123

Cluebase 側で project を識別する public key です。secret ではありません。prefix (`pk_dev_` / `pk_prod_`) から environment が自動判定されるため `environment` 引数は不要です。

API Reference / Node.js backend SDK
cluebase.init(options: CluebaseInitOptions): void
Returns

void。OTel instrumentation と backend event export を登録します。

ParameterTypeRequiredSourceExampleNotes
endpoint
string任意接続先を変える場合のserver-only `CLUEBASE_API_BASE_URL`https://cluebase.example.com

backend SDKがCluebase APIのベースURLとして受け取ります。省略時は `https://api.cluebase.io` を使います。

projectKey
string必須server-only `CLUEBASE_PROJECT_KEY`pk_dev_abc123

backend 送信元 project を識別します。environment は project key から解決されます。

apiKey
string必須server-only `CLUEBASE_API_KEY`ak_dev_...

backend SDK が Cluebase API と通信するための secret です。`x-cluebase-api-key` header に使います。

frontend code、HTML、public env に出してはいけません。

serviceKey
string必須既存backendの安定したservice名customer-service

backend service を識別します。顧客repositoryの既存名を使います。

API Reference / Python backend SDK (FastAPI / Django)
cluebase.init(options: Mapping[str, object]) -> None
Returns

None。middleware / request context を登録します。

ParameterTypeRequiredSourceExampleNotes
endpoint
str任意接続先を変える場合の `CLUEBASE_API_BASE_URL`https://cluebase.example.com

backend SDKがCluebase APIのベースURLとして受け取ります。省略時は `https://api.cluebase.io` を使います。

project_key
str必須`CLUEBASE_PROJECT_KEY`pk_dev_abc123

backend 送信元 project を識別します。prefix (`pk_dev_` / `pk_prod_`) から environment が自動判定されます。

api_key
str必須server-only `CLUEBASE_API_KEY`ak_dev_...

backend SDK が Cluebase API と通信するための secret です。 `x-cluebase-api-key` header に乗ります。

frontend code、HTML、public env に出してはいけません。

service_key
str必須setup 画面の SDK 初期化例customer-service

backend service を識別します。顧客repositoryの既存名を使い、推測で固定しません。

cluebase.initsdkbootstrap

いつ呼ぶか

  • frontend では既存のmodule-level client singleton、SPA entry、またはframeworkのclient startup boundaryで一度だけ呼びます。
  • Next.js で既存のclient startup boundaryを使う場合は、必要に応じて `"use client"` から始まる既存ファイルへ追加します。
  • backend では server startup、framework plugin registration、middleware registration のタイミングで呼びます。
  • React component の `useEffect`、page component、sidebar、auth callback の中では呼ばず、component rerender ごとに再実行しないようにします。

frontend SDK example (Next.js)

ts
"use client";

import cluebase from "@genn-inc/cluebase-frontend-sdk";

cluebase.init({
	projectKey: process.env.NEXT_PUBLIC_CLUEBASE_PROJECT_KEY,
});

注意

  • `CLUEBASE_API_KEY` を `cluebase.init` の frontend side option に渡さない (= frontend SDK は public projectKey のみで動く)。
  • 必須のproject keyが欠けている場合は `cluebase.init` に空文字を渡さず、不足を報告する。endpointは任意で、Next.js は `NEXT_PUBLIC_CLUEBASE_API_BASE_URL`、Vite は `VITE_CLUEBASE_API_BASE_URL` を使う。
  • singleton guard を使う場合、`initialized = true` は `cluebase.init` 呼び出し後に設定する。
  • init failure を host app の起動失敗にしない。
  • 複数 root がある場合は root ごとではなく実行単位ごとに一度にする。
Cluebase関数

cluebase.identify

ログイン済み user を Cluebase に識別させるための関数です。

API Reference / Frontend SDK
cluebase.identify(userId: string, traits?: CluebaseSubjectTraits): void
Returns

void。呼び出しは non-blocking です。login response や route transition を await しません。

ParameterTypeRequiredSourceExampleNotes
userId
string必須auth/session の stable user iduser_123

同じ人を継続して識別するための不変 ID です。email や表示名のように変わる値を primary id にしません。

未ログイン visitor、仮 UUID、route path、button text から user id を作らないでください。

traits
Record<string, string | number | boolean | null>任意auth user profile / plan / role など{ email: "[email protected]", role: "admin" }

Cluebase の customer value understanding に役立つ user 属性です。

password、access token、session token、秘密情報、過剰な PII は送らないでください。

API Reference / Node.js backend SDK
cluebase.identify(userId: string, traits?: CluebaseSubjectTraits): void
Returns

void。request context がある場合は現在 request の user context に接続します。

ParameterTypeRequiredSourceExampleNotes
userId
string必須authenticated user model の stable idString(user.id)

backend request や job を user に接続する stable id です。

traits
CluebaseSubjectTraits | undefined任意user model / auth claims の安全な属性{ role: "owner" }

server 側で分かる user 属性です。

API Reference / Python backend SDK (FastAPI / Django)
cluebase.identify(user_id: str, traits: dict | None = None) -> None
Returns

None。request context がある場合は現在 request の user context に接続します。

ParameterTypeRequiredSourceExampleNotes
user_id
str必須authenticated user model の primary keystr(request.user.id)

backend request や job の観測を user に接続する stable id です。

traits
dict | None任意user model / auth claims の安全な属性{"role": "owner"}

server 側で分かる user 属性です。request ごとに変化しない profile 情報を中心にします。

cluebase.identifyauthuseridentity

いつ呼ぶか

  • login success 後、または session restore で user が確定した後。
  • user id が変わったとき。
  • 匿名状態から認証済み状態へ遷移したとき。

送る情報

  • `userId`: host app の安定 user id。
  • `traits.email`: 存在する場合のみ。PII の扱いは host app の方針に従う。
  • `traits.name`、`traits.role`、`traits.plan` など、価値理解に役立つ範囲の属性。

frontend SDK example

ts
import cluebase from "@genn-inc/cluebase-frontend-sdk";

cluebase.identify(user.id, {
	name: user.name,
	role: user.role,
	plan: user.plan,
});

注意

  • 未ログインの仮 id を userId として固定しない。
  • route 名や email だけで user id を作らない。
  • logout 後は前 user の identity を残さない。
Cluebase関数

cluebase.group

会社を Cluebase に伝える関数です。MVP の `groupType` は "organization" のみです。

API Reference / Frontend SDK
cluebase.group(groupType: "organization", groupKey: string, traits?: CluebaseGroupTraits): void
Returns

void。organization が確定した後に non-blocking で呼びます。

ParameterTypeRequiredSourceExampleNotes
groupKey
string必須active organization の stable idorg_789

ユーザーがどの会社の文脈で操作しているかを識別します。

user id と同じ値で代用しないでください。

traits
Record<string, string | number | boolean | null>任意organization / billing plan の安全な属性{ displayName: "Acme", plan: "enterprise" }

organization の理解に必要な表示名、plan、industry、region などです。

契約金額、請求先詳細、内部メモなどの sensitive data は送信前に方針確認します。

API Reference / Node.js backend SDK
cluebase.group("organization", groupKey: string, traits?: CluebaseGroupTraits): void
Returns

void。現在 request の organization context を更新します。

ParameterTypeRequiredSourceExampleNotes
groupKey
string必須active organization の stable idString(organization.id)

server request を customer organization に接続する ID です。

traits
CluebaseGroupTraits | undefined任意organization model の安全な属性{ name: "Acme", plan: "pro" }

organization の理解に必要な属性です。

API Reference / Python backend SDK (FastAPI / Django)
cluebase.group(group_type: Literal["organization"], group_key: str, traits: dict | None = None) -> None
Returns

None。現在 request の organization context を更新します。

ParameterTypeRequiredSourceExampleNotes
group_type
Literal["organization"]必須Cluebaseのgroup taxonomy"organization"

MVPで利用できるgroup typeはorganizationだけです。

group_key
str必須organization dependency の stable idstr(organization.id)

server request を customer organization に接続する ID です。

traits
dict | None任意organization model の安全な属性{"name": "Acme", "plan": "pro"}

organization diagnosis や value achievement の解釈に役立つ属性です。

cluebase.grouporganization

いつ呼ぶか

  • organization が確定した後。
  • organization switch が完了した後。
  • session restore で active organization が復元された後。

frontend SDK example

ts
import cluebase from "@genn-inc/cluebase-frontend-sdk";

cluebase.group("organization", organization.id, {
	name: organization.name,
	plan: organization.plan,
	industry: organization.industry,
});

注意

  • user id と organization id を混同しない。
  • organization switch の前の値で `cluebase.group` を呼ばない。
  • 個別画面の path から organization id を推測しない。
Cluebase関数

cluebase.reset

logout、session reset、user switch 時に Cluebase identity をクリアします。

API Reference / Frontend SDK
cluebase.reset(): void
Returns

void。現在の user/organization identity を SDK 側からクリアします。host app の logout 処理を await させません。

ParameterTypeRequiredSourceExampleNotes
なし
none任意logout / session reset / user switch の成功境界cluebase.reset()

frontend SDK の reset は引数を取りません。現在の識別状態を匿名状態へ戻します。

organization だけ変わる場合は `cluebase.group`、user が消える場合は `cluebase.reset` です。

API Reference / Node.js backend SDK
cluebase.reset(): void
Returns

void。request/session context の identity をクリアします。

ParameterTypeRequiredSourceExampleNotes
なし
none任意logout / session expiry handlercluebase.reset()

server side でも引数を取りません。匿名状態に戻します。

API Reference / Python backend SDK (FastAPI / Django)
cluebase.reset() -> None
Returns

None。request/session context の identity をクリアします。

ParameterTypeRequiredSourceExampleNotes
なし
none任意logout endpoint / session expiry handlercluebase.reset()

server side でも引数を取りません。匿名状態に戻します。

cluebase.resetlogoutsessionreset

いつ呼ぶか

  • logout button の成功処理。
  • session expired で user state を消す処理。
  • user switch の前。
  • test organization から real organization へ切り替える前。

frontend SDK example

ts
import cluebase from "@genn-inc/cluebase-frontend-sdk";

async function handleLogout() {
	cluebase.reset();
	await authClient.signOut();
}

注意

  • logout failure 時に host app の session 状態と矛盾しないようにする。
  • identity clear は user-facing error にしない。
  • organization だけ切り替える場合は `cluebase.group`、user 自体が消える場合は `cluebase.reset` を使う。
Cluebase関数

cluebase.track

利用可能ですが自動挿入はせず、自動収集だけでは分からない業務上の成功を顧客が明示する場合だけ送ります。

API Reference / Frontend / Node.js SDK
cluebase.track(eventName, properties?, metrics?): void
Returns

void。イベントはSDKのbufferへ追加され、host appの処理を待たせません。

ParameterTypeRequiredSourceExampleNotes
eventName
string必須業務処理が成功した境界"checkout_completed"

自動収集だけでは判定できない、意味のある業務イベント名です。

properties
Record<string, unknown>任意イベントに付随する安全な業務属性{ plan: "pro" }

イベントの対象や結果を説明する属性です。secretや不要なPIIは含めません。

metrics
Record<string, number>任意イベントに紐づく数値指標{ amount: 1200 }

集計したい数値を任意で渡します。

API Reference / Python backend SDK
cluebase.track(event_name: str, properties?: dict, metrics?: dict[str, float | int]) -> None
Returns

None。eventはSDKのbufferへ追加され、host appの処理を待たせません。

ParameterTypeRequiredSourceExampleNotes
event_name
str必須業務処理が成功した境界"checkout_completed"

自動収集だけでは判定できない業務イベント名です。

properties
dict | None任意イベントに付随する安全な業務属性{"plan": "pro"}

イベントの対象や結果を説明する属性です。

metrics
dict[str, float | int] | None任意イベントに紐づく数値指標{"amount": 1200}

集計したい数値を任意で渡します。

cluebase.trackcustom-eventbusiness-event

いつ使うか

  • フォーム送信、決済完了、動画完了など、画面のclickやnetworkだけでは成功を判定できないとき。
  • 既存の自動収集で同じ事実を取得できる場合はtrackを追加せず、重複を避ける。
  • 成功したことが確定した後にだけ呼び、開始・失敗・途中状態は別の意味として設計できる場合に限って追加する。

最小例

ts
import cluebase from "@genn-inc/cluebase-frontend-sdk";

async function onCheckoutSuccess(order: Order) {
	cluebase.track("checkout_completed", {
		orderId: order.id,
	}, { amount: order.total });
}

注意

  • イベント名やpropertiesにpassword、token、API key、決済情報などのsecretを入れない。
  • 自動収集で取得済みのpage view、click、networkをtrackで重複送信しない。
  • trackの失敗を顧客アプリの業務処理へ伝播させない。
Cluebase関数

cluebase.flush

bufferに残ったイベントを、その場で送信します。

API Reference / Frontend / Node.js / Python SDK
await cluebase.flush(): Promise<void> / await cluebase.flush()
Returns

Promise<void>。SDKを終了せず、呼び出し時点のbufferを送信します。

ParameterTypeRequiredSourceExampleNotes
cluebase.flushbufferdelivery

いつ使うか

  • 通常の自動batch送信で十分な場合は追加しない。
  • ページ離脱前、重要な業務イベントの直後、短時間でprocessが終了する処理など、送信完了を待つ必要がある場合。
  • flush後もSDKは開いたままなので、その後のイベント収集を継続できる。

最小例

ts
import cluebase from "@genn-inc/cluebase-frontend-sdk";

async function finishCheckout() {
	cluebase.track("checkout_completed");
	await cluebase.flush();
}

注意

  • flushを各イベントの後に呼ぶとbatchingの利点を失うため、必要な境界にだけ置く。
  • flushの失敗を顧客アプリの業務成功・失敗判定に使わない。結果を確認する必要がある場合はSDK diagnosticsを使う。
Cluebase関数

cluebase.close

bufferをflushしてSDKのリソースを解放します。

API Reference / Frontend / Node.js / Python SDK
await cluebase.close(): Promise<void> / await cluebase.close()
Returns

Promise<void>。終了処理を行い、close後は新しい収集を受け付けません。

ParameterTypeRequiredSourceExampleNotes
cluebase.closeshutdowngraceful-shutdown

いつ使うか

  • backend processのgraceful shutdownや、SDKを再利用しないworker終了時。
  • 通常のSPAの画面遷移やNext.jsのrenderごとには使わず、必要ならflushを使う。
  • closeはflushとリソース解放をまとめて行うため、終了境界で一度だけ呼ぶ。

最小例

py
from cluebase_backend_sdk import cluebase

async def shutdown():
    await cluebase.close()

注意

  • close後に同じSDK instanceで収集を再開しない。別の実行単位で再開する場合だけinitから開始する。
  • closeはディスクへの永続化を保証するAPIではなく、期限内のbest-effort送信です。
Cluebase関数

Backend専用APIとdiagnostics

外部ID連携とOTelの機械的な分岐情報、SDKの状態確認に使うAPIです。diagnosticsは全runtimeで利用できます。

API Reference / Node.js / Python SDK: link
cluebase.link(input): void / None
Returns

backend SDKがidentity_link_hint observationを1件作成します。relationの承認や外部データ同期は行いません。

ParameterTypeRequiredSourceExampleNotes
input.subject
{ type: "organization"; id: string }必須host appのcanonical subject{ type: "organization", id: organizationId }

外部IDを結び付ける自社側の安定IDです。

input.external
{ namespace: string; id: string }必須host appが保持する外部サービスID{ namespace: "stripe.customer", id: stripeCustomerId }

provider固有のnamespaceと外部IDです。

API Reference / Node.js / Python SDK: operation discriminator
cluebase.setOperationDiscriminator(value) / cluebase.set_operation_discriminator(value): void / None
Returns

現在のOTel request spanへ機械的な分岐ヒントを追加します。business eventやsemantic meaningは作りません。

ParameterTypeRequiredSourceExampleNotes
value
string必須既に観測されているrequest内で選択された分岐の値"invoice_created"

Runtime EvidenceとCode Evidenceを機械的に結び付ける値です。

API Reference / All SDK: diagnostics
cluebase.getDiagnostics() / cluebase.get_diagnostics(): Snapshot
Returns

payloadを含まないSDKのlifecycle、flush/close結果、counter、直近の安全なmetadataです。

ParameterTypeRequiredSourceExampleNotes
cluebase.linksetOperationDiscriminatorset_operation_discriminatordiagnostics

使う判断

  • linkはbackendで外部サービスIDと自社のcanonical subjectを実際に対応付ける必要がある場合だけ使う。browserでは使わない。
  • operation discriminatorは既にOTelで観測されているrequestの分岐をCode Evidenceと結び付ける場合だけ使う。業務イベントの代わりにしない。
  • diagnosticsはpayload、credential、header、raw PIIを含まないため、SDKの状態確認やdoctorの補助に使う。

最小例

py
from cluebase_backend_sdk import cluebase

cluebase.link({
    "subject": {"type": "organization", "id": organization_id},
    "external": {"namespace": "stripe.customer", "id": stripe_customer_id},
})
cluebase.set_operation_discriminator("invoice_created")
diagnostics = cluebase.get_diagnostics()

注意

  • linkはExternalIdentityRelationを自動承認せず、既存のscope・revision・collision・human reviewを迂回しない。
  • operation discriminatorにユーザー入力やsecretを入れない。
  • diagnosticsの内容をログや顧客向け画面へ無制限に公開しない。
FrameworkFramework: Next.js

Framework: Next.js

App Router / Pages Router の server と client 境界を守る Cluebase 導入手順です。

nextjsreactapp-routerpages-routerroute-handler

接続点

  • `src/lib/cluebase.ts` などの client singleton で `cluebase.init` を一度だけ呼び、`app/layout.tsx` からその module を読み込む。
  • Cluebase 用の `app/api/v1/cluebase/...` route は **作らない**。Next.js では frontend SDK が Cluebase backend を直接叩くため、`NEXT_PUBLIC_CLUEBASE_API_BASE_URL` と `NEXT_PUBLIC_CLUEBASE_PROJECT_KEY` を public env に置くだけで完結する。
  • auth callback、session provider、user hook の user 確定後に `cluebase.identify` を呼ぶ。
  • organization provider の確定後に `cluebase.group("organization", ...)` を呼ぶ。
  • signOut handler、logout route、session clear callback で `cluebase.reset` を呼ぶ。

client singleton

ts
"use client";

import cluebase from "@genn-inc/cluebase-frontend-sdk";

let initialized = false;

export function initializeCluebase() {
	if (initialized || typeof window === "undefined") return;
	const endpoint = process.env.NEXT_PUBLIC_CLUEBASE_API_BASE_URL;
	const projectKey = process.env.NEXT_PUBLIC_CLUEBASE_PROJECT_KEY;
	if (!endpoint || !projectKey) return;
	cluebase.init({
		endpoint,
		projectKey,
	});
	initialized = true;
}

initializeCluebase();

layout wiring

tsx
import "@/lib/cluebase";

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="ja">
			<body>
				{children}
			</body>
		</html>
	);
}

verification

  • server runtime の設定にだけ `CLUEBASE_API_KEY` が出現する。
  • client bundle に `CLUEBASE_API_KEY` が出現しない。
  • login restore 後に identify が呼ばれる。
  • organization switch 後に organization が更新される。
FrameworkFramework: React SPA

Framework: React SPA

Vite や CRA など frontend-only React app での Cluebase 導入手順です。

reactspavitecrabrowser

接続点

  • `src/main.tsx` または root provider に bootstrap component を置く。
  • Cluebase 用 backend route は **作らない**。frontend SDK が Cluebase backend を直接叩くため、SPA に backend がなくても Cluebase 導入は可能。
  • auth provider の user 確定後に `cluebase.identify` を呼ぶ。
  • organization provider の確定後に `cluebase.group("organization", ...)` を呼ぶ。
  • logout handler で `cluebase.reset` を呼ぶ。

bootstrap example

tsx
import cluebase from "@genn-inc/cluebase-frontend-sdk";
import { createRoot } from "react-dom/client";

cluebase.init({
	endpoint: import.meta.env.VITE_CLUEBASE_API_BASE_URL,
	projectKey: import.meta.env.VITE_CLUEBASE_PROJECT_KEY,
});

createRoot(document.getElementById("root")!).render(<App />);

identity provider example

tsx
import cluebase from "@genn-inc/cluebase-frontend-sdk";
import { useEffect } from "react";

export function CluebaseIdentityBridge({ user, organization }: Props) {
	useEffect(() => {
		if (!user) {
			cluebase.reset();
			return;
		}
		cluebase.identify(user.id, { name: user.name, role: user.role });
	}, [user]);

	useEffect(() => {
		if (organization) {
			cluebase.group("organization", organization.id, { name: organization.name, plan: organization.plan });
		}
	}, [organization]);

	return null;
}

注意

  • SPA に backend がなくても Cluebase 導入は可能です。frontend SDK が Cluebase backend を直接叩くため、BFF や proxy を追加実装する必要はありません。
  • public env に置くのは Cluebase API base URL と public projectKey だけにする。 `CLUEBASE_API_KEY` は backend SDK 専用で frontend に出さない。
  • React Strict Mode の development double effect で破綻しないよう、SDK 側の idempotency に従う。
FrameworkFramework: Angular

Framework: Angular

Angular browser app で runtime config を通して Cluebase frontend SDK を初期化する手順です。

angularbrowserruntime-config

接続点

  • `AppComponent` または root provider の singleton 初期化箇所で `cluebase.init` を一度だけ呼ぶ。
  • Cluebase 用 backend route は作らない。frontend SDK が Cluebase backend を直接叩く。
  • auth service の user 確定後に `cluebase.identify` を呼ぶ。
  • organization service の確定後に `cluebase.group("organization", ...)` を呼ぶ。
  • logout handler で `cluebase.reset` を呼ぶ。

runtime config example

ts
import cluebase from "@genn-inc/cluebase-frontend-sdk";

export function initCluebase(config: RuntimeConfig) {
	cluebase.init({
		endpoint: config.cluebaseApiBaseUrl,
		projectKey: config.cluebaseProjectKey,
	});
}

注意

  • browser bundle に入れるのは Cluebase API base URL と public projectKey だけにする。
  • `CLUEBASE_API_KEY` は frontend SDK option や browser bundle に入れない。
  • Angular SSR を使う場合も browser SDK 初期化は browser 側 singleton に閉じる。
FrameworkFramework: FastAPI

Framework: FastAPI

FastAPI server に Cluebase backend SDK を初期化し、auth dependency から user/organization を接続します。

fastapipythonbackendmiddlewaredependency

接続点

  • `main.py` または app factory で `cluebase.init` を一度だけ呼ぶ。
  • auth dependency で request user が確定した後に `cluebase.identify` を呼ぶ。
  • organization dependency の確定後に `cluebase.group` を呼ぶ。
  • logout endpoint で `cluebase.reset` を呼ぶ。
  • frontend がある場合でも FastAPI に Cluebase 用 route を **追加実装しない**。frontend SDK が Cluebase backend を直接叩き、backend SDK 側は通常の server event ingest のみ担当する。

startup example

py
import os
from fastapi import FastAPI
from cluebase_backend_sdk import cluebase

app = FastAPI()

endpoint = os.getenv("CLUEBASE_API_BASE_URL")
project_key = os.getenv("CLUEBASE_PROJECT_KEY")
api_key = os.getenv("CLUEBASE_API_KEY")

if endpoint and project_key and api_key:
    cluebase.init({
        "endpoint": endpoint,
        "project_key": project_key,
        "api_key": api_key,
        "service_key": "customer-service",
    })

identity dependency example

py
from cluebase_backend_sdk import cluebase

async def current_user_dependency(request):
    user = await resolve_current_user(request)
    if user:
        cluebase.identify(str(user.id), traits={"name": user.name, "role": user.role})
    return user

async def active_organization_dependency(request):
    organization = await resolve_active_organization(request)
    if organization:
        cluebase.group("organization", str(organization.id), traits={"name": organization.name, "plan": organization.plan})
    return organization

注意

  • dependency が every request で呼ばれる場合、SDK の推奨する request context に従う。
  • API key を frontend response に含めない。
  • background task で user context が必要な場合は明示的に引き継ぐ。
FrameworkFramework: Django

Framework: Django

Django settings、middleware、auth view を使った Cluebase 導入手順です。

djangopythonbackendmiddlewareauth

接続点

  • `settings.py`、`AppConfig.ready`、または project startup で `cluebase.init` を一度だけ呼ぶ。
  • login view、auth signal、session restore middleware で user 確定後に `cluebase.identify` を呼ぶ。
  • organization middleware または request scoped organization resolver で `cluebase.group` を呼ぶ。
  • logout view で `cluebase.reset` を呼ぶ。
  • frontend がある場合でも Django view に Cluebase 用 route を **追加実装しない**。frontend SDK が Cluebase backend を直接叩き、backend SDK 側は通常の server event ingest のみ担当する。

startup example

py
import os
from cluebase_backend_sdk import cluebase

endpoint = os.getenv("CLUEBASE_API_BASE_URL")
project_key = os.getenv("CLUEBASE_PROJECT_KEY")
api_key = os.getenv("CLUEBASE_API_KEY")

if endpoint and project_key and api_key:
    cluebase.init({
        "endpoint": endpoint,
        "project_key": project_key,
        "api_key": api_key,
        "service_key": "customer-service",
    })

middleware example

py
from cluebase_backend_sdk import cluebase

class CluebaseIdentityMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        if request.user.is_authenticated:
            cluebase.identify(str(request.user.id), traits={"name": request.user.get_full_name(), "is_staff": request.user.is_staff})

        organization = getattr(request, "organization", None)
        if organization:
            cluebase.group("organization", str(organization.id), traits={"name": organization.name, "plan": organization.plan})

        return self.get_response(request)

def logout_view(request):
    cluebase.reset()
    return existing_logout_view(request)

注意

  • middleware order は auth middleware と organization resolver の後に置く。
  • anonymous user を authenticated user として identify しない。
  • Django template に `CLUEBASE_API_KEY` を出さない。
検証

検証手順

導入後に AI agent が報告すべき確認項目です。

verificationsetup-checksetup-doctorreport

static check

  • `setup-check` で顧客repositoryのSDK構成を確認し、`setup-doctor` はCluebaseの疎通と顧客アプリから届いた実イベント・自動収集・保存・分析入力を確認する。synthetic疎通だけでは完了扱いにしない。
  • `CLUEBASE_API_KEY` が server-only の場所にだけある。
  • frontend/backendの全対象serviceが、対象runtimeに対応する公開Cluebase SDKを使っている。
  • `cluebase.init`、`cluebase.identify`、`cluebase.group`、`cluebase.reset` の接続点がある。
  • framework の root、auth、organization、logout の既存経路に接続されている。
  • テストまたは手動確認の根拠が残っている。

API connectivity preflight

  • `setup-doctor` は実画面操作の前に使う疎通確認です。
  • 確認する hop は 3 つです: (1) `client frontend -> Cluebase /api/v1/ingest/browser-tokens` (= frontend SDK が短命 token を取得)、 (2) `client frontend -> Cluebase /api/v1/ingest/browser` (= frontend event 送信)、 (3) `client backend -> Cluebase /api/v1/ingest/backend` (= server event 送信、 `x-cluebase-api-key` 付き)。
  • setup-doctor は login/logout/organization 操作の代替ではありません。event delivery の最終確認は developer が setup 画面または ClickHouse canonical readback で行います。

interactive check

  • 実操作確認は、developer がブラウザで login、organization switch、logout を操作できる状態で行います。
  • AI agent が勝手に production user 操作を代行してはいけません。
  • 確認結果が failed の場合は、どの接続点が欠けているかを report に残します。

report format

md
## Cluebase setup report

- Framework:
- Files changed:
- Init point:
- Identify point:
- Organization point:
- Logout point:
- Commands run:
- Manual checks:
- Not verified:
禁止事項

禁止事項

AI agent が Cluebase 導入時にやってはいけない実装です。

forbiddensecurityhardcodeanti-pattern

security

  • `CLUEBASE_API_KEY` を frontend SDK option や browser bundle に入れない。
  • secret を console、HTML、test snapshot に出さない。
  • 顧客 backend に browser token 用 endpoint を作らない。

implementation

  • 特定 URL、特定 page、特定 organization だけで成立する分岐を入れない。
  • auth が確定する前に fake user として identify しない。
  • organization id と user id を同じ値で代用しない。
  • logout 接続を後回しにしない。
  • AI diagnosis や next_action を host app 側で固定生成しない。

reporting

  • 未確認なのに完了と報告しない。
  • build success を setup success と同一視しない。
  • runtime check をしていない場合は `未確認` と書く。