How to vibe codeMagicChat

Prerequisites

• Node.jsfree

  Required for running the Next.js app and the npm CLI tool.

• GitHubfree

  Source control and deployment pipeline.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding the Next.js dashboard, vector pipeline, and CLI tool.

• Cursor

  Ideal for fine-tuning the vanilla JS embed widget code and frontend UI components with precise visual diffs.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth, and set up Supabase Postgres with the pgvector extension enabled for document storage.

   Scaffold a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Configure better-auth with email/password authentication connected to Supabase PostgreSQL. Create database migrations for users, chatbots, documents, and chat_messages tables. Ensure the pgvector extension is enabled in Supabase and create a 'document_chunks' table with a vector column (dimension 1536) and an HNSW index for fast similarity search. Set up environment variables for Supabase and LLM API keys.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Knowledge Ingestion and Scraping Pipeline

   Build backend ingestion routes that accept URLs, PDFs, or raw text, parse them into chunks, generate embeddings, and store them in Supabase.

   Build a robust knowledge ingestion pipeline in Next.js Server Actions. Create API endpoints that accept URLs, uploaded PDF files, or raw text. For URLs, integrate Firecrawl API to scrape pages and return clean markdown. Implement a chunking utility that splits markdown text into overlapping blocks of roughly 500 characters. For each chunk, generate vector embeddings using OpenAI or Anthropic embedding models, and store the chunk text, source URL/title, and vector embedding into the document_chunks table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03RAG Chat API and Grounding Engine

   Implement the conversational chat endpoint that performs vector similarity search on user queries and generates grounded answers via LLM.

   Implement a RAG chat API route (/api/chat) that accepts a botId and user message. Query the document_chunks table using Supabase's vector similarity search operator (<->) to retrieve the top 5 most relevant context chunks for the bot. Construct a strict system prompt instructing the AI to answer the user's question solely using the provided context chunks and to politely decline if the answer is missing to prevent hallucinations. Use the Vercel AI SDK to stream the response back to the client.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embeddable Vanilla JS Chat Widget

   Develop a lightweight, self-contained JavaScript widget loader that injects a floating chat bubble and iframe/shadow DOM widget into any third-party website.

   Create a vanilla JavaScript embed script (commandk.js) designed to be inserted into third-party websites via a single script tag with a data-bot-id attribute. When loaded, the script must inject a floating chat bubble button in the bottom-right corner of the host page. Clicking the bubble should toggle a responsive chat window rendered inside an isolated Shadow DOM container to prevent CSS leakage. Implement message submission handlers that communicate via fetch with our Next.js /api/chat endpoint, rendering user messages and streaming AI replies in real time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Developer CLI Tool

   Build a command-line interface distributed via npm that allows developers to authenticate, list bots, and query knowledge bases from the terminal.

   Build a Node.js command-line interface (CLI) tool using Commander.js, packaged for npm as 'magicchat-cli'. Implement commands: 'magicchat login' for authenticating against our backend via API token, 'magicchat bots' to list all created chatbots, 'magicchat ask <bot-id> <query>' to query a chatbot directly from the terminal, and 'magicchat add source url <bot-id> <url>' to trigger remote knowledge ingestion. Handle configuration storage securely in the user's home directory.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Dashboard UI and Polish

   Build the main SaaS dashboard for managing chatbots, viewing source indexing status, analyzing chat usage, and grabbing embed codes.

   Build the main user dashboard in Next.js App Router under /dashboard. Create views for: 1) Listing and creating chatbots with custom names and greeting messages, 2) Knowledge source management showing indexed URLs, PDF files, and processing statuses, 3) An embed code generator view providing the exact script tag and Next.js component snippet with the user's botId pre-filled, and 4) A basic analytics view showing total questions answered and active chat sessions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for MagicChat