How to vibe codeSaner.AI

Prerequisites

• Node.jsfree

  Required runtime for building the Next.js full-stack application and CLI tools.

• GitHubfree

  Repository hosting and continuous deployment pipeline integration.

• Anthropic API Keypay-as-you-go

  Powers the conversational assistant and reasoning layers.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file full-stack apps and debugging database schemas.

• Cursor

  Ideal for iterative frontend component development, dashboard layouts, and reviewing code diffs.

Build guide

1. 01Project Scaffolding & Database Schema Setup

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Neon Postgres with pgvector extensions for storing notes, chunks, and embeddings.

   Create a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS v4. Initialize shadcn/ui components including buttons, input fields, cards, dialogs, and dropdowns. Set up a Drizzle ORM configuration connected to a Neon Postgres database using the @neondatabase/serverless driver. Define database schemas for users, notes (id, user_id, title, content, created_at, updated_at), task items (id, user_id, note_id, title, status, due_date), and vector embeddings (id, note_id, embedding vector(1536)). Ensure schema migrations run smoothly and include proper index definitions for vector similarity searches using pgvector.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & User Management

   Implement local and OAuth authentication using better-auth to secure the private knowledge workspace.

   Configure better-auth within the Next.js project to handle secure user registration, email/password login, and Google OAuth sign-in. Create the necessary database tables via better-auth schema extensions inside Neon Postgres. Build protected layout routes (`/dashboard`), middleware guards to redirect unauthenticated requests, and a user profile dropdown component in the header that displays user details and sign-out functionality. Test the auth callback flows to guarantee seamless session management.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Note Capture & Management CRUD Interface

   Build the core workspace interface for capturing, organizing, editing, and listing notes and web clippings.

   Build a responsive split-pane dashboard layout in Next.js App Router featuring a sidebar navigation tree, a filterable list of notes, and a rich markdown text editor canvas in the center pane. Implement Server Actions and API endpoints for full CRUD operations on notes. Add instant auto-save functionality with debouncing, smart tagging input fields, and tag filtering filters on the sidebar list view. Ensure responsive handling for mobile screens using drawer menus.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Vector Search & RAG Knowledge Pipeline

   Implement the chunking, embedding generation, and vector retrieval system allowing the assistant to query private notes.

   Implement a background note-processing pipeline using the Vercel AI SDK and OpenAI embedding models (`text-embedding-3-small`). When a note is created or updated, chunk its content into 500-character segments, generate vector embeddings, and store them in the database vector table. Build a semantic search API endpoint that computes cosine similarity against user notes via pgvector, and expose a search command palette (`Cmd+K`) component in the frontend to search notes semantically with instant keyboard shortcuts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Conversational AI Assistant (Skai)

   Integrate the AI chat workspace supporting context injection from retrieved user notes and model switching.

   Build a conversational AI chat interface drawer/panel using the Vercel AI SDK `useChat` hook. Implement a backend API route that accepts user queries, executes a semantic vector search over the user's private notes, injects the top matching snippets as context system prompts, and streams responses from Anthropic Claude or OpenAI models. Include a model selector dropdown allowing users to toggle between available frontier models. Ensure markdown rendering and code blocks inside chat messages look polished.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Universal Task Extraction & Dashboard Polish

   Add task extraction capabilities that parse notes into actionable checklist items and build daily review reminders.

   Build a task management workspace view that lists extracted action items across all notes. Implement an AI task extraction utility function that runs against note content using structured JSON outputs to pull out actionable to-dos, deadlines, and priorities. Add interactive checkboxes to mark tasks complete, inline date pickers for deadlines, and a daily planning summary card widget on the main dashboard home page. Perform end-to-end polish, error boundary handling, and responsive CSS fixes across all views.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Saner.AI