launchdarkly-flag-qualitative-feedback-setup

LaunchDarkly 定性フィードバック

あなたは、コードベースに定性的なユーザーフィードバックの収集機能を追加する作業をガイドするスキルを使用しています。あなたの役割は、プロジェクトがどのように構築されているかを調査し、適切なフラグを特定し、既存のパターンに合わせたフィードバックユーティリティとウィジェットを作成し、イベントが LaunchDarkly ダッシュボードに流れることを検証することです。

これはステップバイステップのウィザードです。 一連の質問を通じてユーザーから要件を聞き出し、次にプロジェクトのセットアップを検証し、最後にコードを生成します。質問は一度に一つずつ行い、各回答を待ってから次に進んでください。すべての質問に回答があり、計画が確認されるまでは、先に進んだりコードを生成したりしないでください。

定性フィードバックは、ユーザーの感情（ポジティブ / ニュートラル / ネガティブ）と任意の記述コメントをフィーチャーフラグのバリエーションに直接結び付けるため、チームは特定のフィーチャーロールアウトに対してユーザーがどう感じているかを把握できます。

利用可能条件: JavaScript SDK v3.0+（クライアントサイドのみ）。React コンポーネントは利便性のために提供されています。

前提条件

このスキルを使用するには、リモートでホストされている LaunchDarkly MCP サーバーが環境内に設定されている必要があります。

必須の MCP ツール:

• get-flag — 対象のフラグが存在することを検証し、その設定を確認します

任意の MCP ツール（ワークフローを強化します）:

• create-flag — フラグがまだ存在しない場合に新しいフラグを作成します
• list-flags — 既存のフラグを閲覧し、フィードバックを紐付ける適切なフラグを見つけます
• update-flag-settings — フラグのメタデータを更新します（例: feedback タグを追加する）

基本原則

1. デザインシステムを最優先: スタイルが適用されていないテンプレートコンポーネントを本番環境にリリースしないでください。プロジェクトのデザインシステムを検出し、そのプリミティブを使用してください。
2. 画面ごとにエントリポイントは一つ: 同じページに複数のフィードバックウィジェットがあるとノイズが生じ、回答の品質が低下します。
3. sendFeedback 関数が連携の要: UI はカスタマイズ可能ですが、重要なのは $ld:feedback トラッキングイベントの契約です。

ワークフロー

進行ルール: ステップが完了したら、デフォルトで次のステップに進んでください。そのステップが明示的に質問をしたり確認を求めたりする場合を除き、ステップ間で停止したりユーザーを待ったりしないでください。

応答のスコープ: このフローの間は、ユーザーのメッセージを現在の質問への直接的な回答としてのみ扱ってください。ワークフローが完了するまで、ウェブ検索をしたり、コンテキストを変更したり、ユーザーの入力に基づいて無関係な操作を行ったりしないでください。

トーン: 簡潔かつ忍耐強く — 質問を一つし、回答を待ってから次に進んでください。応答は現在のステップに集中させてください。

状態のトラッキング: 会話全体を通じて収集した要件を追跡してください。「適用前の確認」ステップに入るときは、すべての重要な決定事項（フラグキー、プロンプトテキスト、UI スタイル、配置）を再度述べて、何も失われていないことを確認してください。

ステップ 0: ユーザーを歓迎する

質問を始める前に、このイントロメッセージをユーザーに提示してください（文言は多少調整してもかまいませんが、構造は維持してください）:

定性フィードバックのセットアップ

いくつかの短いステップで、アプリにフィードバックウィジェットを追加するお手伝いをします:

1. セットアップの検証 — SDK、フレームワーク、デザインシステムを確認します。
2. 要件の収集 — フラグ、プロンプトテキスト、スタイル、配置についていくつか質問します。
3. フラグの検証 — LaunchDarkly でフラグを確認または作成します。
4. 計画の確認 — これから構築する内容を要約し、承認を求めます。
5. コードの生成 — プロジェクトのパターンに合わせたフィードバックユーティリティとウィジェットを作成します。
6. 検証 — すべてがビルドされ、正しく接続されていることを確認します。

