# How to Vibe Code Your Own Chatbase (and Stop Paying for It)

> Custom AI agents for customer experience and support

- Site: https://chatbase.co
- Category: Customer Support & AI Agents
- Platforms: Web app
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 3-4 weeks part-time

## Verdict

You can build a fully functional personal clone of Chatbase's agent builder, RAG ingestion pipeline, embed widget, and helpdesk inbox in a few weeks, but multi-tenant omnichannel integrations require serious infrastructure work.

Replicating Chatbase's core loop—scraping URLs, chunking documents into pgvector, running RAG chats through an abstraction layer, and managing a helpdesk inbox—is an exceptionally rewarding project. However, an AI agent will hit friction wiring up the live web crawler cleanly, managing rate limits across multiple LLM providers, and synchronizing real-time websocket states between the chat widget and the human helpdesk takeover view without dropping context.

### What you can't replicate

- Extensive native enterprise integrations with Zendesk, Salesforce, and WhatsApp Business API
- The pre-existing customer trust and enterprise security accreditations (SOC 2 Type II)

## What it does

An AI customer support platform enabling businesses to build, test, deploy, and optimize custom AI agents trained on proprietary company data.

### Core features

- Data ingestion engine (website crawler and document parser)
- Vector embeddings and RAG retrieval pipeline (pgvector)
- Multi-model abstraction layer (OpenAI, Anthropic, Gemini, DeepSeek)
- Chatbot embedding widget (<script> embed tag for client sites)
- Playground for model and system prompt testing
- Helpdesk shared inbox with manual takeover and ticket states
- Action execution engine for structured API calls
- Analytics dashboard on topics, volume, and sentiment

## The business

### Pricing

- Free: $0
- Hobby: $40/mo
- Standard: $120/mo
- Pro: $400/mo

Founded 2023.
Team size: ~18.

## The hard parts

- Building a robust web crawler and multi-format document parser that cleans text reliably before vector chunking
- Designing a unified multi-model routing layer that normalizes tool calls, streaming chunks, and token limits across diverse LLM APIs
- Syncing real-time WebSocket messaging state between embed widgets, agent runs, and the human helpdesk inbox during manual takeovers
- Orchestrating deterministic action execution sandboxes where the LLM can safely invoke custom tools with verified parameters

## How to vibe code Chatbase

### Prerequisites

- Node.js (free): Runtime environment for Next.js and TypeScript services.
- GitHub (free): Version control and deployment pipeline source repository.
- Supabase Account (free tier): Provides Postgres, pgvector, Auth, and Realtime WebSocket channels.
- Anthropic / OpenAI API Keys (pay-as-you-go): Model inference for RAG generation and agent reasoning.

### Recommended AI 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.

### Stack

- Frontend: Next.js (React) + Tailwind CSS + shadcn/ui
- Backend: Next.js App Router API routes / Server Actions
- Database: Supabase (PostgreSQL + pgvector)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Firecrawl

### Hosting

- Vercel (Hosting the Next.js frontend, dashboard, embed script hosting, and API backend): $0-20/mo
- Supabase (Managed Postgres database, pgvector vector storage, and Realtime websocket channels): $0-25/mo

### Build guide

1. **Database 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.
```

2. **Data 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.
```

3. **Multi-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.
```

4. **Embeddable 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.
```

5. **Agent 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.
```

6. **Helpdesk 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.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby/Pro hosting: $0-20/mo
- Supabase Database & Vector storage: $0-25/mo
- LLM API usage (OpenAI/Anthropic): ~$10/mo
- Total: ~$10-55/mo

- Paying for the SaaS instead: $120/mo (Standard Plan)
- Build time: 45 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: 1 month vs Standard plan

## Sources

- [Chatbase Official Website](https://www.chatbase.co)
- [Supabase Case Study - Chatbase Goes Upmarket on Supabase](https://supabase.com/customers/chatbase)
- [Chatbase Documentation & API v2 Reference](https://www.chatbase.co/docs)