How to vibe codeJenni AI

Prerequisites

• Node.jsFree

  Required runtime for Next.js 16 and TypeScript tooling

• GitHubFree

  Source code repository and Vercel deployment pipeline

• Anthropic API KeyPay-as-you-go

  Powers Claude 3.5 Sonnet for source-grounded autocomplete and chat

AI coding tools

• Claude Code

  Best agentic terminal tool for scaffolding the Next.js app, setting up database schemas, and writing complex Tiptap editor extensions

• Cursor

  Ideal AI editor for fine-tuning frontend components, sidebar layouts, and inline completion event listeners

Build guide

1. 01Scaffold Project & Database Schema

   Initialize the Next.js 16 project with Tailwind CSS, configure better-auth, and set up Neon Postgres with pgvector for storing document chunks.

   Create a new Next.js 16 project using the App Router, TypeScript, and Tailwind CSS. Install better-auth for database-backed authentication. Configure a Neon Postgres connection using Drizzle ORM. Enable the pgvector extension via migration SQL (`CREATE EXTENSION IF NOT EXISTS vector;`) and create tables for users, documents, document_chunks (with embedding vector dimensions matching text-embedding-3-small), and references. Implement clean modular folder structures adhering to standard Next.js best practices.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02PDF Ingestion & Chunking Pipeline

   Build backend server actions to parse uploaded PDFs, extract text, chunk paragraphs, and generate vector embeddings.

   Implement a PDF upload API route and server action. Use pdf-parse or pdfjs-dist to extract raw text from uploaded PDF files up to 100MB. Write a chunking utility that splits academic text into 500-token blocks with 50-token overlaps. For each chunk, call OpenAI's text-embedding-3-small model API and store the resulting vector along with page metadata and source document ID in the Neon pgvector database table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Rich Text Editor & Inline Autocomplete

   Integrate TipTap editor with a custom extension that listens for keystrokes and streams AI ghost text completions.

   Set up a TipTap rich text editor component inside the Next.js workspace dashboard. Build a custom TipTap extension or inline decoration plugin that triggers an AI completion stream when the user pauses typing or presses a shortcut key (e.g., Tab). The extension must query a Next.js API endpoint using the Vercel AI SDK (`streamText`) with context retrieved via vector similarity search against the user's uploaded PDFs in Neon. Render the streamed response as ghost text inside the editor viewport, accepting it on Tab keypress.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Academic Citation & Reference Engine

   Build reference management, citation style mapping, and bibliography export tools (.bib, .ris).

   Create a reference management sidebar panel where users can view, add, and organize bibliographic metadata (authors, title, year, journal, DOI). Implement a citation formatter supporting APA, MLA, Chicago, and IEEE styles. Add export endpoints that serialize the user's reference library and inline citation keys into standard BibTeX (`.bib`) and Research Information Systems (`.ris`) text formats for immediate download.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Chat & Literature Discovery Sidebar

   Add a sidebar chat interface for multi-document RAG queries and academic paper search integration.

   Build an AI chat sidebar component supporting `@` document mentions and `/` prompt commands. Implement vector retrieval across selected PDF chunks in the user's library. Integrate an external academic search tool (calling Semantic Scholar or CrossRef APIs) so users can search millions of external papers directly from the editor sidebar, view abstracts, and import them straight into their reference library with one click.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Jenni AI