How to vibe codeFabric

Prerequisites

• Node.jsfree

  Required runtime for running the Next.js full-stack application and build tools.

• GitHubfree

  Source code repository and CI/CD deployment pipeline.

• Anthropic API KeyPay-as-you-go

  Required for powering the AI assistant, document synthesis, and semantic extraction features.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file Next.js apps, writing vector search pipelines, and debugging backend sync queues.

• Cursor

  Ideal for fine-tuning the UI components, markdown editor interactions, and tailwind styling with inline diff reviews.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, TypeScript, and set up the Supabase Postgres database with pgvector extensions for storing documents and vector embeddings.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up a Supabase client connection and write SQL migration scripts to create tables for `documents` (id, user_id, title, content, type, metadata, created_at), `embeddings` (id, document_id, vector vector(1536)), and `tags`. Ensure pgvector extension is enabled in Supabase and create an IVFFlat or HNSW index on the embeddings table for fast similarity search.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Management

   Implement authentication using better-auth integrated with the Supabase PostgreSQL database.

   Configure better-auth in the Next.js application using the Supabase Postgres adapter. Set up email/password sign-in, Google OAuth provider, and protected route middleware to secure dashboard views. Create a user profile onboarding flow that writes user records to the database upon first login.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Document Ingestion & Vector Pipeline

   Build file upload and URL clipping capabilities that chunk content, generate embeddings via OpenAI/Anthropic APIs, and store them for semantic search.

   Implement a document ingestion API route in Next.js that accepts uploaded PDFs, markdown files, or raw URLs. Use an extraction utility to parse text content, split the text into semantic chunks, call the OpenAI embeddings API (`text-embedding-3-small`), and insert both the document record and vector chunks into Supabase. Write a search function that queries vector chunks using cosine distance matching.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Semantic Search & AI Assistant Interface

   Build the command bar and chat interface allowing users to search by meaning and query their personal knowledge base using multiple LLM models.

   Build a command palette and search interface in React that triggers semantic searches across stored documents using the vector search endpoint. Create an AI assistant chat panel that retrieves relevant document chunks via RAG (Retrieval-Augmented Generation), constructs system prompts with user context, and streams responses from OpenRouter or Anthropic APIs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Infinite Canvas & Markdown Editor

   Integrate a minimal markdown editor and a canvas surface for visual note organization.

   Implement a rich markdown editor component using TipTap or Milkdown within a draggable infinite canvas workspace. Allow users to create floating note cards, connect them with directional links, and persist canvas node positions and bounds to Supabase storage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Background Agents & Scheduled Jobs

   Set up background worker jobs to process recurring summaries and simulated agent routines.

   Implement background scheduled jobs using Vercel Cron or Inngest to scan user document updates daily, generate automated email summaries (Recaps) using LLMs, and dispatch them via Resend. Create a dashboard UI for configuring custom agent routines.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Fabric