How to vibe codeWireflow

Prerequisites

• Node.jsfree

  Required runtime for Next.js 16 and backend scripts

• GitHubfree

  Version control and deployment pipeline source

• 

  Fal.ai API Accountpay-as-you-go (~$10 starting credit)

  Provides fast serverless inference for Flux and image models

AI coding tools

• Claude Code

  Handles complex multi-file Next.js scaffolding, database schemas, and API route orchestration

• Cursor

  Ideal for fine-tuning the interactive node canvas UI components and CSS layouts

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js 16 project with TypeScript, Tailwind CSS, better-auth, and Neon PostgreSQL database tables for users, workflows, nodes, and credits.

   Scaffold a new Next.js 16 application using App Router and Tailwind CSS. Set up better-auth with email/password authentication connected to a Neon PostgreSQL database via Drizzle ORM or Prisma. Create database migrations for tables: users (id, email, credits), workflows (id, user_id, title, canvas_data jsonb), and generations (id, workflow_id, model_name, status, output_url). Ensure strict TypeScript types across all database schemas and include environment variable validation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Node Canvas Editor UI

   Implement the interactive node-based canvas using React Flow, allowing users to drag, drop, and connect input, generation, compositor, and export nodes.

   Build a visual node-based editor page using React Flow inside the Next.js app. Create custom node types: InputNode (for prompts and product images), ModelNode (for picking AI image/video models), CompositorNode (for text and overlay stacking), and ExportNode. Implement canvas state persistence to save workflow JSON graphs directly to the Neon workflows table when modified. Add clean node styling matching a modern dark-mode aesthetic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Model Orchestration & Fal.ai Integration

   Build backend API endpoints that parse the node graph execution order, deduct user credits, and dispatch asynchronous inference jobs to Fal.ai and OpenAI APIs.

   Create a backend execution engine in Next.js API routes that takes a workflow graph JSON, topologically sorts the nodes, and executes them sequentially. Integrate the Fal.ai API to handle Flux image generation nodes and video generation nodes. Implement credit checking and deduction logic against the user's balance in the database before running any node inference. Handle API error retries and store output asset URLs in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Brand Kit & Asset Manager

   Add a brand kit management system allowing users to upload brand logos, colors, fonts, and product shots, injecting them as global inputs into node graphs.

   Build a Brand Kit settings page where users can upload logo images, define primary/secondary brand colors, select fonts, and store product reference shots. Store these assets in cloud object storage and link them to the user account. Update the node canvas execution engine so that Generation and Compositor nodes can automatically reference the active user's brand kit assets during prompt expansion and rendering.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05MCP Server Endpoint & Social Publish Queue

   Expose a Model Context Protocol (MCP) server endpoint and a scheduled social publishing queue to trigger workflows externally and manage automated posting.

   Implement an MCP server endpoint at /api/mcp that authenticates incoming requests using OAuth 2.1 PKCE and exposes tools to trigger workflow runs, inspect generation status, and retrieve output media URLs. In parallel, build a scheduled post queue table and background cron worker that simulates scheduled multi-platform publishing with randomized time drifting to prevent bot detection.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Wireflow