How to vibe codeRelevance AI

Prerequisites

• Node.jsfree

  Required runtime for Next.js full-stack development and TypeScript tooling.

• GitHubfree

  Code repository and CI/CD deployment connection to cloud infrastructure.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding multi-file backend logic, queue runners, and API routing.

• Cursor

  Ideal for iterative UI work on the visual workflow canvas and complex React component trees.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application, configure better-auth, and set up Supabase database migrations for agents, workflows, execution logs, and knowledge documents.

   Scrape together a new Next.js project using TypeScript, Tailwind CSS, and shadcn/ui. Set up better-auth for secure user authentication with email and password. Configure Drizzle ORM or Supabase client connection to PostgreSQL. Create database schemas for users, workspaces, agents (storing system prompts, model configs, temperature), workflows (storing JSON node-and-edge graphs), execution_runs (storing status, input, output, token usage, cost), and knowledge_documents (with pgvector support for RAG chunks). Ensure proper foreign key constraints and indexes are established for efficient querying.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor
   Implement the authentication layout, sign-in/sign-up pages, and a protected dashboard shell with sidebar navigation for Agents, Workflows, Evals, and Knowledge Base. Set up environment variable validation using Zod and verify that database connections initialize correctly upon startup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Workflow Canvas & Node Builder

   Build an n8n-style interactive node canvas using React Flow where users can drag and drop trigger nodes, agent nodes, tool nodes, and condition nodes.

   Integrate React Flow into the workflow editor page to create a visual drag-and-drop canvas. Define custom node types for Triggers (Schedule, Webhook, Manual), AI Agents (linking to saved agents with custom system prompts), Tools (API calls, Python execution), and Conditions. Implement node selection panels, edge connection logic, and a property inspector sidebar that updates node configuration parameters in real-time. Serialize the workflow graph into a clean JSON structure representing nodes and edges, saving state to the database on change.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Multi-Provider LLM Router & Vercel AI SDK Integration

   Implement a unified LLM routing layer using the Vercel AI SDK to support OpenAI, Anthropic, and Gemini models with dynamic failover and token cost tracking.

   Create a backend service module that utilizes the Vercel AI SDK to abstract calls across OpenAI, Anthropic, and Gemini models. Implement a dynamic router function that takes a model spec, system prompt, tool definitions, and user message, executes the LLM call with streaming support, and records exact token consumption, execution latency, and calculated dollar cost into a centralized metrics ledger. Add fallback model handling if the primary provider returns a rate limit or timeout error.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Durable Agent Orchestration & Job Queue

   Build a robust background execution engine using Inngest or BullMQ on Fly.io to manage multi-step agent loops, retries, exponential backoffs, and execution logs.

   Implement a durable workflow execution engine using Inngest (or a robust queue worker on Fly.io) to handle asynchronous agent runs. When a workflow execution or agent task is triggered, create a background job that steps through the React Flow graph sequentially. Handle branching, tool execution calls with automatic retry and exponential backoff on failure, and state persistence. Log every execution step, intermediate thought, tool input/output, and final result to the execution_runs table so users can trace agent behavior step-by-step.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automated Evaluation Suites (Evals)

   Build an evaluation harness that compares production agent runs against defined test case scenarios to score pass rates and catch regressions before publishing.

   Build an Evals feature module allowing users to define test case suites for any agent. Each test case should specify an input prompt and expected criteria or assertions. Implement an evaluation runner service that executes the agent against all test cases in the suite using an LLM-as-a-judge pattern to grade output accuracy. Display historical pass rate charts, version comparison tables, and a blocking check that flags prompt regressions when pass rates drop below a configured threshold.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Centralized Context Layer (RAG) & MCP Gateway

   Add a knowledge base manager for tables, files, and documents with pgvector hybrid search, plus an MCP endpoint wrapper for external IDE integration.

   Implement a knowledge management section where users can upload files, paste raw text documents, or structure tabular data into a centralized context layer. Set up document chunking, embedding generation via OpenAI/Gemini embeddings, and storage into Supabase using pgvector. Create a hybrid retrieval search utility that agents can query automatically during runtime. Additionally, build a basic Model Context Protocol (MCP) server endpoint route in Next.js that exposes your custom agent tools and knowledge tables securely so external tools like Claude Code or Cursor can query them.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Relevance AI