How to vibe codePapers

Prerequisites

• Node.jsfree

  Runtime environment for building the full-stack web application.

• GitHubfree

  Source code repository and CI/CD deployment pipeline integration.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file full-stack apps, setting up database schemas, and managing complex RAG pipelines.

• Cursor

  Ideal AI-native code editor for refining the complex PDF reader component and fine-tuning UI interaction states.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS, configure better-auth, and set up the Supabase PostgreSQL database schema with pgvector extensions for storing documents, metadata, and embeddings.

   Scaffold a new Next.js 16 application with TypeScript, Tailwind CSS, and App Router. Integrate better-auth for secure single-user local authentication with email/password. Set up Supabase client connections and create database migrations for tables: 'papers' (id, title, authors, doi, abstract, year, pdf_url, created_at), 'collections' (id, name, user_id), 'paper_collections' (paper_id, collection_id), and 'annotations' (id, paper_id, page_number, coordinates, text, type, color). Ensure pgvector extension is enabled on Supabase for vector embeddings storage. Write type definitions and validation schemas using Zod for all models.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02PDF Import and Metadata Extraction Pipeline

   Implement a PDF upload endpoint that parses uploaded documents, extracts text contents, queries Crossref/Unpaywall APIs using DOI strings to fetch complete metadata, and saves the record.

   Create a server-side PDF import module in Next.js. Implement file upload handling to store raw PDF binaries in Supabase Storage buckets. Build a parsing utility that extracts text from uploaded PDFs and scans the first two pages using regex or lightweight heuristics to locate DOIs or titles. Call the Crossref REST API using the detected DOI to automatically fetch structured metadata (title, authors list, abstract, publication year, journal name). Populate the 'papers' table with this extracted data and return the complete record to the frontend library view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Library Management Dashboard and Smart Lists

   Build the main dashboard UI allowing users to view, search, tag, filter, and organize their imported literature libraries into custom folders and smart lists.

   Build a responsive dashboard layout in Next.js using shadcn/ui components. Create a main library table and card grid view supporting multi-column sorting (by year, title, author), faceted filtering by tags or collections, and instant search over paper titles and abstracts. Implement sidebar navigation for switching between All Papers, Favorites, Trash, and custom user-created collections. Add modal dialogs for manually editing paper metadata fields, adding tags, and managing collection memberships.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Specialized PDF Reader and Annotation Canvas

   Integrate a robust web-based PDF viewer component with custom canvas overlays for highlighting, underlining, and adding sticky comments synced to database records.

   Integrate pdf.js into a dedicated reading workspace component within the Next.js app. Implement zoom controls, page navigation, and text-layer selection. Build a canvas and SVG overlay layer above the PDF viewer enabling users to highlight text ranges or click-drag to create rectangular highlights, underlines, and sticky notes with popup comment inputs. Save all annotation coordinates, text snippets, and user comments asynchronously to the 'annotations' table in Supabase tied to the current paper ID and page number.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Assistant and Chat with Library RAG Pipeline

   Implement the AI chat assistant using the Vercel AI SDK, handling document chunking, vector embedding generation, and cited answers pulled from user libraries.

   Implement an AI RAG pipeline using the Vercel AI SDK and Anthropic API. When a paper is imported, chunk its extracted text into paragraphs, generate vector embeddings via Supabase pgvector, and store them in a paper_chunks table. Create an AI chat interface sidebar in the PDF reader and library views. Implement vector similarity retrieval in server actions to pull relevant text chunks based on user queries, inject them into prompt context with clear source citations (paper title and page number), and stream responses back to the user with interactive source badges.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export and Citation Generation Module

   Build a citation generator and reference exporter supporting standard academic citation formats (APA, MLA, BibTeX, RIS) for seamless writing workflows.

   Build a citation export module that formats selected papers from the user library into standard academic formats including APA, MLA, Chicago, BibTeX (.bib), and RIS. Create a toolbar action in the library view allowing users to copy formatted citations directly to their clipboard or download a generated .bib file for inclusion in LaTeX or word processor workflows. Ensure robust handling of missing fields with graceful fallback strings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Papers