# How to Vibe Code Your Own Help Scout (and Stop Paying for It) > Intuitive & Affordable Customer Service Software - Site: https://helpscout.com - Category: Customer Support SaaS - Platforms: Web app, iOS app, Android app - Verdict: **Solid side project** (62/100 vibecodeable) - Estimated effort: 4-6 weeks of focused evening work ## Verdict You can build a functional personal clone of Help Scout's core inbox and knowledge base, but the multi-channel synchronization and robust workflow automation will demand significant debugging time. Building a single-tenant help desk with a shared inbox, article search, and an AI drafting assistant is an achievable solo project using modern web frameworks. However, you will hit painful friction engineering email ingestion (parsing raw inbound MIME streams via MX records or webhooks) and maintaining synchronized realtime state across agent views without race conditions. The AI RAG loop for documentation search also requires careful chunking and fallback logic to avoid brittle tool-calling errors. ### What you can't replicate - The 100+ pre-built native integrations with enterprise tools like Salesforce and Jira - Certified HIPAA and SOC 2 compliance infrastructure - The 15-year accumulation of channel partnership trust and migration momentum ## What it does A customer service platform featuring shared inboxes, knowledge bases, embeddable support widgets, and AI-powered assistance. ### Core features - Shared Inbox with conversation threading - Multi-channel ingestion (Email, Live Chat, Webhooks) - Knowledge Base (Docs) with Markdown/rich text articles - Embeddable support widget (Beacon) with search and contact form - AI Assistant for drafting, summarizing, and translating replies - Basic workflow automation engine (triggers and actions) - Reporting and insights dashboard (volume, response time) ## The business ### Pricing - Free: $0 - Standard: $25 per user/mo - Plus: $45 per user/mo - Pro: $75 per user/mo ### Funding $21M raised. - Seed - Series A - Series B Investors: Foundry, Lead Edge Capital, Techstars, CommonAngels Founded 2011. Team size: 140-290+. ## The hard parts - Multi-channel data ingestion pipelines (handling IMAP/SMTP sync, webhooks, rate limits, and parsing message payloads securely) - Realtime state synchronization across agent views when conversations are assigned, closed, or replied to - Reliable RAG pipeline over knowledge base documentation with strict query grounding for the AI assistant - Concurrent ticket routing and deterministic background worker execution for automated workflows ## How to vibe code Help Scout ### Prerequisites - Node.js (free): JavaScript/TypeScript runtime for full-stack Next.js development - GitHub (free): Source control and deployment pipeline integration - Supabase account (free): Hosted PostgreSQL database with instant vector extensions for knowledge base RAG - Anthropic API key (pay-as-you-go): Powers AI drafting, thread summarization, and AI answers assistant ### Recommended AI tools - Claude Code: Agentic coding tool for multi-file scaffolding, database schemas, and wiring complex RAG pipelines - Cursor: AI-native code editor ideal for fine-tuning UI component states and responsive support inbox layouts ### Stack - Frontend: Next.js (App Router, Tailwind CSS, shadcn/ui) - Backend: Next.js API Routes / Server Actions - Database: Supabase (PostgreSQL + pgvector for documentation search) - Auth: better-auth - Payments: None (Personal use clone) - Other: Resend for transactional and notification emails, Anthropic API for AI Answers and Inbox Assistant ### Hosting - Vercel (Hosting the Next.js frontend and serverless API functions): $0/mo (Hobby tier) - Supabase (PostgreSQL database storage and vector embeddings): $0/mo (Free tier) ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize a Next.js project with TypeScript, Tailwind CSS, and shadcn/ui. Set up the core database schema in Supabase with tables for organizations, users, inboxes, conversations, customer profiles, messages, and knowledge base articles. Enable the pgvector extension for RAG search. ``` Initialize a new Next.js 16 app with Tailwind CSS, TypeScript, and App Router structure. Install shadcn/ui primitives (button, input, dialog, dropdown-menu, tabs, card, scroll-area). Write a complete Supabase migration SQL script creating tables: `profiles` (id, email, full_name, role), `inboxes` (id, name, description), `customers` (id, name, email, company), `conversations` (id, inbox_id, customer_id, subject, status ['active', 'closed', 'snoozed'], assignee_id, created_at), `messages` (id, conversation_id, user_id, customer_id, body, type ['email', 'chat', 'note']), and `articles` (id, title, slug, content, embedding vector(1536)). Ensure proper foreign key constraints, indexes on conversation status and customer email, and Row Level Security policies. ``` 2. **Authentication & Team Management** — Configure better-auth for secure email/password and session management, linking authenticated users to tenant profiles and supporting role assignments. ``` Integrate better-auth into the Next.js app to handle user sign-up, login, and session cookies connected to the Supabase PostgreSQL database. Create an auth configuration file supporting email/password authentication. Build sign-in and sign-up pages using Tailwind CSS and shadcn/ui components. Add middleware to protect dashboard routes and inject the current user session into server actions and API requests. ``` 3. **Shared Inbox Core UI & Conversation Management** — Build the main multi-column support inbox layout featuring list views filtered by status (Active, Mine, Closed, Snoozed), detailed conversation views with message history threads, and reply composition boxes. ``` Build a responsive multi-column support inbox interface inspired by Help Scout using Tailwind CSS and shadcn/ui. The left sidebar lists inboxes and views (All, Mine, Closed, Snoozed). The middle column displays a filterable list of conversations with customer name, subject preview, time elapsed, and status badges. The right main pane renders the conversation history thread with distinct styling for customer messages vs internal agent replies vs private notes. Include a rich reply editor box with buttons for sending replies, adding notes, and marking conversations as closed or snoozed. ``` 4. **Knowledge Base & RAG Engine** — Implement a custom Docs builder interface allowing users to publish help articles, automatically chunking and generating vector embeddings stored in Supabase for semantic search. ``` Build a Knowledge Base (Docs) module in Next.js. Create an admin view for creating, editing, and publishing markdown articles with titles, slugs, and categories. Write a background server action that triggers upon article save to generate text embeddings using OpenAI or Anthropic embedding endpoints, storing them in the `articles` table `embedding` vector column. Implement a public-facing help center route with instant search that performs vector similarity search (`match_articles`) against user search queries. ``` 5. **AI Inbox Assistant & Autonomous Chatbot (Beacon widget)** — Implement the AI Inbox Assistant actions (summarize thread, draft reply, adjust tone) via Anthropic API calls, and build an embeddable website widget (Beacon) that answers customer questions using RAG over the Knowledge Base. ``` Implement AI features using the Anthropic API. First, add an 'AI Assistant' toolbar above the reply editor in the inbox with buttons to 'Summarize thread', 'Draft reply based on KB', and 'Professionalize tone'. Second, build an embeddable React widget component (`BeaconWidget`) that can be mounted on external sites via a script tag or iframe. The widget features a search bar that queries the knowledge base via vector similarity, an autonomous AI Answers chat loop that answers questions from articles, and a fallback button to 'Contact support' which creates a new conversation in the shared inbox. ``` 6. **Analytics Dashboard & Workflow Triggers** — Create reporting dashboards tracking conversation volume trends, team response times, and customer satisfaction metrics, alongside a basic rule-based workflow engine. ``` Build an Insights & Analytics reporting dashboard using a charting library (such as Recharts). Compute and display metrics for total conversation volume over time, average first response time, resolution time, and open vs closed ticket distributions filtered by date range and inbox. Additionally, implement a lightweight workflow automation rules engine: a background check that evaluates trigger conditions (e.g. new customer message received) against saved rules (e.g. if subject contains 'refund', assign to billing inbox and apply tag) and executes the specified actions. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain (optional): $12/yr - Total: ~$12 one-time **Ongoing costs (monthly):** - Vercel + Supabase Free Tiers: $0/mo - Anthropic API usage: ~$5-15/mo - Total: ~$10/mo - Paying for the SaaS instead: $45 per user/mo (Plus Plan) - Build time: 40-60 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: Immediate (Personal use) ## Sources - [Help Scout Official Website](https://helpscout.com) - [Help Scout Pricing Matrix](https://helpscout.com/pricing) - [Help Scout AI Features Overview](https://helpscout.com/ai)