How to vibe codeAfforai

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack framework

• GitHubfree

  Version control and repository hosting

• 

  OpenAI API KeyPay-per-token (~$5-10/mo)

  Generates text embeddings and powers the RAG synthesis engine

AI coding tools

• Cursor

  Provides an AI-native code editor interface ideal for iterative frontend styling and debugging document viewer components

• Claude Code

  Handles complex multi-file backend scaffolding, database migrations, and RAG pipeline setup directly from the terminal

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with TypeScript, Tailwind CSS, and shadcn/ui. Configure Drizzle ORM connected to Neon Postgres with the pgvector extension enabled, defining tables for documents, chunks, and chat messages.

   Create a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Install Drizzle ORM and set up the connection configuration for Neon Postgres. Define database schemas in lib/db/schema.ts for users, documents (id, title, file_url, created_at), document_chunks (id, document_id, content, chunk_index, embedding vector(1536)), and chat_conversations/messages. Ensure pgvector extension support is included in the schema definition.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02PDF Upload and Text Extraction Pipeline

   Implement a file upload endpoint that accepts research PDFs, stores files securely, extracts raw text using a parsing library, and splits the content into manageable overlapping chunks.

   Build a server action and API endpoint in Next.js to handle multi-file PDF uploads. Integrate a robust PDF text extraction library (such as pdf-parse or unpdf) to pull raw text from uploaded files. Implement a chunking utility function that splits extracted text into 500-token segments with a 50-token overlap, preserving metadata like page numbers where possible.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Embedding Generation and Vector Storage

   Integrate the OpenAI embeddings API to vectorize text chunks and store them in Neon Postgres using pgvector for semantic retrieval.

   Write a background processing pipeline that takes newly chunked document segments, calls the OpenAI text-embedding-3-small API to generate vector embeddings, and inserts them into the document_chunks table in Neon Postgres. Add an error handling wrapper for rate limits and retries during bulk vectorization.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04RAG Query Engine and Multi-File Chat

   Build the semantic search retrieval mechanism and chat endpoint that queries multiple uploaded documents simultaneously using vector similarity and streams responses.

   Create a RAG chat API route using the Vercel AI SDK. When a user submits a query, generate an embedding for the query text, perform a vector similarity search across document_chunks using pgvector cosine distance, and retrieve the top relevant context blocks. Construct a prompt incorporating these chunks with inline citation tags (e.g. [Doc ID, Chunk Index]) and stream the synthesized response back to the client.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Split-Screen UI and Interactive Citation Viewer

   Develop a responsive split-screen dashboard layout featuring a document management sidebar, a chat interface with streaming answers, and an embedded PDF viewer that jumps to citation sources.

   Build a responsive split-screen dashboard UI using Tailwind CSS and shadcn/ui. The left side should feature a document library list and file uploader. The center/right side should contain a chat interface supporting streaming markdown responses. Implement clickable inline citation badges in chat messages that, when clicked, trigger the embedded PDF viewer to highlight and scroll to the corresponding page and paragraph.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Authentication and Polish

   Integrate better-auth for secure user login and session management, and refine error handling, loading states, and UI styling.

   Integrate better-auth into the Next.js application for email/password authentication, securing all dashboard routes and associating uploaded documents and chat histories with the authenticated user ID. Add loading skeletons for PDF processing and empty states for the document library.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Afforai