FeedbackBasket Skill

---
name: feedbackbasket
description: Integrate FeedbackBasket feedback or waitlist capture into web and mobile apps and query user feedback via MCP. Use when the user asks to add a web feedback widget, collect waitlist signups, add mobile or iOS feedback, install the FeedbackBasket Swift SDK, set up FeedbackBasket, or work with feedback data from their FeedbackBasket projects.
---

# FeedbackBasket Integration

## Overview

FeedbackBasket is a feedback collection platform with an embeddable widget, AI-powered analysis, and MCP data access. This skill helps you:

1. Add the feedback widget to any web app
2. Add native Swift feedback or a hosted form to a mobile app
3. Switch between feedback and waitlist capture and customize settings through the FeedbackBasket CLI
4. Set up MCP to query feedback data from the IDE
5. Act on feedback — triage bugs, plan features, fix issues

## CLI Authentication

Authenticate before running CLI-backed setup or management commands:

```bash
feedbackbasket login                   # Browser authorization
feedbackbasket login --manual          # Remote/headless flow without a localhost callback
feedbackbasket login --token <TOKEN>   # Existing CLI token for CI or headless environments
feedbackbasket auth status
```

CLI tokens begin with `fb_cli_` and are private administrative credentials. Never write one into application code, generated configuration, logs, or final responses. MCP keys begin with `fb_key_` and are also private; neither credential can replace an `fb_mobile_` publishable mobile project key.

## Mobile App Integration

### Resolve the Mobile Project

Resolve the FeedbackBasket project for the current app before making changes. Run `feedbackbasket projects list --agent` and match a clearly corresponding project name or product URL. If multiple projects are plausible, ask the user which one to use. If none exists, confirm a real product, support, marketing, or App Store URL before creating one; never invent a public URL or use a local development address.

Inspect the app and find its bundle ID when it has one, then enable mobile feedback additively:

```bash
feedbackbasket mobile setup <project> --bundle-id com.example.app --include-publishable-key --agent
```

The command returns the Swift package details, hosted feedback form URL, and an `fb_mobile_` publishable project key. That value is a write-only identifier designed to ship in an app; it cannot read feedback or administer the project. It is masked unless `--include-publishable-key` is explicitly supplied. Use that flag only while performing a setup the user authorized, and never repeat the full value in the final response.

Never substitute or expose an `fb_cli_` CLI token or `fb_key_` MCP/API key. Those are private credentials and must not appear in app source, build settings, prompts, logs, generated configuration, or final responses.

### Choose the Integration

- For SwiftUI apps targeting iOS 16 or later, add the public FeedbackBasket Swift package and use the native feedback sheet.
- For UIKit, use the same package programmatic API, host FeedbackBasketSheet with UIHostingController, or use the hosted form when it better matches the app.
- For React Native, Flutter, or other mobile stacks, open the supplied hosted form using the app's existing in-app browser when available, otherwise use the platform browser.
- Fall back from the native SDK only when package resolution or platform compatibility requires it.

### Install and Configure Swift

Package repository:

https://github.com/deifos/feedbackbasket-swift.git

Use version 0.3.0 or the latest tagged stable release. Add the FeedbackBasket product to the main iOS application target, then configure it once during application startup:

~~~swift
import FeedbackBasket

FeedbackBasket.configure(
    projectKey: "fb_mobile_your_project_key"
)
~~~

Present the standard SwiftUI sheet from an appropriate Settings, Help, or Support screen:

~~~swift
@State private var showingFeedback = false

Button("Send feedback") {
    showingFeedback = true
}
.feedbackBasketSheet(
    isPresented: $showingFeedback,
    context: ["screen": "Settings"]
)
~~~

The standard sheet's optional email field is permitted. If the app already has an authenticated user, pass only their existing stable ID and email with FeedbackBasketUser. Do not invent identity information or add personal-information fields. If no user is authenticated, leave email optional and let the person decide whether to provide it.

