@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

``bash
npm install @framed/react
`

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

export default function Layout({ children }: { children: React.ReactNode }) {
return (


config={{
supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
}}
>
{children}




);
}
`

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 (



);
}
`

$3

- 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
- Issues
- Docs: Coming soon