How to vibe codeMailbutler

Prerequisites

• Node.jsfree

  Runtime required for building the Next.js web dashboard and bundling the browser extension.

• GitHubfree

  Repository hosting for source code and automated deployment pipelines.

• Cloudflare accountfree

  For deploying the serverless backend, SQLite database, and static assets.

• 

  OpenAI API keypay-as-you-go

  Powers the AI Smart Assistant for drafting, rewriting, and summarizing emails.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the full-stack extension and backend logic simultaneously.

• Cursor

  Ideal for iterative UI work on the browser extension sidebar DOM injections and React components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Monorepo containing the Next.js dashboard, Cloudflare Worker backend, and Chrome Extension manifest v3 skeleton.

   Scaffold a monorepo with Next.js, a Cloudflare Worker backend using TypeScript, and a Chrome Extension (Manifest V3) folder. Configure Cloudflare D1 SQLite database bindings in wrangler.toml. Create tables for users, tracked_emails (id, recipient, subject, opened_at, open_count, user_id), scheduled_emails (id, recipient, subject, body, send_at, status), and user_tasks (id, title, status, email_id, user_id). Implement a secure better-auth setup storing sessions in D1. Ensure CORS is strictly configured for your extension ID.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Chrome Extension DOM Sidebar Injection

   Build the content script that injects a persistent sidebar into Gmail's web DOM interface.

   Create a Chrome Extension content script in TypeScript that detects when Gmail (mail.google.com) is active. Inject a clean, isolated shadow DOM container housing a React sidebar app on the right side of the inbox view. Implement CSS scoping using Tailwind CSS inside the shadow root so host page styles do not leak in. Add navigation tabs inside the sidebar for Tracking, Send Later, Notes, and AI Assistant. Connect the sidebar to the Cloudflare Worker backend via authenticated fetch requests using stored tokens.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email & Link Tracking Engine

   Implement open tracking pixels and link redirection logging on the backend worker.

   Implement email tracking in the Cloudflare Worker. Create an endpoint /track/pixel/[id].png that returns a 1x1 transparent GIF while updating the corresponding tracked_emails record (incrementing open_count and setting opened_at on first open). Create a redirect endpoint /track/link/[id]?url=... that logs link clicks with timestamps and user-agent metadata before issuing an HTTP 302 redirect to the destination URL. Provide helper utilities in the extension to inject tracking pixels and rewrite outgoing links when composing emails.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Smart Send Later Queue

   Build a scheduled email queuing and dispatch mechanism using Cloudflare Cron triggers and Workers.

   Build a 'Send Later' feature in the backend and extension. Allow users to schedule emails with a target ISO timestamp stored in the scheduled_emails table. Implement a Cloudflare Worker cron trigger running every minute that queries pending emails where send_at <= current_time, dispatches them via SMTP or Resend API, and updates their status to 'sent' or 'failed'. Add a UI panel in the extension sidebar displaying active scheduled queues with options to cancel or edit.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Smart Assistant & PII Masking

   Integrate OpenAI via Vercel AI SDK with PII redaction for drafting, rewriting, and summarizing.

   Implement an AI Smart Assistant module in the backend worker using the Vercel AI SDK and OpenAI API. Before sending email text to OpenAI, write a robust regex/parser utility that replaces email addresses and phone numbers with dummy variables ([EMAIL_1], [PHONE_1]) for privacy compliance. Expose endpoints for drafting replies, rewriting for tone, and summarizing threads. Connect the extension sidebar UI to these endpoints so users can insert generated text directly into the active compose window.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Shared Tasks, Notes, and Polish

   Add contextual tasks and notes linked to specific email threads inside the sidebar.

   Build a notes and tasks management system tied to email message IDs. Implement backend CRUD endpoints for user_tasks and email notes. Build React components in the extension sidebar allowing users to attach checklist items and notes to the currently viewed email thread. Add visual status indicators and error boundary wrappers across all extension components for robust fault tolerance.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Mailbutler