FeedbackBasketBack
Agent SkillClaude Code

FeedbackBasket Skill

Add the feedback widget to any web app and query user feedback — all from your AI coding agent. Works with Claude Code, Cursor, and Windsurf.

Widget Integration

Auto-detects your framework (Next.js, React, HTML) and injects the widget in the right place.

MCP Data Access

Query feedback, bugs, and feature requests directly from your IDE via MCP tools.

Act on Feedback

Triage bugs, plan features, create GitHub issues — all driven by real user feedback.

Quick Install

1

Download the skill file

Click the button below to copy or download SKILL.md

2

Add to your project or global skills

Place it in .claude/skills/feedbackbasket/SKILL.md in your project, or ~/.claude/skills/feedbackbasket/SKILL.md for global access

3

Ask Claude to add the widget

"Add FeedbackBasket to my app" — Claude will detect your framework and integrate it

SKILL.md
---
name: feedbackbasket
description: Integrate the FeedbackBasket widget into any web app and query user feedback via MCP. Use when the user asks to add a feedback widget, collect user feedback, 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. Set up MCP to query feedback data from the IDE
3. Act on feedback — triage bugs, plan features, fix issues

## Widget Integration

### Step 1: Get Your Project ID

The user needs a FeedbackBasket account and project. Direct them to:
- Sign up: https://feedbackbasket.com
- Create a project in the dashboard
- Copy the project ID from the widget settings page

### 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>
```

### 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.

## 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

### 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 the page URL to understand where the issue occurs
3. Check browser/OS info for platform-specific bugs
4. Search the codebase for relevant files
5. Implement the fix

### 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

This skill follows the Agent Skills standard. You can also find it on the Agent Skills directory.