How to vibe codeActivepieces

Prerequisites

• Node.jsfree

  Required for running the TypeScript backend, frontend build tools, and local worker services.

• GitHubfree

  Hosts the source code repository and runs CI/CD pipelines.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding complex full-stack repositories, setting up queue workers, and debugging multi-file state engines.

• Cursor

  Excellent for iterative frontend component work and fine-tuning the visual drag-and-drop workflow canvas.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a monorepo containing the Next.js frontend and Fastify backend. Set up PostgreSQL schemas using Drizzle ORM or Prisma to store users, projects, flows, steps, connection credentials, and run logs.

   Initialize a monorepo structure with a Next.js frontend and a Fastify backend in TypeScript. Set up Prisma or Drizzle ORM connected to PostgreSQL with tables for users, flows (storing JSON definitions), connections (storing encrypted API keys), and flow_runs (storing execution status, inputs, outputs, and timestamps). Ensure strict typing and proper relations between flows and runs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Workflow Canvas Frontend

   Implement a drag-and-drop workflow builder interface using React Flow where users can configure triggers, conditional branches, loops, and actions.

   Build a visual workflow editor page in Next.js using React Flow. Allow users to drag and drop nodes representing triggers (e.g., Webhook, Schedule) and actions (e.g., Send Slack Message, HTTP Request, OpenAI prompt). Create a side drawer configuration panel for each node that dynamically renders input fields based on the selected piece's schema definition.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Core Execution Engine & Redis Queue

   Build the backend workflow execution engine utilizing Redis and BullMQ to process multi-step flows sequentially with robust error handling and step output mapping.

   Implement a background worker in the Fastify backend using BullMQ and Redis. When a flow is triggered, enqueue a job that iterates through the flow's step graph sequentially. Pass the output data of preceding steps into subsequent steps via handlebars/variable resolution (e.g., {{step_1.output}}). Record status updates ('RUNNING', 'SUCCESS', 'FAILED') and step-by-step logs in the PostgreSQL flow_runs table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Modular Integration Architecture ('Pieces')

   Design a modular plugin system where each integration ('piece') defines its own actions, triggers, input parameters, and authentication requirements in TypeScript.

   Create a modular plugin architecture for 'pieces' in the backend. Define a TypeScript interface for a Piece containing metadata, authentication type (OAuth2, API key, Secret), triggers, and actions. Implement initial native pieces for Webhook, HTTP Request, Slack, Gmail, and OpenAI. Ensure actions safely execute API calls using credentials retrieved from the centralized connection vault.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Chat-to-Automation LLM Generator

   Integrate an AI assistant layer that accepts natural language prompts from users, designs a workflow graph structure via LLM function calling, and populates the canvas.

   Build a 'Chat to Automation' sidebar interface in the Next.js frontend backed by an API route calling the Anthropic API. Provide the LLM with the schema of available triggers and actions. When the user describes a workflow in natural language, have the model generate a structured JSON flow definition that automatically populates and saves onto the React Flow canvas.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Execution Runs Dashboard & Debugger

   Create a detailed execution run history view displaying step-by-step payloads, inputs, outputs, error traces, and execution durations for debugging flows.

   Develop a runs history dashboard in Next.js that lists past workflow executions with their status, start time, and duration. Clicking a run should open an inspector view showing a visual step-by-step breakdown of the execution graph, highlighting exact input payloads, output responses, and error stack traces for any failed steps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Activepieces