How to vibe codePabbly

Prerequisites

• Node.jsfree

  Required for running the TypeScript backend and Next.js full-stack framework

• GitHubfree

  Repository hosting and CI/CD deployment pipelines

• Supabase$0/mo

  Managed PostgreSQL database with realtime capabilities for workflows and state

AI coding tools

• Claude Code

  Handles complex multi-file backend logic, queue orchestrations, and API integrations across the stack

• Cursor

  Ideal for iterative UI design of the dashboard, form builder canvas, and automation node editor

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up the Supabase database schema for users, workflows, webhook logs, and subscription records.

   Scrape together a new Next.js 16 project configured with TypeScript, Tailwind CSS, and better-auth for local authentication. Connect the app to a Supabase PostgreSQL instance using Prisma or Drizzle ORM. Create the foundational database schema tables: users, workspaces, workflows (storing trigger and action node JSON graphs), webhook_logs (for storing raw incoming payloads, status headers, and execution timestamps), subscription_plans, and form_submissions. Ensure proper foreign key constraints and indexes on workspace_id and execution status fields. Write comprehensive migration files and verify that a test user can sign up and authenticate successfully against the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Webhook Ingestion Gateway & Payload Transformer

   Build an endpoint receiver that securely captures inbound webhooks, logs raw payloads, and exposes a transformation interface.

   Implement a secure webhook ingestion gateway route in Next.js at `/api/v1/hooks/[slug]`. This endpoint must capture incoming HTTP POST payloads from third-party services, record headers, method, IP address, and raw body into the `webhook_logs` table asynchronously, and return an immediate 200 OK response. Next, build a webhook management dashboard UI where users can inspect captured webhook payloads, filter by date or status, and configure basic JavaScript-like transformer functions or mapping rules to reshape the payload before passing it down to subsequent steps. Handle malformed JSON payloads gracefully with robust error handling and logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Workflow Automation Engine (Pabbly Connect Subset)

   Create a node-based workflow editor using React Flow and a durable background execution engine using Inngest.

   Build a visual workflow builder page using React Flow that lets users chain trigger events (e.g., Webhook Received, Form Submitted) to action steps (e.g., Send Email via Resend, HTTP Request). Store the workflow graph configuration as JSON in the database. Integrate Inngest to handle durable background job execution when a workflow is triggered. The execution engine must fetch the workflow steps sequentially, pass data mapping from previous step outputs to current step inputs, execute external API calls with automatic retry logic for transient failures, and log every execution step status (success, failed, retrying) to a dedicated `workflow_runs` table. Display real-time execution histories in the workflow dashboard UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Subscription Billing & Invoicing Module

   Implement subscription plan management, customer checkouts, and automated invoicing tables.

   Develop a subscription billing management module modeled after Pabbly Subscription Billing. Create database tables for products, pricing plans, customers, subscriptions, and invoices. Integrate Stripe Checkout to process one-time and recurring payments securely. Set up a Stripe webhook endpoint to listen for customer.subscription.created, invoice.payment_succeeded, and invoice.payment_failed events. Upon payment failure, trigger a mock dunning email sequence using Resend to notify customers. Build an internal dashboard where admins and users can view active subscriptions, download PDF invoices, and inspect billing history without incurring transaction percentage penalties outside of Stripe's standard fees.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Drag-and-Drop Form Builder & Lead Capture

   Build a no-code form builder canvas allowing users to publish lead collection forms and embed payment widgets.

   Create a drag-and-drop form builder interface in Next.js that lets users add custom fields (text inputs, dropdowns, file uploads, payment buttons). Store form configurations as JSON schemas in the database. Implement a public form rendering route at `/forms/[formId]` that validates user inputs on submission, stores responses in a `form_submissions` table, triggers any associated workflows created in Step 3, and processes attached Stripe payments if a checkout field is present. Provide a submissions data table view with CSV export functionality for collected leads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Workflow Generator (AgenticAI Subset)

   Add an AI assistant module that generates workflow node graphs from natural language prompts using the Vercel AI SDK.

   Integrate the Vercel AI SDK with Anthropic API or OpenAI API to build an 'AgenticAI' workflow assistant panel. Users should be able to type a natural language prompt (e.g., 'When a form is submitted, send a welcome email and create a subscription record'). The AI model must use structured output generation to parse the prompt and return a valid JSON workflow graph matching the schema defined in Step 3. Automatically populate the React Flow canvas with the generated trigger and action nodes, allowing the user to review, tweak credentials, and activate the workflow instantly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Pabbly