# How to Vibe Code Your Own MagicChat (and Stop Paying for It) > AI-powered customer support that never sleeps - Site: https://magicchat.ai - Category: Customer Support SaaS - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict You can build a functional personal clone of MagicChat in a couple of weeks, but maintaining multi-platform widgets and scraper stability requires tedious edge-case handling. The core loop—scraping docs, storing vectors, and calling an LLM via RAG—is well-trodden territory. However, building a rock-solid embeddable JavaScript widget that works across random customer websites without CSS leaks or DOM pollution is notoriously frustrating. Setting up the auth, dashboard, vector search, and CLI wrapper will take solid part-time engineering discipline. ### What you can't replicate - Their existing customer base and embedded widgets across thousands of production sites - Real-world production stress-testing against messy enterprise documentation ## What it does An AI customer support and conversion agent that indexes website data, PDFs, help centers, and YouTube videos to answer visitor questions conversationally after hours. ### Core features - Multi-source knowledge ingestion (website crawlers, PDF parser, YouTube transcript fetcher) - Text chunking and vector storage with pgvector - RAG-grounded chat completion engine with streaming responses - Embeddable vanilla JS widget script loader for third-party sites - Next.js, WordPress, and Shopify integration documentation and component wrappers - Authenticated Command Line Interface (CLI) via npm for bot management - Dashboard for managing knowledge sources, bots, and usage metrics - Multi-tier usage metering (pages indexed, monthly message quotas) ## The business ### Pricing - Free: $0 / mo - Lite: $29 / mo - Starter: $59 / mo - Growth: $129 / mo Founded 2023. Team size: Small indie team. ## The hard parts - Building a resilient scraper that extracts clean text from dynamic JavaScript-heavy websites without hitting rate limits - Chunking unstructured PDFs and transcripts while preserving structural context for embeddings - Designing a high-performance, non-blocking vanilla JS embed widget that injects cleanly into arbitrary third-party platforms without CSS collisions - Managing token context windows and grounding prompts to completely eliminate hallucinations against retrieved chunks ## How to vibe code MagicChat ### Prerequisites - Node.js (free): Required for running the Next.js app and the npm CLI tool. - GitHub (free): Source control and deployment pipeline. ### Recommended AI 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. ### Stack - Frontend: Next.js with Tailwind CSS and Vercel AI SDK - Backend: Next.js Server Actions and Node.js CLI script - Database: Supabase (PostgreSQL with pgvector for vector search) - Auth: better-auth - Payments: none - Other: Firecrawl for clean website scraping and markdown conversion, Anthropic API for embeddings and grounded chat completions, Langfuse for LLM tracing and observability ### Hosting - Vercel (Hosting the Next.js dashboard application and serving the embeddable chat widget script.): $0-20/mo - Supabase (Relational data storage, user authentication tables, and pgvector vector storage for indexed docs.): $0/mo ### Build guide 1. **Project 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. ``` 2. **Knowledge 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. ``` 3. **RAG 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. ``` 4. **Embeddable 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. ``` 5. **Developer 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 ' to query a chatbot directly from the terminal, and 'magicchat add source url ' to trigger remote knowledge ingestion. Handle configuration storage securely in the user's home directory. ``` 6. **Dashboard 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. ``` ### Cost vs paying **Starting costs (one-time):** - Domain name (optional): $12 - Total: ~$12 one-time **Ongoing costs (monthly):** - Vercel Hosting: $0-20/mo - Supabase Database: $0/mo - LLM & Embedding API Usage: ~$5/mo - Total: ~$10-25/mo - Paying for the SaaS instead: $59 / mo (Starter Plan) - Build time: 35-50 hours - AI tool credits: $40 (Claude Pro / Cursor) - Break-even: 1 month vs Starter plan ## Sources - [MagicChat Marketing Homepage](https://magicchat.ai) - [MagicChat Pricing Page](https://magicchat.ai/pricing) - [MagicChat About Page](https://magicchat.ai/about) - [MagicChat Documentation & Integration Guides](https://magicchat.ai/docs)