The native SDK automatically stores each submission's conversation credential in the app Keychain, shows an unread badge when the team replies, and keeps team and user messages in one thread. When mobile conversations are enabled, users answer inside that thread; never create a new feedback submission for a follow-up. Reply state refreshes when the SDK is configured, when the app enters the foreground, and when the sheet opens. This is not an APNs push notification while the app is closed. Do not build a separate inbox, polling client, or token store in the host app. Hosted-form integrations remain email-only.

Only attach non-sensitive context such as the current screen or feature. Never send passwords, authentication tokens, payment information, private form contents, or secrets.

### Privacy and Verification

The SDK automatically adds app version, build, bundle ID, iOS version, device family, locale, and SDK version to feedback when available. Configuration schedules a heartbeat at most once every 24 hours with app/bundle metadata and a random Keychain-backed installation identifier. It stores the last successful heartbeat time in app-only UserDefaults.

The package includes its own Apple privacy manifest. Still remind the user to review the host app's privacy policy, App Store privacy answers, and any extra user or context data the host supplies.

Treat a supplied project key as production unless the user explicitly confirms it is for testing. Without an approved staging key and base URL, verify package resolution, compilation, automated tests, and opening the form, but do not submit test feedback.

After building and launching a native integration, verify the SDK connection without submitting feedback:

```bash
feedbackbasket mobile verify <project> --bundle-id com.example.app --wait 120 --agent
```

When the user wants mobile users to answer team replies in the original conversation, enable that project setting explicitly:

```bash
feedbackbasket mobile conversations <project> --enable --agent
feedbackbasket mobile conversations <project> --disable --agent
```

A prior matching heartbeat is a valid result because the SDK throttles successful heartbeat attempts. Mobile setup adds bundle IDs without replacing existing entries. Do not run `mobile disable` or `mobile rotate-key` unless the user explicitly requests and confirms the disruptive action; rotation stops all released builds using the previous key.

## Widget Integration

### Step 1: Resolve the FeedbackBasket Project

The user needs a FeedbackBasket account and project. Direct them to:
- Sign up: https://feedbackbasket.com
- Create a project in the dashboard if one does not already exist for this app
- Copy the project ID from the widget settings page, or use the CLI project name directly

When installing or configuring a widget for the current app, resolve the FeedbackBasket project for this app before changing widget settings or embed code. Do not use the CLI default project just because one is configured.

1. Identify the current app's real website URL or intended public URL from the user, app config, docs, or an existing FeedbackBasket embed.
2. Run `feedbackbasket projects list --agent` and look for an existing project whose `url` matches that site or whose name clearly matches the current app.
3. If exactly one project matches, use that project ID/name for `widget settings`, `widget script`, and feedback commands.
4. If multiple projects could match, ask the user which one to use.
5. If no project matches, ask whether to create a new project for this app, then create it with the confirmed real URL.

### Project Setup Decisions

When creating or configuring a FeedbackBasket project for the user, confirm the real website URL before running `feedbackbasket projects create`.

- Never use `localhost`, `127.0.0.1`, `0.0.0.0`, `::1`, or a local dev server URL as the project website URL unless the user explicitly says this project is only for local testing.
- If the repo only exposes a local URL, ask the user for the production, staging, preview, or intended public website URL.
- If the user has not chosen yet, pause project creation and say that FeedbackBasket needs the website URL to associate feedback with the right site.
- Do not guess a tunnel, preview, or production domain from unrelated package names, git remotes, or environment variable names.

Choose the capture experience before configuring the project:

- If the user explicitly asks for feedback, a feedback bubble, bug reports, or feature requests, use `--capture-mode feedback`.
- If the user explicitly asks for a waitlist, launch list, early-access signup, or email capture, use `--capture-mode waitlist`.
- If the user asks to "set up FeedbackBasket" without choosing, explain the two options and ask whether they want a feedback bubble or a waitlist form.
- Do not switch an existing project between modes unless the user asks or confirms; only one capture mode is active at a time.

Use the basic widget experience by default:

- Default display mode is `modal`.
- Default feedback flow is basic, with guided feedback disabled.
- Do not pass `--guided` or enable `widget flow` unless the user asks for a guided flow or explicitly chooses it.
- If the user wants customization, ask whether they prefer `modal` or `popup`, and whether they want `basic` or `guided` feedback. If they do not care, keep `modal` and basic feedback.

