npm package: @jarve/feature-requester
Description: Feature request widget for Next.js apps. Requests flow to JARVE Agency dashboard.
Latest version: 0.2.2

# @jarve/feature-requester

Feature request widget for React / Next.js apps. Requests flow to your JARVE Agency dashboard.

## How it works

1. A floating lightbulb icon appears in the bottom-left corner of your app (sibling-aware — auto-stacks with other @jarve widgets).
2. Click it to open a small assistant.
3. The assistant interviews the user about their idea and impact.
4. The structured feature request is sent to your JARVE Agency dashboard.

## Setup

### 1. Register your site

In your JARVE admin dashboard at `/admin/feature-requests/sites`:

- Click **Add Site**
- Enter your site name and color
- Click **Generate API Key**
- Copy the API key (starts with `frk_`)

### 2. Install

```bash
pnpm add @jarve/feature-requester
# or
npm install @jarve/feature-requester
```

### 3. Add Tailwind content path

The widget uses Tailwind CSS utility classes. Add the package to your Tailwind configuration so the classes aren't purged.

**Tailwind v4** (add `@source` in your CSS file):

```css
@source '../node_modules/@jarve/feature-requester/dist';
```

**Tailwind v3** (add to `content` in `tailwind.config.(js|ts)`):

```js
content: [
  // ...
  './node_modules/@jarve/feature-requester/dist/**/*.{js,mjs}',
]
```

### 4. Wrap your layout

```tsx
// app/layout.tsx
import { JarveFeatureRequester } from '@jarve/feature-requester'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <JarveFeatureRequester
          apiUrl="https://www.jarve.com.au/api/feature-requester/external"
          apiKey="frk_your_api_key_here"
          user={{ name: 'James', email: 'james@example.com' }}
        >
          {children}
        </JarveFeatureRequester>
      </body>
    </html>
  )
}
```

### 5. Done!

Click the lightbulb icon (bottom-right) to submit feature ideas. They'll appear in your JARVE Agency dashboard.

## Props

| Prop             | Type                              | Required | Description                                                                           |
| ---------------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------- |
| `apiUrl`         | `string`                          | Yes      | Base URL for the external feature requester API                                       |
| `apiKey`         | `string`                          | Yes      | Your site's API key (starts with `frk_`)                                              |
| `user`           | `{ name: string, email: string }` | No       | User info. If omitted, the AI may ask during conversation                             |
| `buttonPosition` | `'left' \| 'right'`               | No       | Floating button position. Default: `'left'`. Sibling-aware with other @jarve widgets. |
| `children`       | `React.ReactNode`                 | Yes      | Your app content                                                                      |

## What gets captured

- Page URL and section identifier (if available)
- Device type, browser, OS, viewport size
- AI conversation transcript
- Structured feature request (summary, description, use case, impact, priority, category)

## Requirements

- React 18+
- Tailwind CSS (v3 or v4)
- Next.js recommended but not required