How to vibe codeZapier

Prerequisites

• Node.jsFree

  Runtime for running Next.js and backend task runner workers.

• GitHubFree

  Source code repository and CI/CD triggers for Vercel deployment.

• Supabase AccountFree

  Provides Postgres database, built-in Auth, and real-time event subscriptions.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack apps and debugging backend queue logic.

• Cursor

  Ideal for iterative UI work on the visual workflow builder canvas and form components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, and establish the core database tables in Supabase for users, Zaps, trigger definitions, action steps, and task logs.

   Create a new Next.js project using App Router, Tailwind CSS, and TypeScript. Set up Supabase client connections and create migration SQL files for the following tables: users, zaps (storing workflow JSON graph), steps (trigger and action configurations), tables (custom user data tables), and task_runs (logging execution status and task consumption). Ensure strict typing and robust error handling across all database operations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and User Dashboard

   Implement authentication using better-auth and build the main dashboard layout displaying active Zaps, task execution limits, and navigation to Tables and Forms.

   Integrate better-auth into the Next.js app supporting email/password and Google OAuth. Build a responsive dashboard shell featuring a sidebar navigation (Zaps, Tables, Forms, History), a top bar showing remaining task count against the monthly quota, and a clean card grid listing user-created workflows with status toggles.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Workflow Builder Canvas

   Build an interactive drag-and-drop workflow editor using React Flow where users can configure a trigger node followed by one or more action nodes.

   Implement a visual workflow builder using React Flow on a dedicated Zap editor page. Allow users to add a Trigger node (e.g., Webhook or New Form Submission) and connect sequential Action nodes (e.g., Send Slack Message, Create Supabase Row, or Call OpenAI). Provide side drawer configuration panels for each node to map dynamic data fields from preceding steps using mustache syntax (e.g., {{step1.body}}).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Durable Workflow Execution Engine

   Implement the backend event loop using Inngest to reliably process triggers, evaluate conditional filters, execute actions with retries, and log task consumption.

   Set up Inngest in the Next.js backend to handle asynchronous workflow execution. Create an event handler that listens for trigger events (such as inbound webhook payloads), evaluates step-by-step logic paths and filters, executes external API calls with exponential backoff retries, records execution logs in the task_runs table, and increments the user's monthly task usage count upon success.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Zapier Tables and Forms

   Build embedded structured data tables and a simple form builder that automatically triggers workflows upon submission.

   Build a 'Tables' feature allowing users to create custom spreadsheet-like data stores with typed columns (text, number, date) and an interface to view and edit records. Build a companion 'Forms' builder that generates public web forms tied to specific tables and workflows, capturing form submissions, storing data, and firing workflow triggers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Action Step and Polish

   Add built-in AI action steps using Vercel AI SDK and polish error handling, auto-replay settings, and test run previews.

   Integrate Vercel AI SDK into the action node library, allowing users to add an 'AI Prompt' step inside any workflow to transform text, classify incoming leads, or summarize data using OpenAI or Anthropic models. Add a 'Test Step' modal in the workflow editor that executes a single node with mock data and displays detailed JSON output for debugging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Zapier