### Step 2: Detect the Framework

Check the project for framework indicators:
- `next.config.ts` or `next.config.js` → **Next.js**
- `vite.config.ts` → **Vite / React SPA**
- `package.json` with `react` dep but no Next/Vite → **Create React App / other React**
- `index.html` only → **Plain HTML**

### Step 3: Add the Widget

#### Next.js (App Router)

Create `components/feedback-widget.tsx`:

```tsx
import Script from 'next/script'

export function FeedbackWidget() {
  return (
    <>
      <Script id="feedback-basket-config" strategy="lazyOnload">
        {\`window.__feedbackBasket = {
          projectId: "YOUR_PROJECT_ID",
          apiEndpoint: "https://feedbackbasket.com/api/widget/feedback",
        };\`}
      </Script>
      <Script
        src="https://feedbackbasket.com/widget/feedback-widget.js"
        strategy="lazyOnload"
      />
    </>
  )
}
```

Then add to `app/layout.tsx`:

```tsx
import { FeedbackWidget } from '@/components/feedback-widget'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackWidget />
      </body>
    </html>
  )
}
```

#### Vite / React SPA

Create `src/components/FeedbackWidget.tsx`:

```tsx
import { useEffect } from 'react'

export function FeedbackWidget() {
  useEffect(() => {
    (window as any).__feedbackBasket = {
      projectId: "YOUR_PROJECT_ID",
      apiEndpoint: "https://feedbackbasket.com/api/widget/feedback",
      buttonColor: "#c4441a",
      buttonRadius: 8,
      buttonLabel: "Feedback",
    }

    const script = document.createElement('script')
    script.src = "https://feedbackbasket.com/widget/feedback-widget.js"
    script.async = true
    document.body.appendChild(script)

    return () => { document.body.removeChild(script) }
  }, [])

  return null
}
```

Add to `App.tsx` or `main.tsx`:

```tsx
import { FeedbackWidget } from './components/FeedbackWidget'

// Add at the end of your app root
<FeedbackWidget />
```

#### Plain HTML

Add before the closing `</body>` tag:

```html
<script>
  window.__feedbackBasket = {
    projectId: "YOUR_PROJECT_ID",
    apiEndpoint: "https://feedbackbasket.com/api/widget/feedback",
  };
</script>
<script src="https://feedbackbasket.com/widget/feedback-widget.js" async></script>
```

#### Custom Inline Trigger

When the project uses inline trigger mode, add the widget script once and call the public API from the host app's own button:

```html
<button onclick="window.FeedbackWidget.openFeedbackForm({ trigger: event.currentTarget })">
  Feedback
</button>
```

In React:

```tsx
<button onClick={(event) => window.FeedbackWidget.openFeedbackForm({ trigger: event.currentTarget })}>
  Feedback
</button>
```

Passing the trigger element lets popup mode open beside the custom button. Calling `window.FeedbackWidget.openFeedbackForm()` with no arguments still uses the configured widget position.

Use only the public `openFeedbackForm()` API from the snippet. Do not call internal or undocumented methods such as `open()`, `openModal()`, or direct modal element manipulation; those can exist in the widget bundle but are not stable integration points.

### Note on Configuration

All widget settings (colors, position, messages, branding, etc.) are managed from the FeedbackBasket dashboard at https://feedbackbasket.com. The embed code only needs the `projectId` and `apiEndpoint` — the widget script loads the saved configuration automatically from the server.

If the user wants to customize the widget, direct them to: Dashboard → Project → Widget Settings.

Agents can also configure the widget with the FeedbackBasket CLI:

