How to vibe codeMake

Prerequisites

• Node.jsfree

  Required for runtime execution of backend orchestration services and frontend tooling.

• GitHubfree

  Source code repository hosting and CI/CD triggers.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding complex backend state engines and canvas node editors across multiple files.

• Cursor

  Ideal for fine-tuning the reactive UI canvas components and writing precise data mapping parser logic.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with TypeScript, configure Tailwind CSS, and set up the Turso SQLite database schema for users, scenarios, modules, and execution logs.

   Initialize a full-stack Next.js project with TypeScript and Tailwind CSS. Configure Turso (libSQL) as the database with Drizzle ORM. Create database tables for users, scenarios (storing the workflow JSON graph structure), scenario_runs (execution logs with status, start time, end time, and step payload logs), and data_stores (key-value persistent storage per user). Implement a basic local authentication layout using better-auth to secure the personal workspace. Ensure proper error handling and environment variable structure for local development.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Scenario Canvas & Node Editor

   Build an interactive drag-and-drop canvas interface using React Flow or custom SVG rendering where users can place triggers, routers, filters, and action nodes, connecting them into a directed acyclic graph.

   Build a visual scenario editor page using React Flow or a custom SVG canvas engine. Allow users to drag and drop nodes from a sidebar onto the canvas, connect nodes with directional edges, and configure node properties via an inspector panel on the side. Define node types for Webhook Trigger, HTTP Request Action, JSON Filter, Router (multi-path branching), and Data Store Operations. Store the complete graph state (nodes, edges, configuration parameters) as a JSON object in the scenarios database table whenever the user clicks Save.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Data Mapping & Formula Evaluation Engine

   Implement a parsing engine that maps data tokens from preceding nodes into subsequent node parameters using inline dot-notation and basic transformation functions.

   Implement a TypeScript data mapping and formula evaluation engine. When configuring a downstream node, users should be able to select output fields from upstream nodes using token pills or dot-notation (e.g., `1.body.email`). Build a secure expression parser that resolves these tokens against runtime execution context payloads, supporting basic string operations, math, and JSON path lookups. Ensure invalid token references throw descriptive evaluation errors.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Asynchronous Queue & Execution Engine

   Set up a background worker queue using BullMQ and Redis to execute scenarios step-by-step asynchronously, handling routers, filters, and error paths.

   Build an asynchronous execution engine using BullMQ backed by Redis. When a scenario is triggered (either via an incoming webhook endpoint or a manual run click), dispatch a background job that loads the scenario graph, topologically sorts or traverses the execution path, evaluates filters, executes routers to split execution into multiple branches, and performs HTTP requests or data store mutations. Log every step's input, output, and execution status into the scenario_runs table so it can be viewed in real-time on the frontend canvas.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Connectors & Credential Vault

   Create custom integration modules for common APIs (e.g., Slack, GitHub, Custom Webhooks) and a secure credential vault for storing API keys.

   Implement a secure credential vault module using AES-256 encryption to store third-party API keys and OAuth tokens per user. Build modular integration connectors for Custom Webhook Triggers, HTTP Request Actions (supporting custom headers, query params, and body mapping), and Data Store CRUD actions (Insert, Update, Get, Delete record). Connect these modules directly into the execution engine so worker nodes can securely authenticate against external APIs during scenario runs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Execution History & Dashboard Polish

   Build the execution history inspector UI to inspect past scenario runs, view detailed step inputs and outputs, and polish the dashboard experience.

   Build a comprehensive execution history dashboard view. Display a paginated list of scenario runs with status badges (Success, Error, Running), execution duration, and timestamp. Clicking a run should open an inspection modal or split-pane view that visually highlights the scenario graph nodes and displays the exact JSON payload input and output for every single step executed. Add real-time polling or WebSocket updates so active runs animate on the canvas.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Make