launchdarkly-flag-qualitative-feedback-setup

Files (8)

• README.md
• SKILL.md
• marketplace.json
• InlineFeedback.tsx · references/
• PopoverFeedback.tsx · references/
• client-side-sdk-list.md · references/
• sendFeedback.ts · references/
• server-side-sdk-list.md · references/

SKILL.md (first lines)

# LaunchDarkly Qualitative Feedback

You're using a skill that will guide you through adding qualitative user feedback collection to a codebase. Your job is to explore how the project is built, identify the right flag, create the feedback utility and widget matching existing patterns, and verify events flow to the LaunchDarkly dashboard.

**This is a step-by-step wizard.** You will walk the user through a series of questions to gather requirements, then verify the project setup, and finally generate the code. Ask questions one at a time and wait for each answer before continuing. Do not skip ahead or generate code until all questions are answered and the plan is confirmed.

Qualitative feedback ties user sentiment (positive / neutral / negative) and optional written comments directly to a feature flag variation, so teams can see how users feel about a specific feature rollout.

**Availability:** JavaScript SDK v3.0+ (client-side only). React components are provided for convenience.

## Prerequisites

This skill requires the remotely hosted LaunchDarkly MCP server to be configured in your environment.

**Required MCP tools:**
- `get-flag` — verify the target flag exists and check its configuration

**Optional MCP tools (enhance workflow):**
- `create-flag` — create a new flag if one doesn't exist yet
- `list-flags` — browse existing flags to find the right one to attach feedback to
- `update-flag-settings` — update flag metadata (e.g., add a `feedback` tag)

## Core Principles

1. **Design system first**: Never ship the unstyled template component to production. Detect the project's design system and use its primitives.
2. **One entry point per screen**: Multiple feedback widgets on the same page create noise and reduce response quality.
3. **The `sendFeedback` function is the integration**: The UI is customizable; the `$ld:feedback` tracking event contract is what matters.

## Workflow

**Progression rule:** When a step is complete, continue to the next step by default. Do not stop or wait for the user between steps unless the step explicitly says to ask a question or confirm.

**Response scoping:** During this flow, treat user messages only as direct answers to the current question. Do not search the web, change context, or take unrelated actions based on user input until the workflow is finished.

**Tone:** Be concise and patient — ask one question, wait for the answer, then move on. Keep responses focused on the current step.

**State tracking:** Track gathered requirements across the conversation. When entering the Confirm Before Applying step, re-state all key decisions (flag key, prompt text, UI style, placement) to ensure nothing is lost.

### Step 0: Welcome the User

Before asking any questions, present this intro message to the user (you may lightly adapt the wording, but keep the structure):

> **Qualitative Feedback Setup**
>
> I'll walk you through adding a feedback widget to your app in a few short steps:
>
> 1. **Verify your setup** — I'll check your SDK, framework, and design system.
> 2. **Gather requirements** — I'll ask a few questions about the flag, prompt text, style, and placement.
> 3. **Verify the flag** — I'll confirm or create the flag in LaunchDarkly.
> 4. **Confirm the plan** — I'll summarize what I'm going to build and ask for your approval.
> 5. **Generate the code** — I'll create the feedback utility and widget matching your project's patterns.
> 6. **Verify** — I'll make sure everything builds and is wired up correctly.
>
> Let's get started!

Then proceed immediately to Step 1.

### Step 1: Verify the SDK and Explore the Codebase

Before gathering requirements, verify that this project can support qualitative feedback. Run these checks in order — each is a gate.

#### Check 1/4: Is the LD SDK present?

Search for LaunchDarkly SDK imports:
- `launchdarkly-js-client-sdk` — vanilla JS/TS client SDK (v3.x)
- `@launchdarkly/js-client-sdk` — vanilla JS/TS client SDK (v4.x, renamed scoped package)
- `@launchdarkly/react-sdk` — React Web SDK (current; provides hooks and providers)
- `launchdarkly-react-client-sdk` — older React Web SDK package name (renamed to `@launchdarkly/react-sdk`)

Also search for SDK initialization (`initialize(` for v3.x, or `createClient(`/`start(` for v4.x, plus React provider signals `<LDProvider`, `asyncWithLDProvider`, or `createLDReactProvider`). If not found, ask the user where LDClient is initialized or accessible.

- If **no LD SDK is found at all** → inform the user that qualitative feedback requires a LaunchDarkly client-side SDK to be installed and initialized → **STOP. Do not proceed.**
- If found → continue to Check 2.

#### Check 2/4: Is it a client-side SDK?

Qualitative feedback is a **client-side only** feature. Verify the SDK found in Check 1 is a client-side SDK. Refer to [references/client-side-sdk-list.md](references/client-side-sdk-list.md) and [references/server-side-sdk-list.md](references/server-side-sdk-list.md) for the complete lists.

If the SDK is **server-side only** with no client SDK present → explain that qualitative feedback requires a client-side SDK and cannot be sent from server code → **STOP. Do not proceed.**

If unclear, ask the user whether their SDK is client-side or server-side before continuing.

#### Check 3/4: Is the SDK version compatible?

Check `package.json` for the exact version. The `$ld:feedback` event requires **v3.0+** of the JavaScript/React SDK.

- If version **< 3.0** → inform the user they need to upgrade before feedback can be added → **STOP. Do not proceed.**
- If version **>= 3.0** → continue to Check 4.

#### Check 4/4: Is feedback already configured?

Search for `$ld:feedback`, `sendFeedback`, `FeedbackPopover`, or `Give feedback` to check for existing feedback integration.

- If a **`sendFeedback` function exists** that calls `client.track('$ld:feedback', ...)` → **reuse it**. Record its import path — Step 5 will be skipped. Continue to Step 2.
- If a **feedback widget exists** but not the `sendFeedback` utility → note the widget pattern for consistency.
- If **nothing found** → continue normally.

#### Remaining exploration

After the checks above pass, gather the remaining context:

1. **Find the SDK initialization.** Search for:
   - `initialize(` from `launchdarkly-js-client-sdk` (v3.x)
   - `createClient(` / `start(` from `@launchdarkly/js-client-sdk` (v4.x)
   - `<LDProvider`, `asyncWithLDProvider`, or `createLDReactProvider` from the React SDK
   - How the `LDClient` instance is accessed (direct reference, React context, custom hook, etc.)

2. **Check for observability.** Search for `@launchdarkly/observability` and `@launchdarkly/session-replay`. If present, feedback can be linked to session replays.

3. **Detect the UI framework and design system.**

   | Signal | Framework |
   |--------|-----------|
   | `react`, `react-dom` in deps | React |
   | `vue` in deps | Vue (adapt vanilla JS pattern to Vue component) |
   | `@angular/core` in deps | Angular (adapt vanilla JS pattern to Angular component) |
   | `svelte` in deps | Svelte (adapt vanilla JS pattern to Svelte component) |
   | None of the above | Vanilla JS/TS |

From launchdarkly/ai-tooling, Apache-2.0.

More from launchdarkly/ai-tooling