npm package: @framed-dev/react
Description: React components for Framed feedback widget
Latest version: 0.3.2

# @framed/react

Collect visual feedback and export AI-ready prompts.

[![npm version](https://img.shields.io/npm/v/@framed/react.svg)](https://www.npmjs.com/package/@framed/react)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)

## What it does

- **Visual selection** — Click any element on your site to attach feedback
- **Screenshot capture** — Capture and annotate screenshots
- **Task organization** — Organize and prioritize feedback as tasks
- **AI export** — Copy structured prompts for Bolt, Lovable, or Cursor

## Quick Start

```bash
npm install @framed/react
```

```tsx
// app/layout.tsx
import { FramedProvider, FeedbackWidget } from '@framed/react';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <FramedProvider
          config={{
            supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
            supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
          }}
        >
          {children}
          <FeedbackWidget />
        </FramedProvider>
      </body>
    </html>
  );
}
```

## Environment Variables

```env
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbG...
```

## Database Setup

Run this in your Supabase SQL editor:

```sql
create table framed_tasks (
  id uuid primary key default gen_random_uuid(),
  project_id text,
  type text not null,
  status text not null default 'open',
  element jsonb,
  page jsonb not null,
  feedback jsonb not null,
  task jsonb not null,
  attachments jsonb,
  meta jsonb not null,
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

alter table framed_tasks enable row level security;

create policy "Allow all for authenticated users" on framed_tasks
  for all using (auth.role() = 'authenticated');
```

## Configuration

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `supabaseUrl` | `string` | Yes | Your Supabase project URL |
| `supabaseKey` | `string` | Yes | Your Supabase anon key |
| `projectId` | `string` | No | Group tasks by project |
| `theme` | `'light' \| 'dark'` | No | Widget theme (default: light) |

## Hooks

```tsx
import { useTasks } from '@framed/react';

function TaskList() {
  const { tasks, openTasks, markDone, copyPrompt } = useTasks();

  return (
    <div>
      <p>{openTasks.length} open tasks</p>
      <button onClick={() => copyPrompt()}>Copy AI Prompt</button>
    </div>
  );
}
```

### Available hooks

- `useTasks()` — Access tasks, mark done, copy AI prompt
- `useFramed()` — Access full provider context

## Export to AI Tools

1. Collect feedback via widget
2. Open drawer → click **Copy AI Prompt**
3. Paste in Bolt, Lovable, or Cursor
4. AI implements the changes

The prompt includes task details, element selectors, page context, and suggested changes — everything the AI needs to make the fix.

## License

MIT

## Links

- [GitHub](https://github.com/framed-dev/framed-widget)
- [Issues](https://github.com/framed-dev/framed-widget/issues)
- Docs: Coming soon