How to vibe codeChatwoot

Prerequisites

• Node.jsfree

  Required runtime for executing package managers and running the full-stack web application.

• GitHubfree

  Source code repository hosting and CI/CD deployment pipelines.

AI coding 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.

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Agent 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 '/'.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Embeddable 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Captain 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Help 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Omnichannel 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Chatwoot