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

> The email platform for small businesses, SaaS founders, and creators

- Site: https://bentonow.com
- Category: Email Marketing & Automation SaaS
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 4-6 weeks of intensive full-stack development and debugging

## Verdict

Build a personal subset of the dashboard and broadcast engine, but keep paying for the real service because managing deliverability infrastructure at scale is brutal.

Replicating the CRUD dashboard, subscriber database, and even a basic workflow runner with Next.js and Supabase is straightforward for an AI coding agent. However, Bento's core value is raw deliverability—keeping sender reputation clean, handling bounce/suppression webhooks without dropping packets, and avoiding blacklists. An AI cannot generate established IP reputation or bypass the immense operational overhead of managing SMTP pools and feedback loops.

### What you can't replicate

- Established ISP trust and multi-million volume sending reputation
- SOC 2 Type II security audit compliance
- Real-time deliverability monitoring across thousands of shared domains

## What it does

An all-in-one email marketing, marketing automation, transactional email, and customer support platform featuring natural language workflow generation and developer tooling.

### Core features

- Visual workflow automation builder
- Subscriber event tracking and attribution
- Transactional API and SMTP relay
- AI-powered prompt-to-automation generator
- Shared inbox and live chat support interface
- Subscriber segmentation and custom fields
- Developer CLI and MCP server integration

## The business

### Pricing

- Marketing Platform: $29/mo — Up to 5,000 Active Users, unlimited marketing sends, automation, and team seats.
- Transactional Email: $5/mo — API and SMTP sending for receipts and app alerts.
- Bento Chat Add-on: +$30/mo — Shared inbox, live chat, and AI agents for support.

Founded 2019.
Team size: 1-5.

## The hard parts

- Email deliverability infrastructure (IP/domain warmups, SPF/DKIM/DMARC loops, spam filter avoidance)
- High-throughput asynchronous queuing for million-scale broadcast delivery
- Complex visual graph editor state management for multi-step branching workflows
- Real-time event processing and revenue attribution tracking across customer journeys

## How to vibe code Bento

### Prerequisites

- Node.js (Free): Runtime environment for the Next.js frontend and background job processor.
- GitHub (Free): Source control and deployment pipeline integration.
- Supabase Account (Free tier): Managed Postgres database with built-in auth and realtime capabilities.
- Resend Account (Free tier): Reliable transactional email API to power outbound test sends.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding agent for bootstrapping complex schemas and API routes.
- Cursor: Ideal AI-native editor for refining the visual workflow builder UI and React components.

### Stack

- Frontend: Next.js with Tailwind CSS and React Flow for visual automation graphs
- Backend: Next.js API Routes and Server Actions with background job queuing via Inngest
- Database: Supabase (PostgreSQL with Row Level Security)
- Auth: better-auth
- Payments: Stripe
- Other: Resend for email delivery API, Anthropic API for AI automation generation

### Hosting

- Vercel (Hosting the Next.js web application and edge serverless functions): $0-20/mo
- Supabase (Relational data storage for subscribers, events, and automation states): $0/mo

### Build guide

1. **Scaffold Next.js App and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Supabase client bindings, and write migration scripts for core entities.

```
Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Supabase client helpers using @supabase/ssr. Write a comprehensive PostgreSQL schema script in supabase/migrations/001_initial.sql that includes tables for 'subscribers' (id, email, attributes jsonb, unsubscribed boolean, created_at), 'events' (id, subscriber_id, event_type, properties jsonb, timestamp), 'broadcasts' (id, subject, body, status, sent_at), and 'automations' (id, name, definition jsonb, active boolean). Include indexes on subscriber email and event type for query performance.
```

2. **Implement Subscriber Management and Ingestion API** — Build backend endpoints and UI views to import, view, and segment subscribers with custom attribute tracking.

```
Build a Next.js server action and API endpoint at /api/v1/subscribers that accepts JSON payloads to upsert subscriber records and track custom events. Implement a dashboard UI page at app/subscribers/page.tsx displaying a paginated table of subscribers with search filtering by email and custom attribute values. Ensure robust input validation using Zod schemas and proper error handling for duplicate entries.
```

3. **Develop Visual Automation Builder with React Flow** — Construct an interactive node-based canvas enabling users to drag and drop triggers, delays, and email action nodes.

```
Install @xyflow/react and build a visual workflow automation builder component at app/automations/[id]/builder.tsx. Support custom node types for 'Trigger' (event received), 'Delay' (wait time), and 'Action' (send broadcast email). The component must serialize the node graph and edge connections into JSON format and save them to the 'automations' table in Supabase via an auto-saving hook.
```

4. **Integrate Background Execution Engine with Inngest** — Set up durable background workers to process subscriber event triggers and execute multi-step automation flows.

```
Integrate Inngest into the Next.js application to handle asynchronous event processing. Create an Inngest function that listens for incoming custom events, evaluates active automations matching the event trigger, traverses the JSON workflow definition graph step-by-step, respects configured delay periods, and triggers email sending actions via Resend.
```

5. **Add Tanuki AI Prompt-to-Automation Generator** — Incorporate an LLM-powered helper that translates natural language prompts into valid workflow node-and-edge JSON graphs.

```
Build an AI automation generator API route at /api/ai/generate-workflow that accepts a natural language string prompt (e.g., 'Send a welcome email then wait 3 days before sending an upsell'). Use the Anthropic SDK with Claude Sonnet to parse the prompt and output a structured JSON object matching the React Flow node/edge format used by the automation builder. Add a chat input bar in the automation editor UI to let users generate and refine workflows conversationally.
```

6. **Build Transactional Sending and Analytics Dashboard** — Implement programmatic sending endpoints, open/click webhook receivers, and aggregate reporting metrics.

```
Create a transactional email API route at /api/v1/send that accepts email parameters, validates API keys, and routes sends through Resend while logging requests to a 'transactional_logs' table. Build a webhook endpoint at /api/webhooks/resend to capture delivery, open, and click events, updating the logs in real time. Finally, build an analytics dashboard page at app/reports/page.tsx displaying delivery rates, open rates, and revenue attribution metrics.
```

### Cost vs paying

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

- Claude Pro / AI Coding Credits: $20
- Total: $20 one-time

**Ongoing costs (monthly):**

- Vercel Hobby / Pro Hosting: $0-20/mo
- Supabase Database: $0/mo
- Total: $0-20/mo

- Paying for the SaaS instead: $29/mo
- Build time: 40-60 hours
- AI tool credits: $20
- Break-even: N/A (Built for learning/fun)

## Sources

- [Bento Official Website](https://bentonow.com)
- [Bento Pricing Page](https://bentonow.com/pricing)
- [Bento Documentation](https://bentonow.com/docs)