AI-powered design review tool that lets teams mock up UI changes to existing web pages. Capture any webpage with the Chrome extension, then use AI to redesign elements in real time.

• Web App: Next.js (app router) with better-sqlite3 for storage
• Chrome Extension: Manifest V3, captures and self-contains full web pages
• AI: Anthropic Claude (claude-sonnet-4-20250514) for element redesign

cd redline
cp .env.local.example .env.local   # or edit .env.local directly
# Set your ANTHROPIC_API_KEY in .env.local
bun install
bun run dev

The app runs on http://localhost:3000.

1. Open Chrome and go to chrome://extensions
2. Enable Developer mode (toggle in top right)
3. Click Load unpacked and select the extension/ folder
4. The Redline icon appears in your toolbar

If the web app runs at a URL other than http://localhost:3000:

1. Right-click the Redline extension icon → Options
2. Enter the web app URL and save

1. Navigate to any webpage you want to review
2. Click the Redline extension icon
3. Select or create a project, then click Import Page
4. Open the project in the web app
5. Click Select Element to pick an element on the page
6. Type an AI instruction (e.g. "make this navbar dark") and click Apply Change
7. Use Undo to revert changes, Export HTML to download

• Click Share in the project header to create shareable links
• Links can target a whole project or a single page
• Add optional labels and expiry dates
• Shared views are read-only with a polished presentation

redline/
  extension/           Chrome extension (Manifest V3)
    manifest.json      Extension manifest
    popup.html/js      Extension popup UI
    options.html/js    Settings page for web app URL
  app/                 Next.js app (app router)
    api/
      projects/        Project CRUD
      pages/           Page CRUD + HTML serving
      ai/              AI redesign endpoint
      shares/          Share link CRUD + resolution
    project/[id]/      Project viewer with iframe, element selector, AI sidebar
    share/[token]/     Public read-only shared views
  lib/
    db.ts              SQLite singleton, auto-creates tables on startup

• Heavy SPA pages may capture sparse HTML if content hasn't hydrated when captured
• Some sites with strict CSP headers may block the capture script
• Cross-origin iframes within captured pages won't be included
• Very large pages (10MB+) may be slow to import and render
• The element selector uses CSS selectors which may not be unique on all pages — if the wrong element is matched, try selecting a more specific child element