さっそく始めましょう！

その後、すぐにステップ 1 に進んでください。

ステップ 1: SDK を検証し、コードベースを調査する

要件を収集する前に、このプロジェクトが定性フィードバックをサポートできることを検証してください。以下のチェックを順番に実行します — それぞれがゲートになります。

チェック 1/4: LD SDK は導入されていますか？

LaunchDarkly SDK のインポートを検索します：

• launchdarkly-js-client-sdk — バニラ JS/TS クライアント SDK（v3.x）
• @launchdarkly/js-client-sdk — バニラ JS/TS クライアント SDK（v4.x、スコープ付きパッケージに名称変更）
• @launchdarkly/react-sdk — React Web SDK（現行。フックとプロバイダーを提供）
• launchdarkly-react-client-sdk — 旧 React Web SDK パッケージ名（@launchdarkly/react-sdk に名称変更）

あわせて SDK の初期化（v3.x では initialize(、v4.x では createClient(/start(、さらに React プロバイダーのシグナルである <LDProvider、asyncWithLDProvider、createLDReactProvider）も検索します。見つからない場合は、LDClient がどこで初期化されているか、またはどこからアクセスできるかをユーザーに尋ねてください。

• LD SDK がまったく見つからない場合 → 定性フィードバックには LaunchDarkly クライアントサイド SDK のインストールと初期化が必要であることをユーザーに伝えます → STOP。続行しないでください。
• 見つかった場合 → チェック 2 に進みます。

チェック 2/4: クライアントサイド SDK ですか？

定性フィードバックはクライアントサイド専用の機能です。チェック 1 で見つかった SDK がクライアントサイド SDK であることを確認します。完全な一覧については references/client-side-sdk-list.md と references/server-side-sdk-list.md を参照してください。

SDK がサーバーサイド専用で、クライアント SDK が存在しない場合 → 定性フィードバックにはクライアントサイド SDK が必要であり、サーバーコードからは送信できないことを説明します → STOP。続行しないでください。

不明な場合は、続行する前に、その SDK がクライアントサイドかサーバーサイドかをユーザーに尋ねてください。

チェック 3/4: SDK のバージョンは互換性がありますか？

package.json で正確なバージョンを確認します。$ld:feedback イベントには JavaScript/React SDK の v3.0 以降が必要です。

• バージョンが 3.0 未満の場合 → フィードバックを追加する前にアップグレードが必要であることをユーザーに伝えます → STOP。続行しないでください。
• バージョンが 3.0 以上の場合 → チェック 4 に進みます。

チェック 4/4: フィードバックはすでに設定されていますか？

$ld:feedback、sendFeedback、FeedbackPopover、Give feedback を検索して、既存のフィードバック統合があるか確認します。

• client.track('$ld:feedback', ...) を呼び出す sendFeedback 関数が存在する場合 → それを再利用します。そのインポートパスを記録してください。ステップ 5 はスキップされます。ステップ 2 に進みます。
• フィードバックウィジェットは存在するが sendFeedback ユーティリティは存在しない場合 → 一貫性のためにそのウィジェットのパターンを記録してください。
• 何も見つからない場合 → 通常どおり続行します。

残りの調査

上記のチェックがすべて通過したら、残りのコンテキストを収集します:

1. SDK の初期化を見つけます。 以下を検索します:

   • launchdarkly-js-client-sdk (v3.x) の initialize(
   • @launchdarkly/js-client-sdk (v4.x) の createClient( / start(
   • React SDK の <LDProvider、asyncWithLDProvider、または createLDReactProvider
   • LDClient インスタンスへのアクセス方法 (直接参照、React コンテキスト、カスタムフックなど)

2. 可観測性を確認します。 @launchdarkly/observability と @launchdarkly/session-replay を検索します。存在する場合、フィードバックをセッションリプレイにリンクできます。

3. UI フレームワークとデザインシステムを検出します。

   シグナル	フレームワーク
   依存関係に react、react-dom	React
   依存関係に vue	Vue (バニラ JS パターンを Vue コンポーネントに適応させる)
   依存関係に @angular/core	Angular (バニラ JS パターンを Angular コンポーネントに適応させる)
   依存関係に svelte	Svelte (バニラ JS パターンを Svelte コンポーネントに適応させる)
   上記のいずれもなし	バニラ JS/TS

   次に、デザインシステムまたはコンポーネントライブラリを確認します:

   • @mui/material、@emotion/react → MUI
   • @chakra-ui/react → Chakra UI
   • antd → Ant Design
   • @radix-ui/* または @shadcn/* → Radix/shadcn
   • 依存関係に tailwindcss、または tailwind.config.* → Tailwind CSS
   • bootstrap または react-bootstrap → Bootstrap
   • カスタムデザインシステム → 共有プリミティブ (Button、Modal、Popover など) を含む components/ ディレクトリを探します

   デザインシステムが検出された場合は、インラインスタイルのテンプレートコンポーネントではなく、そのプリミティブ (Button、Popover、TextArea、IconButton) を使用してください。 references/ 内のテンプレートコンポーネントは出発点です — 常にプロジェクトの既存のパターンに合わせて適応させてください。

ステップ 2: 目標を理解する

停止してください。以下すべてに対する回答が得られるまで、ステップ 3 に進まないでください。 ユーザーのリクエストを確認してください。すでに質問に回答している場合は、再度尋ねる必要はありません。カバーされていない項目については、ユーザーに尋ね、続行する前に回答を待ってください。

一度に 1 つの質問だけをしてください。 ユーザーの回答を待ってから、次の質問をしてください。1 つのメッセージに複数の質問を並べないでください。選択肢を提示する場合は、AskUserQuestion を使用して、エージェントコンソールにインタラクティブなセレクターを表示してください。自由記述の質問 (プロンプトテキストなど) は、通常のテキストメッセージとして尋ねてください。

1. どの機能/フラグですか? フィードバックは常にフラグキーに紐づきます。コードベースで既存のフラグキーを検索し、発見したフラグを選択肢として (「新しいフラグを作成」オプションも加えて) AskUserQuestion を使用してください。フラグが見つからない場合は、テキストの質問として尋ねてください。
2. ユーザーにどのような質問をしますか? これは、フィードバックウィジェットに表示されるプロンプトテキストになります (例: 「この画面についてどう感じましたか?」や「これは期待どおりに動作しましたか?」)。自由記述の入力が必要なため、通常のテキストメッセージとして尋ねてください。
3. フィードバックの種類は何ですか? ヘッダーを「Type」とし、以下の選択肢を指定して AskUserQuestion を使用してください:
   • label: "Sentiment + text (Recommended)", description: "ポップオーバー内に、感情ボタンとコメント用のテキストエリアを表示"
   • label: "Sentiment only", description: "インラインのワンクリック感情ボタン — ポップオーバーなし、テキスト入力なし"
   • label: "Text only", description: "ポップオーバー内に文章フィードバック用のテキストエリアのみ、感情ボタンなし" ユーザーが「Sentiment + text」または「Sentiment only」を選択した場合は、ヘッダーを「Icons」とし、以下の選択肢を指定して AskUserQuestion で続けてください:
   • label: "Thumbs up / down", description: "2 つのボタン: ポジティブ / ネガティブ"
   • label: "Smiley faces", description: "3 つのボタン: ポジティブ / ニュートラル / ネガティブ"
4. フィードバックウィジェットはどこに配置すべきですか? 尋ねる前に、コードベースでページ、ルート、または主要コンポーネントを検索してください。次に、ヘッダーを「Placement」とし、このリポジトリに合った 2〜4 個の具体的な配置候補 (例: 「Simulator ページの結果見出しの隣」、「ページヘッダー内」、「メインコンテンツ領域の下」) を指定して AskUserQuestion を使用してください。ページレベルの配置を優先してください。ワークフロー固有の確認でない限り、小さなサブコンポーネントにフィードバックを埋め込まないでください。

ステップ 3: LaunchDarkly でフラグを確認する

get-flag を使用して、対象のフラグが存在し、クライアントサイドで使用するために設定されていることを確認してください。

• フラグが存在しない場合は、create-flag を使用してください (またはユーザーをフラグ作成スキルに誘導してください)。
• フラグが存在するが、クライアントサイド SDK の可用性が有効になっていない場合は、フラグの詳細設定セクションで有効にする必要があることをユーザーに伝えてください。
• フラグが作成または確認された場合は、ユーザーに LaunchDarkly ダッシュボード内のフラグへの直接リンクを提供してください。
• 任意で update-flag-settings を使用して feedback タグを追加してください。

ステップ 4：適用前に確認する

停止してください。ユーザーがプランを明示的に確認するまで、コードを書いてはいけません。 これは毎回適用されます。ユーザーが最初から詳細をすべて提示している場合、同じ会話で 2 つ目のフラグに対して再実行する場合、既存のユーティリティを再利用する場合も同様です。詳細なユーザーリクエストは、暗黙の承認とはみなされません。

予定している変更を未来形で要約します（例：「作成するファイル」「変更するファイル」）。まだコードは書かれていません。

• フラグキーと、既存か新規作成が必要か
• sendFeedback ユーティリティの配置場所、前のステップで作成したものを再利用するか、セッションリプレイに対応するか
• フィードバックウィジェットのコンポーネント名、UI スタイル、配置場所
• 作成または変更するファイル

次に、ヘッダーを「確認」とし、次の選択肢を含む AskUserQuestion を使用します。

• label：「問題ありません」、description：「説明したプランで進めます」
• label：「変更したい」、description：「作業を始める前に、プランの一部を調整したいです」

ユーザーが「変更したい」を選択した場合（または独自の入力を提示した場合）は、フィードバックに対応し、同じ確認プロンプトを使って更新したプランを再提示します。ユーザーが「問題ありません」を選択するまで、ステップ 5 に進んではいけません。

ステップ 5：sendFeedback 関数を追加する

チェック 4 で既存の sendFeedback 関数が見つかった場合、このステップ全体をスキップします。 そのチェックで記録したインポートパスを使用し、ステップ 6 に進みます。

これが統合の中心です。$ld:feedback トラッキングイベントを送信するユーティリティ関数を作成します。

references/sendFeedback.ts のテンプレートから始めます。JavaScript プロジェクトでは、型注釈を削除して適用します。

基本となる契約：

client.track('$ld:feedback', {
    feedback_answer: string,  // required — the user's written feedback
    flag_key: string,         // required — the flag this feedback is about
    sentiment: "positive" | "neutral" | "negative",  // defaults to "neutral"
    feedback_prompt: string,  // optional — the question shown to the user
    o11y_session_id: string,  // optional — links to session replay
    custom_properties: Record<string, any>,  // optional — extra metadata to attach to the feedback event
});
client.flush();

重要な判断事項：

• LDClient の型インポートは、プロジェクトの SDK バージョンに合わせます。v3.x では launchdarkly-js-client-sdk、v4.x では @launchdarkly/js-client-sdk を使用します。テンプレートでは launchdarkly-js-client-sdk からインポートしているため、プロジェクトが v4 の場合は更新してください。（client.track と client.flush の呼び出しはどちらも同じです。）
• プロジェクトに @launchdarkly/session-replay が含まれている場合は、LDRecord.getSession()?.sessionSecureID を使ってセッション ID を含めます。含まれていない場合は、テンプレートからセッションリプレイのインポートと o11y_session_id のロジックを削除します。
• プロジェクトで LD 関連のコードを管理している場所（既存のフラグヘルパーと同じ場所、lib/ や utils/ ディレクトリなど）にユーティリティを配置します。
• TypeScript を使用している場合は、LDFeedbackSentiment 型をエクスポートします。
• テンプレートの長さ制限を維持します。feedback_answer と feedback_prompt は MAX_FEEDBACK_LENGTH（4096 文字）で切り詰め、custom_properties はシリアライズ後に MAX_CUSTOM_PROPERTIES_LENGTH（4096 文字）を超える場合に削除します。入力中にユーザーが制限を確認できるよう、ウィジェットのテキスト入力に maxLength={MAX_FEEDBACK_LENGTH} を設定します。

検証： ファイルを作成した後、コードベースを検索して、ファイルが存在し、期待される内容が含まれていることを確認します。具体的には、client.track('$ld:feedback', ...) の後に client.flush() を呼び出す sendFeedback エクスポートがあることを確認します。見つからない場合は、先に修正してから進みます。

ステップ 6: フィードバックウィジェットを構築する

プロジェクトに既存のデザインシステムとコンポーネントパターンを使用して UI を構築します。

references/ 内の適切なテンプレートから始めます。JavaScript プロジェクトの場合は、型注釈を削除して調整します。

• 感情 + テキスト → PopoverFeedback.tsx を icons="thumbs" または icons="smileys" で使用
• テキストのみ → PopoverFeedback.tsx を icons="none" で使用
• 感情のみ → InlineFeedback.tsx を icons="thumbs" または icons="smileys" で使用

これらのテンプレートはインラインスタイルと SVG アイコンを使用しているため、CSS フレームワークやアイコンライブラリがなくても動作します。プロジェクトにデザインシステムがある場合は、テンプレートの要素をそのプリミティブに置き換えます:

テンプレートの要素	置き換え先
インラインの style={{...}}	プロジェクトの CSS アプローチ (Tailwind クラス、CSS モジュール、styled-components など)
<button>	デザインシステムの <Button> コンポーネント
位置指定された <div> ポップオーバー	デザインシステムの <Popover> または <Dropdown> コンポーネント
<textarea>	デザインシステムの <TextArea> または <Input> コンポーネント
インライン SVG アイコン	プロジェクトのアイコンライブラリ (Lucide、Heroicons、MUI icons など)

SVG アイコンでは必ず fill="currentColor" (ハードコードされた 16 進数の色ではなく) を使用して、親のテキスト色を継承するようにします。

PROMPT_TO_REPLACE に検索と置換を使用しないでください。 代わりに、prompt をコンポーネントの文字列プロパティにします。これにより、コードを重複させることなく、ウィジェットを複数のフラグにわたって再利用できるようになります。レンダリング時に、ステップ 2 で取得したユーザーのプロンプトテキストをプロパティとして渡します。

標準的な UX パターン (デザインシステムに関係なくこれに従います):

• 吹き出しアイコンと「フィードバックを送る」ラベルを備えたトリガーボタン (ポップオーバースタイルの場合)
• クリックで開くポップオーバー。以下を含みます:
  • プロンプトテキストをプレースホルダーとして持つテキストエリア
  • ステップ 2 で選択したスタイルに一致する感情コントロール:
    • 高評価 / 低評価 — 肯定/否定を切り替える 2 つのアイコンボタン
    • スマイリーフェイス尺度 — 肯定 (笑顔)、中立 (普通)、否定 (しかめ面) の 3 つのアイコンボタン
    • テキストのみ — 感情ボタンはなし。sendFeedback から sentiment フィールドを省略します
  • 送信ボタン
• 送信後: submitted 状態をトラッキングします。ウィジェットを「フィードバックをありがとうございます！」という確認メッセージに置き換えます。ポップオーバーを黙って閉じるだけにしないでください — ユーザーは自分のフィードバックが受け取られたことを知る必要があります。
• クイック高評価 / インラインスマイリー (ポップオーバーなし): インラインのプロンプトテキストと感情ボタン。テキスト入力なしで、クリックするとすぐにフィードバックを送信します。クリック後は、感謝のメッセージに置き換えます。

配置: ステップ 2 で選択した場所を使用します。同じ画面に複数のフィードバック入力ポイントを追加しないでください。

コンポーネントをターゲットに組み込む

ウィジェットを構築した後、ステップ 2 のターゲットの場所に追加します:

1. ターゲットファイルを見つけます。 コードベースで、ステップ 2 で選択した配置に一致するページまたはコンポーネントを検索します。見つけたファイルパスを提示し、変更する前にそれが正しいかどうかをユーザーに確認します。違うと言われた場合は、明確化を求めて再試行します。
2. インポートしてレンダリングします。 確認されたターゲットファイルにフィードバックコンポーネントをインポートします。それをレンダリングし、必要なプロパティ (flagKey 文字列と prompt 文字列) を渡します。React SDK プロジェクトの場合、コンポーネントは ldClient をプロパティとして受け取るのではなく、内部的に useLDClient() フックを使用する必要があります。
3. 検証: ターゲットコンポーネントを検索して、必要なプロパティ (flagKey、prompt) を指定してフィードバックコンポーネントをインポートしレンダリングしていることを確認します。インポートまたはレンダリングが欠けている場合は、続行する前に修正します。

フレームワーク固有のアプローチ

React — テンプレートから始めて、上記の表を使ってプロジェクトのデザインシステムに適応させます。

Vanilla JS/TS — DOM 要素を sendFeedback 関数に接続します：

submitButton.addEventListener('click', () => {
    sendFeedback(client, flagKey, feedbackInput.value, selectedSentiment, promptText);
});

Vue / Angular / Svelte — React コンポーネントのパターンをフレームワークのイディオムに変換します。sendFeedback 関数はフレームワークに依存しません。変わるのは UI ラッパーだけです。

ステップ 7: 検証

事前条件の確認: 検証する前に、すべての先行ステップが期待どおりの出力を生成したことを確認します：

• (a) sendFeedback ユーティリティファイルが存在する（またはチェック 4 で既存のものが再利用された）。
• (b) フィードバックウィジェットのコンポーネントファイルが存在する。
• (c) ウィジェットがターゲットの場所にインポートされ、必要な props とともにレンダリングされている。

いずれかが欠けている場合は、先に進む前に関連するステップに戻って完了させてください。

ユーザーを検証の手順に沿って一つずつ案内します：

1. ビルドを実行します。 プロジェクトのビルドまたは lint コマンドを実行してください。失敗した場合は、続行する前にエラーを修正してください。
2. アプリをローカルで起動します。 ユーザーに開発サーバーを実行するよう依頼します（可能であればご自身で実行してもかまいません）。エラーなく起動することを確認してください。
3. フィードバックの場所に移動します。 ウィジェットを配置したページを開くようユーザーに伝えます。「フィードバックを送る」ボタン（またはインラインのサムズアップ／サムズダウン）が表示され、正しくスタイル設定されていることを確認してもらいます。
4. テストフィードバックを送信します。 ユーザーを次のように案内します：トリガーをクリック → テストテキストを入力 → 感情を選択 → 送信をクリック。ブラウザのネットワークタブを開き、$ld:feedback を含む POST が LaunchDarkly のイベントエンドポイントに送信されたことを確認してもらいます。
5. ダッシュボードを確認します。 LaunchDarkly ダッシュボードのフラグの Feedback タブへの直接リンクを提供します。約 1 分待ってから更新するようユーザーに伝えます — テストフィードバックが表示されるはずです。
6. セッションリプレイ（該当する場合）。 @launchdarkly/session-replay が設定されている場合は、ダッシュボードのフィードバックエントリの横に Replay ボタンがあるか確認するようユーザーに依頼します。

すべてが動作することをユーザーが確認したら、次の点を伝えます：

• Slack チャンネルを購読してフィードバック通知を受け取ることができます：フラグの Feedback タブ → Subscribe → Slack チャンネルを選択（LaunchDarkly Slack アプリが必要です）。
• フラグの Feedback タブへの直接リンクを提供し、監視用にブックマークできるようにします。

エッジケース

状況	対応
LD SDK が見つからない	停止 — チェック 1 で処理されます
サーバー側 SDK のみで、クライアント SDK がない	停止 — チェック 2 で処理されます
SDK バージョン < 3.0	停止 — チェック 3 で処理されます
既存の sendFeedback 関数が見つかった	それを再利用し、ステップ 5 をスキップ — チェック 4 で処理されます
React SDK（@launchdarkly/react-sdk / launchdarkly-react-client-sdk）	直接参照ではなく useLDClient() フックを介してクライアントにアクセスします
フラグにクライアント側の可用性がない	ユーザーがフラグの詳細設定で有効にする必要があります
オブザーバビリティがインストールされていない	o11y_session_id フィールドをスキップします。セッションリプレイは利用できません
デザインシステムが検出されない	最小限のインラインスタイルを適用したテンプレートコンポーネントを出発点として使用します
複数のフラグにフィードバックが必要	フラグごとに個別の sendFeedback 呼び出しを作成します。各ウィジェットは 1 つのフラグキーを対象とします

やってはいけないこと

• スタイル未適用のテンプレートコンポーネントを本番環境にリリースしないでください — 常にプロジェクトのデザインシステムに適応させてください。
• 同じ画面に複数のフィードバックウィジェットを追加しないでください。
• client.track() の後に client.flush() を呼び出すのを忘れないでください。
• フラグキーをハードコードしないでください — プロジェクトの既存の定数／設定パターンを使ってフラグキーを扱ってください。
• サーバー側のコードからフィードバックを送信しないでください — これはクライアント側専用の機能です。

テンプレート

コードテンプレートは SDK リストと並んで references/ にあります：

ファイル	説明
sendFeedback.ts	$ld:feedback トラッキングイベントを送信するユーティリティ。セッションリプレイをサポートします
PopoverFeedback.tsx	テキストエリア + 設定可能なセンチメントアイコン（icons="thumbs" / "smileys" / "none"）を備えたポップオーバー
InlineFeedback.tsx	インラインのワンクリックセンチメントボタン（icons="thumbs" / "smileys"）

すべてのテンプレートは TypeScript です — JavaScript プロジェクトの場合は、型アノテーションを削除して適応させてください。テンプレートにはインライン SVG アイコンが含まれており、外部のアイコンライブラリなしで動作します。プロジェクトのデザインシステムに合わせて適応させ、ユーザーのプロンプトテキストを prop として渡してください。

参考資料

• 公式ドキュメント: ユーザーフィードバック SDK
• 公式ドキュメント: フィードバックの表示
• チュートリアル: ユーザーフィードバックの収集

フローの例

以下は、一般的なシナリオでデシジョンツリーがどのように展開するかを示しています。

ハッピーパス — React + TypeScript、新しいフラグ、thumbs ポップオーバー： ステップ 0 → ようこそ。ステップ 1 → @launchdarkly/react-sdk、React + Tailwind を検出、既存のフィードバックなし。ステップ 2 → ユーザーが新しいフラグ checkout-redesign、プロンプト「How do you feel about the new checkout?」、thumbs スタイル、注文サマリーの下に配置することを選択。ステップ 3 → create-flag でフラグを作成。ステップ 4 → ユーザーが承認。ステップ 5 → lib/ld/ に sendFeedback.ts を作成。ステップ 6 → Tailwind に適応させた FeedbackPopover.tsx を作成し、useLDClient() を使って CheckoutPage.tsx に組み込みます。ステップ 7 → ビルドが通り、イベントが発火します。

既存の sendFeedback — 再利用してスキップ： ステップ 1 → チェック 4 で、src/utils/sendFeedback.ts がすでに client.track('$ld:feedback', ...) を呼び出していることを検出。インポートパスを記録します。ステップ 2 → 通常どおり要件を収集。ステップ 3〜4 → いつもどおり。ステップ 5 → スキップ（既存の関数を再利用）。ステップ 6 → ウィジェットを構築し、既存のパスから sendFeedback をインポート。ステップ 7 → ビルドが通り、イベントが発火します。

サーバーサイド SDK — 早期 STOP： ステップ 1 → チェック 1 で @launchdarkly/node-server-sdk を検出。チェック 2 → それは server-side-sdk-list.md にあり、クライアント SDK は存在しない。→ 定性フィードバックにはクライアントサイド SDK が必要であることをユーザーに伝えます。STOP.

デザインシステムなし — 最小限のスタイル： ステップ 1 → launchdarkly-js-client-sdk v3.2 を検出、React なし、Tailwind なし、コンポーネントライブラリなし。ステップ 6 → インラインスタイルのテンプレートをベースラインとして使用し、プロジェクトのバニラ JS パターンと既存の CSS 規約に適応させます。