How to vibe codeRelay.app

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack Next.js workflow engine.

• GitHubfree

  Code repository hosting and CI/CD deployment connection.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding complex backend state machines and multi-file Next.js architecture.

• Cursor

  Ideal AI code editor for iterative UI work on the visual workflow canvas and node wiring components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth, and set up Turso tables for workflows, workflow runs, steps, and user credentials.

   Create a new Next.js project configured with TypeScript, Tailwind CSS, and better-auth. Set up the database connection to Turso using Drizzle ORM or Prisma. Define the relational schema for workflows (id, name, definition_json, created_at), workflow_runs (id, workflow_id, status, input_data, output_data, current_step_index), workflow_steps (id, workflow_id, step_type, config_json, step_order), and user_credentials (id, user_id, provider_name, encrypted_token_data). Ensure all types are strictly enforced and include proper foreign key constraints and indexes on run history foreign keys.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Workflow Builder UI

   Build the drag-and-drop workflow canvas using React Flow where users can sequence triggers, actions, AI steps, and approval gates.

   Build a visual workflow builder page in Next.js using React Flow. Implement a custom node sidebar allowing users to drag and drop Trigger nodes (Webhook, Manual), Action nodes (HTTP Request, Send Slack Message), AI nodes (Summarize, Extract, Generate), and Human Approval gates onto the canvas. Create an interactive configuration drawer for the selected node that lets users edit JSON parameters and map previous step outputs via handlebars-style variable interpolation (e.g., {{step_1.output}}). Save the resulting graph structure back to the database as a JSON workflow definition.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Durable Workflow Execution Engine

   Implement the asynchronous execution engine using Inngest to manage state transitions, retries, branching logic, and step progression.

   Implement a durable workflow execution engine using Inngest integrated into the Next.js backend. Create an execution runner function that ingests a workflow run ID, fetches its step sequence, and executes each step sequentially or conditionally based on branching logic. Handle variable resolution by parsing input parameters against previous step outputs stored in run state. Implement robust error handling with automatic step retries and write detailed execution logs into the workflow_runs table for every state transition.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Multi-Model AI Actions and LLM Abstraction

   Integrate the Vercel AI SDK to support AI text generation, extraction, and summarization actions inside workflow steps across OpenAI and Anthropic.

   Create an AI action executor module using the Vercel AI SDK that supports dynamic model selection (OpenAI GPT-4o, Anthropic Claude 3.5 Sonnet). Implement specialized step executors for 'Summarize Text', 'Extract Structured Data' (using Zod schema validation for guaranteed JSON output), and 'Custom Prompt Generation'. Ensure AI step tokens and usage are tracked per run, and safely handle API key configuration from user settings or environment variables.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Human-in-the-Loop Approval Checkpoints

   Build the pause-and-resume state handling for workflows that encounter a human approval checkpoint, generating secure notification links and resuming execution upon user action.

   Implement a human-in-the-loop pause and resume mechanism within the Inngest workflow engine. When an execution reaches an approval step, transition the workflow run status to 'paused_waiting_for_approval', generate a secure tokenized approval link sent via Resend, and halt execution. Build a dedicated dashboard page where users can view paused runs, inspect payload data, and click 'Approve' or 'Reject'. Clicking the action button must invoke a backend webhook that resumes the Inngest step function with the reviewer's input data.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Model Context Protocol (MCP) Server Export

   Expose custom workflow definitions as compliant Model Context Protocol (MCP) endpoints so external AI agents can discover and invoke them as tools.

   Build an MCP server endpoint in the Next.js app using the Model Context Protocol TypeScript SDK. The endpoint must dynamically inspect the user's saved workflows and expose them as callable MCP tools with explicit input schema definitions derived from step configurations. Implement secure API key authentication for incoming MCP tool execution requests, mapping incoming agent tool calls directly into the asynchronous workflow execution engine and returning structured execution outputs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Relay.app