How to vibe codeFlowHunt

Prerequisites

• Node.jsfree

  Required for running the full-stack TypeScript project and package managers.

• GitHubfree

  Source control and CI/CD repository hosting.

• Anthropic API Keypay-as-you-go

  Provides frontier reasoning models for the agent supervisor and worker nodes.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file TypeScript architectures and managing backend state machines.

• Cursor

  Ideal for fine-tuning the visual React node editor canvas and complex Tailwind CSS layouts.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up Turso database models for users, workspaces, workflows, and task runs.

   Scaffold a new Next.js TypeScript project using App Router. Configure Tailwind CSS and Lucide icons. Set up better-auth with email/password authentication using Turso as the database driver via @libsql/client. Create database tables for users, workspaces, workflows (storing node graphs as JSON), and task_runs with fields for status, logs, and token usage. Write a robust database connection utility and ensure migrations run cleanly on startup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Visual Node-Based Flow Builder

   Implement a drag-and-drop workflow canvas using React Flow where users can link trigger, LLM, tool, and action nodes together.

   Implement a visual workflow builder page using React Flow (@xyflow/react). Create custom node components for Triggers (Webhook, Schedule), LLM Processors (OpenAI, Anthropic selector with system prompts), Tools (Shopify, Web Search), and Actions (Slack, Turso). Allow users to drag nodes from a sidebar, connect handles with validation rules, and serialize the canvas state (nodes and edges) into JSON to save to the Turso workflows table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Multi-Agent Supervisor & Task Kanban

   Build an AI Project kanban board where a supervisor agent breaks down high-level goals into sub-tasks and delegates them to worker agents.

   Build an AI Projects kanban board view with columns for Open, In Progress, and Done. Implement a supervisor agent backend loop using the Vercel AI SDK that accepts a project goal, uses an LLM to generate structured sub-tasks, and assigns them to specialized worker agents (e.g., Content Writer, SEO Auditor). Display live execution status, logs, and real-time card movements on the dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Durable Background Execution with Inngest

   Set up Inngest to handle long-running multi-step agent workflows asynchronously with automatic retries and step persistence.

   Integrate Inngest into the Next.js backend to handle asynchronous workflow execution. Create a durable function that parses saved workflow JSON graphs, resolves node dependencies, executes LLM calls sequentially or in parallel, handles tool execution errors with automatic retries, and writes execution logs and audit trails back to the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Knowledge Base Ingestion & Vector Search

   Add functionality to ingest URLs and uploaded documents, chunk text, generate embeddings, and query them during agent runs.

   Add a Knowledge Sources module where users can input URLs or upload text documents. Use Turso with sqlite-vec to store and query vector embeddings. Build a retrieval tool node that agents can call during workflow execution to fetch relevant context chunks from ingested documents before prompting the LLM.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Photomatic AI Media & Polish

   Implement the Photomatic image generation tool utilizing Fal.ai and finalize workspace usage monitoring metrics.

   Create a Photomatic media generator page that integrates with Fal.ai to generate images and videos from text prompts and base photos. Build a workspace settings dashboard that aggregates monthly token consumption, active agent run counts, and estimated API spend into clean summary cards and charts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for FlowHunt