# How to Vibe Code Your Own Chatwoot (and Stop Paying for It) > Open-source customer support platform and omnichannel shared inbox - Site: https://chatwoot.com - Category: Customer Support SaaS - Verdict: **Serious undertaking** (45/100 vibecodeable) - Estimated effort: 6+ months of part-time work or weeks of intense multi-agent debugging ## Verdict You should use the official open-source Chatwoot repo or pay for it rather than attempting to vibecode this massive omnichannel beast from scratch. Chatwoot is a mature, full-featured monolith built over years by dozens of contributors. While an AI agent can spin up a basic Next.js CRUD chat dashboard in a weekend, replicating the complex surface area—multi-channel webhooks (WhatsApp, IMAP, Meta), realtime WebSocket state synchronization, Twilio voice routing widgets, RAG pipelines for help articles, and robust agent permission boundaries—will introduce endless integration edge cases and debugging nightmares. If you want a self-hosted instance, clone their open-source repository; if you want to vibecode for learning, scope down drastically to just the website live chat widget and internal dashboard. ### What you can't replicate - The years of hardening across messy third-party messaging APIs (WhatsApp, Instagram Graph, IMAP email) - Certified production-grade compliance and security postures (SOC 2 Type II) - The massive open-source integration network and community bug-testing history ## What it does An AI-powered customer support suite aggregating website live chat, emails, social DMs, and voice calls into a single collaborative workspace with built-in knowledge management and AI assistants. ### Core features - Omnichannel shared inbox (Live chat, Email, WhatsApp, social DMs) - Realtime agent dashboard with WebSockets for instant message sync - Embeddable website live chat widget with customizable branding - Captain AI assistant and copilot for thread summaries and reply suggestions - Knowledge base management (Help Center) with AI-powered search - Agent presence, conversation assignments, and round-robin routing - Voice calling integration via Twilio or WebRTC widgets - Automation rules, canned responses, and tags ## The business ### Pricing - Hacker: $0 /agent/month - Startups: $19 /agent/month - Business: $39 /agent/month - Enterprise: $99 /agent/month ### Funding $1.8M raised. - Accelerator (2021) - Y Combinator - Seed (August 2021) - $1.8M Investors: Y Combinator, Goat Capital, Uncorrelated Ventures, Hack VC Founded 2020. Team size: 10-13. ## The hard parts - Synchronizing disparate webhook message streams across Meta Graph API, Twilio, and IMAP without packet loss - Building low-latency browser-based voice call routing and floating WebRTC call state machines - Orchestrating multi-turn LLM agent execution loops (RAG over help centers and 30-second tool timeout handlers) - Maintaining robust WebSocket room state across concurrent agent connections and visitor sessions ## How to vibe code Chatwoot ### Prerequisites - Node.js (free): Required runtime for executing package managers and running the full-stack web application. - GitHub (free): Source code repository hosting and CI/CD deployment pipelines. ### Recommended AI tools - Claude Code: Best-in-class terminal coding agent capable of handling complex multi-file backend and frontend scaffolding across a large codebase. - Cursor: Ideal AI code editor for inspecting diffs, iterating on UI components, and managing real-time chat widgets. ### Stack - Frontend: Next.js with Tailwind CSS and shadcn/ui - Backend: Next.js Server Actions and API Routes / Node.js - Database: Supabase (PostgreSQL with real-time subscriptions) - Auth: better-auth - Payments: Stripe - Other: Pusher for realtime WebSocket events, Resend for transactional email notifications, OpenAI API for Captain AI assistant features ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints with zero-config preview deployments.): $0-20/mo - Supabase (Managing relational database tables, real-time message broadcasting, and vector embeddings for the help center.): $0-25/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure TypeScript, and set up the Supabase database schema for users, accounts, inboxes, conversations, messages, and contacts. ``` Initialize a new Next.js project with Tailwind CSS, TypeScript, and shadcn/ui. Set up a Supabase client configuration file and create the core relational database migration SQL script for a multi-tenant customer support platform. Include tables for accounts, users (with roles: admin, agent), inboxes (types: website, email, api), contacts (with custom attributes and verification flags), conversations (with status, priority, assignee_id), and messages (with content, message_type, sender_type). Add appropriate foreign key constraints, indexes on conversation IDs and timestamps, and enable Row Level Security (RLS) policies for account isolation. ``` 2. **Authentication & Workspace Setup** — Implement authentication using better-auth and build multi-tenant workspace onboarding and agent invitation workflows. ``` Integrate better-auth into the Next.js application supporting email/password and session management linked to Supabase. Create onboarding flows for new users to create an organization/account, invite support agents via email, and assign role-based permissions (Admin vs Agent). Build the settings UI where administrators can manage team members, set up working hours, and configure basic profile preferences. ``` 3. **Agent Dashboard & Realtime Inbox** — Build the core agent dashboard with a split-pane conversation view, filtering tabs, keyboard shortcuts, and real-time WebSocket message synchronization. ``` Build a responsive agent dashboard layout in Next.js featuring a sidebar for inbox channels and filters (All, Mine, Unassigned, Resolved), a middle pane listing active conversations with status badges and timestamps, and a right-hand pane showing customer contact details, custom attributes, and past history. Implement real-time message updates using Supabase Realtime channels or Pusher so new incoming messages instantly appear in the active thread without page refreshes. Add canned response shortcuts triggered by typing '/'. ``` 4. **Embeddable Website Live Chat Widget** — Develop a lightweight, customizable embeddable JavaScript chat widget that can be dropped into external websites to initiate conversations. ``` Create a standalone embeddable live chat widget component using React and Tailwind CSS that can be compiled into a script tag for external websites. The widget should feature a customizable launcher button, brand color picker, pre-chat details form (name, email), a chat history view, and a real-time message input box. Ensure it communicates securely with our backend API channels endpoint using CORS headers, supports visitor identity verification via HMAC tokens, and auto-scrolls to new messages. ``` 5. **Captain AI Assistant & Copilot Integration** — Implement AI-powered features including reply suggestions, thread summarization, and automated assistant responses connected to OpenAI. ``` Implement the 'Captain AI' assistant and copilot module in the backend using the OpenAI API. Create server actions that handle agent requests to rephrase text, summarize long conversation threads, and suggest smart replies based on previous message history. Build an AI assistant bot configuration panel allowing admins to ingest help center documents for RAG-based automated replies, and enforce token credit deduction tracking per account usage rules. ``` 6. **Help Center & Knowledge Base** — Build a customer-facing self-service help center portal with category grouping, rich-text article management, and AI-powered search. ``` Build a Help Center module inside the platform allowing administrators to create multiple help portals, organize articles into categories, and publish rich-text content with metadata. Create a public-facing portal view with custom domain support and an AI-powered search bar that performs semantic searches over article embeddings using Supabase pgvector to deliver instant conversational answers to visiting customers. ``` 7. **Omnichannel Webhooks & Polish** — Set up webhook ingestion endpoints for external messaging channels, implement audit logs, error monitoring with Sentry, and final deployment prep. ``` Implement unified webhook ingestion API routes to handle incoming messages from external channels like email (via SendGrid/Inbound parse) and simulated API channels. Build audit logging to record sensitive admin actions, integrate Sentry for error tracking, write Cypress end-to-end tests for the core messaging loop, and configure environment variables and deployment scripts for Vercel and Supabase production readiness. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Subscriptions: $40 - Custom Domain: $12 - Total: ~$52 one-time **Ongoing costs (monthly):** - Supabase Pro Database: $25/mo - Vercel / Hosting: $0-20/mo - OpenAI API Usage: $15/mo - Total: ~$40/mo - Paying for the SaaS instead: $39/agent/mo (Business Plan) - Build time: 120-160 hours - AI tool credits: $40 (Claude Pro + Cursor Pro) - Break-even: N/A (Build is for personal exploration or self-hosting alternative) ## Sources - [Chatwoot Official Website](https://chatwoot.com) - [Chatwoot Pricing Page](https://www.chatwoot.com/pricing) - [Chatwoot Product Documentation](https://www.chatwoot.com/docs) - [Y Combinator - Chatwoot Profile](https://www.ycombinator.com/companies/chatwoot)