@framed-dev/react

v0.3.2

Published

a month ago

React components for Framed feedback widget

Downloads

263

0High
0Medium
0Low

framed-dev

framed feedback widget react sdk

@framed/react

Collect visual feedback and export AI-ready prompts.

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

npm install @framed/react

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

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

Database Setup

Run this in your Supabase SQL editor:

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

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

Collect feedback via widget
Open drawer → click Copy AI Prompt
Paste in Bolt, Lovable, or Cursor
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