```bash
feedbackbasket widget settings <project>
feedbackbasket widget settings <project> --capture-mode waitlist
feedbackbasket widget settings <project> --capture-mode feedback
feedbackbasket widget settings <project> --color "#22c55e" --label "Feedback"
feedbackbasket widget settings <project> --position bottom-left --display modal
feedbackbasket widget settings <project> --show-email --allow-attachments
feedbackbasket widget settings <project> --allow-visitor-replies
feedbackbasket widget settings <project> --no-allow-visitor-replies
feedbackbasket widget settings <project> --email-read-only --hide-email-when-prefilled
feedbackbasket widget settings <project> --error-tracking --allow-console-errors
feedbackbasket widget flow <project> --reset-default --enable  # only when the user chooses guided feedback
feedbackbasket widget flow <project> --config ./feedback-flow.json
feedbackbasket widget script <project>
feedbackbasket waitlist list <project> --search "@example.com" --agent
feedbackbasket waitlist export <project>
```

When the user chooses waitlist mode, keep the same project script installed and annotate the app's own form. The script handles submission without replacing the form's design:

```html
<form data-feedbackbasket-waitlist>
  <input name="name" autocomplete="name">
  <input name="email" type="email" autocomplete="email" required>
  <button type="submit">Join the waitlist</button>
</form>
```

Email is required and name is optional. Use the form's `data-feedbackbasket-state` value (`loading`, `success`, or `error`) for custom UI, or listen for `feedbackbasket:waitlist:success` and `feedbackbasket:waitlist:error` events. Do not add a separate submit handler.

Use `waitlist list --agent` to fetch signup emails, names, source pages, totals, capture mode, and pagination. Use `--search`, `--limit`, and `--offset` when needed. Use `waitlist export` for the same CSV export available in the dashboard.

`userEmail` and `metadata` are runtime-only values passed by the host app:

```html
<script>
  window.__feedbackBasket = {
    projectId: "YOUR_PROJECT_ID",
    apiEndpoint: "https://feedbackbasket.com/api/widget/feedback",
    userEmail: currentUser.email,
    metadata: {
      userId: currentUser.id,
      plan: currentUser.plan
    }
  };
</script>
```

`email-read-only` and `hide-email-when-prefilled` are saved widget settings that only affect forms when `userEmail` is provided. Do not store visitor emails in widget settings.

`widget flow` controls guided feedback types and optional follow-up questions. Use it when the user wants a wizard with choices like Bug report, Feature request, and General feedback. Supported v1 question types are `text`, `textarea`, and `single_choice`.

Example `feedback-flow.json`:

```json
{
  "enabled": true,
  "mode": "guided",
  "types": [
    {
      "id": "bug",
      "emoji": "🐞",
      "label": "Bug report",
      "description": "Something is broken or not working",
      "questions": [
        {
          "id": "steps",
          "label": "What steps can reproduce it?",
          "type": "textarea"
        }
      ]
    }
  ]
}
```

## MCP Setup

### 1. Generate an API Key

Direct the user to: https://feedbackbasket.com/dashboard/settings → MCP API Keys → New API Key

### 2. Connect MCP

Run in the terminal:

```bash
claude mcp add feedbackbasket -- npx -y feedbackbasket-mcp-server@latest --api-key fb_key_YOUR_KEY
```

Or for Cursor/Windsurf, add to `.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "feedbackbasket": {
      "command": "npx",
      "args": ["-y", "feedbackbasket-mcp-server@latest", "--api-key", "fb_key_YOUR_KEY"]
    }
  }
}
```

### Available MCP Tools

Once connected, these tools are available:

- **list_projects** — List all projects with feedback stats
- **get_feedback** — Query feedback with filters (category, status, sentiment, search)
- **get_bug_reports** — Get bugs with severity classification
- **search_feedback** — Full-text search across feedback

## Acting on Feedback

### Capture Feedback from the Terminal

When the user wants to record a new bug, feature request, or general feedback without opening the dashboard, use the CLI:

```bash
feedbackbasket feedback create "Login button is broken" \
  --content "Clicking Log in does nothing in Safari." \
  --project myapp \
  --type bug \
  --page-url https://example.com/login \
  --metadata source=agent \
  --agent
```

`--agent` returns the created feedback ID, dashboard URL, and feedback object. Created feedback is analyzed by AI and follows the project's notification settings.

### File Agent-Found Issues

