How to vibe codeActiveCampaign

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack web application.

• GitHubfree

  Code repository management and automated deployment pipeline integration.

• 

  Resend accountfree tier

  Reliable transactional email sending for campaign delivery tests.

AI coding tools

• Claude Code

  Handles complex multi-file architectural scaffolding, workflow state logic, and backend API routing.

• Cursor

  Ideal for fine-tuning the visual canvas frontend components and interactive workflow nodes.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up Drizzle ORM models on Neon Postgres for contacts, tags, campaigns, automation workflows, and CRM deals.

   Create a new Next.js 16 project with TypeScript and Tailwind CSS v4. Set up Drizzle ORM connected to a Neon PostgreSQL database. Define database schemas for 'contacts' (id, email, first_name, last_name, phone, created_at), 'tags' (id, name), 'contact_tags' (contact_id, tag_id), 'campaigns' (id, subject, content, status), 'deals' (id, title, value, stage, contact_id), and 'automations' (id, name, definition_json, active). Integrate better-auth for user session management.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Contact Management & Segmentation

   Build the contact dashboard with CSV import capabilities, list filtering, and tag management views.

   Build a contact management dashboard page in Next.js with a data table displaying contacts, pagination, search by email, and a CSV import modal. Implement server actions to parse uploaded CSV files using PapaParse, insert contacts in batches into the Neon database, and allow tagging contacts dynamically. Include capabilities to create and assign custom fields.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Automation Workflow Canvas

   Implement a drag-and-drop canvas using React Flow where users can configure trigger nodes, wait timers, condition branches, and action steps.

   Create an automation builder page utilizing React Flow. Allow users to drag and drop custom nodes: Trigger (e.g., 'Contact Tagged'), Wait (e.g., 'Wait 2 days'), Condition (e.g., 'If Email Opened'), and Action (e.g., 'Send Email'). Serialize the node graph and edges into JSON format and save it to the 'automations' table via server actions when the user clicks 'Save & Activate'.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Durable Workflow Execution Engine

   Integrate Inngest to evaluate workflow graph steps asynchronously, handle timer delays, and execute conditional paths.

   Implement an Inngest background job handler that processes automation triggers. When an event like 'contact.tagged' occurs, load the active automation workflow definition JSON, traverse the step graph, handle 'wait' steps using Inngest sleep functions, evaluate condition branching, and execute the corresponding action step (such as sending an email via Resend).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Campaign Composer & Email Dispatch

   Build a drag-and-drop or markdown email builder connected to the Resend API for bulk campaign execution.

   Build an email campaign composer interface with a live preview and template variable injection (e.g., {{first_name}}). Implement a backend dispatch service using the Resend API that iterates over segmented contact lists, renders personalized variables for each recipient, queues batches safely, and logs delivery events back to the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Sales CRM Kanban Pipeline

   Develop a Kanban board interface for managing sales deals across customizable pipeline stages.

   Build a Sales CRM Kanban board view in Next.js divided into stages: 'Lead In', 'Contacted', 'Proposal Sent', 'Won', 'Lost'. Connect cards to deals in the database, allowing drag-and-drop state updates across columns via optimistic UI updates and server actions. Include a slide-over panel to view deal history and associate contacts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07AI Assistant Layer

   Integrate Anthropic API to provide AI-driven campaign text drafting, custom instructions, and brand guideline memory.

   Implement an AI assistant sidebar using the Anthropic API. Allow users to write custom brand guidelines and store them in user settings. Create an endpoint that takes a campaign goal, prompt instructions, and brand memory context, then generates tailored email copy ready to insert directly into the campaign composer.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for ActiveCampaign