How to vibe codeCustomer.io

Prerequisites

• Node.jsFree

  Required runtime for running the Next.js development server and backend worker environment.

• GitHubFree

  Source control and integration bridge for hosting repository code and managing deployments.

• Resend AccountFree tier available

  Provides the transactional email API infrastructure needed to send test messages from the clone.

• Anthropic API KeyPay-as-you-go

  Powers the AI agent feature that translates natural language prompts into workflow structures.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding full-stack features, writing database schemas, and handling multi-file backend logic.

• Cursor

  Ideal AI code editor for iterating rapidly on complex frontend UI components like the visual workflow builder canvas.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, Prisma, and better-auth. Set up relational database tables for profiles, events, campaigns, workflow steps, and email logs.

   Scaffold a new Next.js project using TypeScript and Tailwind CSS. Integrate Prisma ORM with a PostgreSQL connection string. Write a comprehensive Prisma schema for a customer engagement tool containing models for UserProfile (with JSON attributes), CustomEvent (userId, eventName, properties, timestamp), Campaign (id, name, status, workflowJson), and EmailLog (id, recipient, subject, status, sentAt). Set up better-auth for secure admin user authentication. Ensure all relational foreign keys and indices are properly configured for performance.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Event Ingestion & Profile Management API

   Build high-throughput ingestion endpoints to accept custom track events and user attribute updates, updating profile state in real time.

   Build a robust REST API route in Next.js at /api/v1/track that accepts incoming JSON payloads containing either 'identify' or 'track' events. For 'identify', upsert the UserProfile record in PostgreSQL using the provided distinct_id, merging custom attributes into the JSON attributes field. For 'track', record the event in the CustomEvent table and instantly check if any active campaign triggers match this event name or updated profile attributes. Include request validation using Zod, comprehensive error handling, and structured request logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Workflow Builder Canvas

   Implement a drag-and-drop workflow canvas using React Flow allowing users to string together triggers, time delays, condition branches, and email actions.

   Create a visual workflow builder page using React Flow (@xyflow/react). Build custom node components for Triggers (segment entry, event trigger), Time Delays (wait X hours/days), True/False Condition Branches, and Action nodes (Send Email). Implement a sidebar where users can drag and drop new nodes onto the canvas, configure node parameters (e.g., delay duration, filter rules) via a slide-over form, and save the complete workflow graph state as a JSON structure to the Campaign table in PostgreSQL.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Durable Workflow Execution Engine with Inngest

   Integrate Inngest to handle stateful background journey orchestration, executing multi-step delays, evaluating conditions, and triggering email sends reliably.

   Implement an Inngest background function handler in Next.js that processes active campaigns when triggered by user entry events. The function must traverse the campaign workflow JSON graph sequentially: when hitting a delay node, execute `step.sleep()` for the specified duration; when hitting a condition node, evaluate profile attributes against filter rules; when hitting an action node, invoke the email sending service. Ensure the execution state handles retries gracefully and logs every step transition to an execution audit log table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Liquid Template Engine & Email Dispatcher

   Integrate the Liquidjs template parser and Resend API to render dynamic personalization tags in emails and dispatch them securely.

   Build an email rendering and dispatch service using the 'liquidjs' library and Resend API. When an email action node executes in the workflow engine, fetch the target user's profile attributes and custom object data. Pass the email body template and user data into LiquidJS to compile dynamic fields (e.g., 'Hello {{ profile.first_name }}'). Send the rendered HTML email via Resend, capturing the response message ID, and log delivery statuses (sent, failed, delivered) in the EmailLog table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Campaign Generator Integration

   Integrate the Anthropic SDK to parse conversational text prompts and output structured workflow JSON graphs automatically.

   Create an AI assistant API route that accepts a natural language prompt describing a lifecycle marketing goal (e.g., 'Create a 3-step onboarding email sequence for new signups with a 2-day delay'). Using the Anthropic SDK and Claude model, prompt the LLM with a strict JSON schema representing our campaign workflow graph nodes and edges. Validate the returned JSON response, sanitize the graph structure, and render the generated nodes onto the React Flow canvas automatically so the user can review and launch the campaign.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Customer.io