How to vibe codeChatbase

Prerequisites

• Node.jsfree

  Runtime environment for Next.js and TypeScript services.

• GitHubfree

  Version control and deployment pipeline source repository.

• Supabase Accountfree tier

  Provides Postgres, pgvector, Auth, and Realtime WebSocket channels.

• Anthropic / OpenAI API Keyspay-as-you-go

  Model inference for RAG generation and agent reasoning.

AI coding tools

• Claude Code

  Handles multi-file scaffolding, database schemas, and complex RAG pipeline logic directly from the terminal.

• Cursor

  Ideal for iterative UI development on the dashboard, playground, and client-side embed widget.

Build guide

1. 01Database Schema & RAG Pipeline Setup

   Initialize the Supabase database with pgvector extensions and create tables for workspaces, agents, documents, vector chunks, conversations, and helpdesk tickets.

   Initialize a Next.js 16 project with TypeScript, Tailwind CSS v4, and shadcn/ui components. Connect to Supabase and write a SQL migration enabling the `vector` extension. Create tables: `workspaces` (id, name, owner_id), `agents` (id, workspace_id, name, system_prompt, model, temperature, guardrails), `documents` (id, agent_id, title, source_type, content, char_count), `chunks` (id, document_id, content, embedding vector(1536)), `conversations` (id, agent_id, visitor_id, status), `messages` (id, conversation_id, role, content, metadata), and `tickets` (id, workspace_id, conversation_id, status, assignee_id, priority). Ensure proper foreign key constraints and indexes for vector similarity search using ivfflat or hnsw.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Data Ingestion & Vectorization Engine

   Build the backend parser and embedding generator that processes uploaded text, files, and crawled web pages into vector chunks stored in pgvector.

   Create ingestion API endpoints in Next.js that accept website URLs or text content. Implement a web scraper or integrate Firecrawl to extract plain text from target URLs, chunk the text into ~500 token segments with 50-token overlaps, and generate embeddings using OpenAI's `text-embedding-3-small` model. Store the resulting text chunks and their respective vectors in the `chunks` table linked to the specific agent. Add error handling for invalid URLs and document size limits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Multi-Model RAG Chat Engine

   Implement the conversational RAG endpoint using the Vercel AI SDK to retrieve context from pgvector and stream responses from multiple LLM providers.

   Implement a chat inference API route using the Vercel AI SDK that accepts an agent ID and a message history array. When a user submits a query, generate an embedding for the query, execute a similarity search against the `chunks` table using pgvector cosine distance, and construct a system prompt combining the agent's base instructions, guardrails, and retrieved context chunks. Support model selection (OpenAI GPT-4o, Anthropic Claude Sonnet, Gemini Flash) via an abstraction layer. Stream the response back to the client and log message token usage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embeddable Widget & JavaScript Script Tag

   Build a lightweight, customizable chat widget that clients can embed on any website via a single script tag.

   Build an embeddable chat widget component and bundle it into a standalone lightweight JavaScript file that can be injected via a `<script>` tag. The widget should render a floating chat button on client websites that opens a chat window styled with the agent's configured accent color and greeting. It must communicate securely with the Next.js chat API using the agent ID, maintain local session state in localStorage, support message streaming, and handle markdown formatting in agent replies.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Agent Dashboard & Playground

   Create the SaaS dashboard for managing agents, configuring system prompts, uploading training data, and testing responses in an interactive playground.

   Build a comprehensive dashboard UI using shadcn/ui. Include an Agent List view, an Agent Creator/Editor form (for updating system prompts, guardrails, temperature, and picking models), a Training Data manager (displaying uploaded sources and character counts), and an interactive Playground split-view where users can test prompts and inspect retrieved RAG context chunks in real-time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Helpdesk Shared Inbox & Manual Takeover

   Develop the helpdesk support ticket system with conversation handoffs, custom ticket statuses, and live human agent takeovers.

   Build a Helpdesk shared inbox view in the dashboard. When an AI agent encounters an escalation trigger or a user requests a human, automatically create a record in the `tickets` table and notify operators via Supabase Realtime channels. Implement a manual takeover toggle that pauses the AI response stream and lets a human operator reply directly inside the active conversation thread. Add ticket status management (New, On hold, In review, Closed) and filter views by assignee and status.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Chatbase