How to vibe codeTextCortex

Prerequisites

• Node.jsfree

  Required runtime for running the Next.js web application and building the browser extension bundle.

• GitHubfree

  Code repository hosting and CI/CD deployment pipelines.

• 

  Anthropic / OpenAI API KeysPay-as-you-go

  Provides foundation models (Claude and GPT) for ZenoChat and the agent execution engine.

AI coding tools

• Claude Code

  Handles end-to-end multi-file scaffolding for the Next.js app, database schemas, and browser extension background scripts.

• Cursor

  Ideal for fine-tuning the UI components, chat interfaces, and complex browser extension content scripts with inline diff reviews.

Build guide

1. 01Project Initialization and Database Schema

   Scaffold the Next.js application with TypeScript, Tailwind CSS, and shadcn/ui. Set up Neon Postgres with pgvector and configure better-auth for secure user authentication.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication using Drizzle ORM connected to a Neon Postgres database instance. Ensure the database schema includes tables for users, conversations, messages, knowledge_bases, and document_chunks with a vector(1536) embedding column using pgvector. Configure environment variables for database connection strings and AI provider API keys.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Model-Agnostic LLM Router and ZenoChat Interface

   Build the chat interface and the backend orchestration layer using the Vercel AI SDK to support dynamic model selection between OpenAI, Anthropic, and Gemini.

   Implement a chat dashboard UI mimicking ZenoChat in Next.js using shadcn/ui components. Create a backend model router utility using the Vercel AI SDK that accepts a selected model name ('gpt-4o', 'claude-3-5-sonnet', 'gemini-1.5-pro') and streams responses back to the client. Support system prompts, chat history persistence in Neon, and streaming UI updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Knowledge Bases & RAG Pipeline

   Implement file upload processing, text chunking, embedding generation, and semantic vector search retrieval for user-uploaded documents.

   Build a Knowledge Bases subsystem in Next.js that allows users to upload PDF and TXT files. Implement a server-side document parser that chunks text into overlapping segments, generates embeddings via OpenAI text-embedding-3-small, and stores them in the document_chunks table with pgvector. Implement a RAG retrieval function that performs cosine similarity search against user queries and injects relevant context into the ZenoChat system prompt.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Visual Agent Builder & Workflow Automation

   Create a lightweight node-based or form-based builder for configuring custom AI agents with specific instructions, personas, and assigned knowledge bases.

   Develop an Agent Builder interface allowing users to create custom AI personas with a name, description, system prompt, and linked knowledge base IDs. Store agent configurations in Neon. Update the ZenoChat execution route so that selecting an agent dynamically loads its prompt and RAG context before invoking the LLM router.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Browser Extension Toolbar & Content Injection

   Build a Chrome browser extension using Plasmo or Manifest V3 that injects a floating toolbar into web pages for text summarization and rewriting.

   Scaffold a Chrome extension using Plasmo with TypeScript and React. Build a content script that injects a subtle floating toolbar icon when text is highlighted on any webpage. When clicked, display a popup overlay offering options to rewrite, summarize, or explain the selected text by making authenticated API requests back to the hosted Next.js backend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for TextCortex