When the user says "file this in FeedbackBasket", "log this bug", "create feedback for this issue", "add this to FeedbackBasket", or similar, create a concise feedback item for the issue the agent found.

Before creating the item, resolve the target project:

1. If the user explicitly names a FeedbackBasket project, use that project.
2. If the current repo/app clearly matches exactly one FeedbackBasket project name or project URL from `feedbackbasket projects list --agent`, use that project.
3. If the CLI default project clearly matches the current repo/app, use it.
4. If multiple projects are plausible, ask the user which FeedbackBasket project to file it under.
5. Do not silently guess the project when it is ambiguous.

Keep agent-filed feedback short and dashboard-friendly:

- Title: under 80 characters, action-oriented, no stack traces.
- Content: 1 to 3 short paragraphs, ideally under 600 characters, focused on the user-visible problem, expected behavior, and actual behavior.
- Do not paste long logs, full reasoning chains, or broad investigation notes into the body.
- Put structured context in metadata: `source=agent`, `found_by=<agent>`, `repo=<name>`, `branch=<branch>`, `route=<path>`, `file=<path>`, `severity=<low|medium|high>`, `test=<command>`.

```bash
feedbackbasket feedback create "<short title>" \
  --content "<brief user-visible issue description>" \
  --project <project-name-or-id> \
  --type bug \
  --metadata source=agent \
  --metadata found_by=codex \
  --agent
```

After creation, report the feedback ID and dashboard URL to the user.

### Triage Bugs

When the user asks to review bugs:
1. Call `get_bug_reports` with `severity: "high"` and `status: "OPEN"`
2. Present each bug with its AI summary, priority score, and page URL
3. Suggest which to fix first based on priority score and sentiment

### Plan Features

When the user asks what to build next:
1. Call `get_feedback` with `category: "FEATURE_REQUEST"` and `status: "OPEN"`
2. Group similar requests and count occurrences
3. Present top requested features with vote/mention counts

### Fix from Feedback

When acting on a specific bug report:
1. Read the feedback content and AI summary
2. Check submitted feedback type and follow-up answers when available
3. Check attachment links for screenshots or uploaded images
4. Check the page URL to understand where the issue occurs
5. Check browser/OS info for platform-specific bugs
6. Search the codebase for relevant files
7. Implement the fix

### Reply Safely

When replying to feedback, do not guess the delivery method or sender address.

- Before replying, inspect `feedbackbasket feedback show <id> --agent`, including `replyChannel` and `awaitingOwnerReply`, then ask the human which available delivery method to use unless the human already specified it in the current conversation.
- If `replyChannel: "in_app"`, use `--delivery in-app`. If `replyChannel: "widget"`, use `--delivery widget`. Use `--delivery both` only when an email address and a reply channel are both available.
- If feedback has no `email`, do not use `--delivery email` or `--delivery both`. If `replyChannel: null`, do not use thread delivery.
- If delivery includes email and the project has no `replyToEmail`, ask the human which reply-to email to use before sending. Do not use the account owner's email, token owner's email, or any remembered address without explicit confirmation in the current conversation.
- After the human confirms a reply-to address, pass it explicitly with `--reply-to <email>`, or set a project default first with `feedbackbasket projects update <project> --reply-to <email>`.
- Treat `feedback replies <id>` as one chronological conversation containing both team and visitor messages. A visitor follow-up belongs to the original feedback item; never create a replacement feedback item for it.

```bash
feedbackbasket feedback reply <id> "Thanks!" --delivery widget --agent
feedbackbasket feedback reply <id> "Thanks!" --delivery in-app --agent
feedbackbasket feedback reply <id> "Thanks!" --delivery email --reply-to support@example.com --agent
feedbackbasket feedback reply <id> "Thanks!" --delivery both --reply-to support@example.com --agent
```

### Create Issues

When the user wants to create GitHub issues from feedback:
1. Call `get_bug_reports` or `get_feedback` to get items
2. Use the AI summary as the issue title
3. Include the original feedback content, page URL, and browser info in the body
4. Tag with appropriate labels based on category and severity