# How to Vibe Code Your Own Mailbutler (and Stop Paying for It)

> Your inbox, smarter.

- Site: https://mailbutler.io
- Category: Email Productivity
- Platforms: Web app, Browser extension, macOS app
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal webmail extension clone for your own use, but skip the native Apple Mail app and multi-user enterprise compliance.

Replicating Mailbutler's core value—a sidebar inside Gmail/Outlook with email tracking, scheduling, notes, and an AI drafting assistant—is a very achievable solo project if you scope it strictly to a browser extension for Gmail. The real traps are maintaining native Apple Mail plugins across macOS releases and matching strict Frankfurt GDPR/ISO compliance for other users. For personal use, building a Chrome extension communicating with a Next.js backend on Cloudflare takes a few weekends of solid work, making it a great learning project compared to paying $13/mo, provided you accept you are your only user.

### What you can't replicate

- Native Apple Mail plugin stability across OS updates without breaking changes
- Official Google and Microsoft 365 security verification badges
- ISO/IEC 27001 audited compliance infrastructure

## What it does

An email productivity extension layer that adds tracking, smart scheduling, AI assistance, and team collaboration sidebars directly into Apple Mail, Gmail, and Outlook.

### Core features

- Browser extension injecting a custom sidebar into webmail (Gmail/Outlook)
- Email and link open tracking via 1x1 tracking pixels and redirect URLs
- Smart Send Later queuing system with background dispatch
- AI Smart Assistant for drafting, summarizing, and rewriting via OpenAI API with PII masking
- Shared tasks, notes, and email status management dashboard
- Custom email signature marketing designer

## The business

### Pricing

- Tracking: $4.95/mo — Basic email and link tracking.
- Professional: $8.95/mo — Adds core productivity tools.
- Smart: $12.95/mo — Adds AI assistance and advanced scheduling.
- Business: $29.95/mo — Full team collaboration suite.

Founded 2015.
Team size: ~20 employees.

## The hard parts

- Native Apple Mail plugin architecture and continuous adaptation to macOS updates
- Ensuring email tracking pixels bypass spam filters without getting blocked
- Robust background task queues for scheduled email dispatch (Send Later)

## How to vibe code Mailbutler

### Prerequisites

- Node.js (free): Runtime required for building the Next.js web dashboard and bundling the browser extension.
- GitHub (free): Repository hosting for source code and automated deployment pipelines.
- Cloudflare account (free): For deploying the serverless backend, SQLite database, and static assets.
- OpenAI API key (pay-as-you-go): Powers the AI Smart Assistant for drafting, rewriting, and summarizing emails.

### Recommended AI 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.

### Stack

- Frontend: Next.js + Chrome Extension (Manifest V3) with Tailwind CSS
- Backend: Cloudflare Workers (TypeScript)
- Database: Cloudflare D1 (Serverless SQLite)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Resend

### Hosting

- Cloudflare (Hosting the Next.js frontend, Cloudflare Workers API, and Cloudflare D1 database on their edge network.): $0-5/mo

### Build guide

1. **Project 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.
```

2. **Chrome 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.
```

3. **Email & 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.
```

4. **Smart 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.
```

5. **AI 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.
```

6. **Shared 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.
```

### Cost vs paying

**Starting costs (one-time):**

- Chrome Web Store Developer Registration: $5 one-time
- OpenAI API Starting Credits: $10
- Total: ~$15 one-time

**Ongoing costs (monthly):**

- Cloudflare Workers Paid Tier (optional): $5/mo
- OpenAI API Usage (Personal volume): ~$3/mo
- Total: ~$8/mo

- Paying for the SaaS instead: $12.95/mo (Smart Plan)
- Build time: 25-35 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: 1 month of active use

## Sources

- [Mailbutler Official Website & Info Kit](https://www.mailbutler.io)
- [Mailbutler Security & Privacy Documentation](https://www.mailbutler.io/privacy-policy/)