How to vibe codeHelp Scout

Prerequisites

• Node.jsfree

  JavaScript/TypeScript runtime for full-stack Next.js development

• GitHubfree

  Source control and deployment pipeline integration

• Supabase accountfree

  Hosted PostgreSQL database with instant vector extensions for knowledge base RAG

• Anthropic API keypay-as-you-go

  Powers AI drafting, thread summarization, and AI answers assistant

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

Build guide

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Shared 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Help Scout